ViewPage+Fragment(仿微信切换带通知)
第一步 : 布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" android:orientation="vertical" > <include layout="@layout/top1" /> // 顶部的菜单 <include layout="@layout/top2" /> // 顶部的聊天 , 发现 ,通讯录 <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager> </LinearLayout>
layout 文件下的top1
<?xml version="1.0" encoding="utf-8"?> // top1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/abc_ab_bottom_solid_dark_holo" //头部的黑背景 android:padding="12dip" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_icon" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:text="微信" android:textColor="@color/lightgray" android:textSize="18dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" //居右 android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:layout_marginRight="20dip" android:src="@drawable/actionbar_search_icon" /> <ImageView android:id="@+id/add" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginRight="20dip" android:src="@drawable/actionbar_add_icon" /> <ImageView android:id="@+id/set" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_more_icon" /> </LinearLayout> </RelativeLayout> </LinearLayout>
ayout 文件下的top2 .xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/lllayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <LinearLayout android:id="@+id/id_tab_liaotian_ly" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" android:gravity="center" android:orientation="horizontal" android:padding="10dip" > <TextView android:id="@+id/id_liaotian" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="聊天" android:textColor="@color/green" android:textSize="15dip" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_faxian_ly" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" // 选择器 android:clickable="true" android:gravity="center" android:orientation="horizontal" android:padding="10dip" android:saveEnabled="false" > <TextView android:id="@+id/id_faxian" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="发现" android:textColor="@color/black" android:textSize="15dip" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_tongxunlu_ly" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" android:focusable="false" android:gravity="center" android:orientation="horizontal" android:padding="10dip" > <TextView android:id="@+id/id_tongxunlu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="通讯录" android:textColor="@color/black" android:textSize="15dip" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/id_tab_line" android:layout_width="200dp" android:layout_height="wrap_content" android:background="@drawable/vpi__tab_selected_pressed_holo" > //图片 </ImageView> </LinearLayout>
选择器 guide_round.xml
<?xml version="1.0" encoding="UTF-8"?> //guide_round.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:drawable="@drawable/abc_ab_share_pack_holo_dark" /> <item android:state_enabled="false" android:drawable="@drawable/abc_cab_background_top_holo_light" /> </selector>
第二步 : 主界面的实现MainActivity
public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List<Fragment> mFragments = new ArrayList<Fragment>(); /** * 顶部三个LinearLayout */ private LinearLayout mTabLiaotian; private LinearLayout mTabFaxian; private LinearLayout mTabTongxunlun; /** * 顶部的三个TextView */ private TextView mLiaotian; private TextView mFaxian; private TextView mTongxunlu; /** * 分别为每个TabIndicator创建一个BadgeView */ private BadgeView mBadgeViewforLiaotian; private BadgeView mBadgeViewforFaxian; private BadgeView mBadgeViewforTongxunlu; /** * Tab的那个引导线 */ private ImageView mTabLine; /** * ViewPager的当前选中页 */ private int currentIndex; /** * 屏幕的宽度 */ private int screenWidth; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.id_viewpager); initView(); initTabLine(); setListener(); /** * 初始化Adapter */ mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mFragments.size(); } @Override public Fragment getItem(int arg0) { return mFragments.get(arg0); } }; mViewPager.setAdapter(mAdapter); /** * 设置监听 */ mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { // 重置所有TextView的字体颜色 resetTextView(); switch (position) { case 0: //聊天 mTabLiaotian.removeView(mBadgeViewforLiaotian); mBadgeViewforLiaotian.setBadgeCount(5); mTabLiaotian.addView(mBadgeViewforLiaotian); mLiaotian.setTextColor(getResources().getColor( R.color.green)); break; case 1: //发现 mFaxian.setTextColor(getResources().getColor(R.color.green)); mTabFaxian.removeView(mBadgeViewforFaxian); mBadgeViewforFaxian.setBadgeCount(15); mTabFaxian.addView(mBadgeViewforFaxian); break; case 2: //通讯录 mTongxunlu.setTextColor(getResources().getColor( R.color.green)); break; } currentIndex = position; //设置当前页面的值 } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { /** * 利用position和currentIndex判断用户的操作是哪一页往哪一页滑动 * 然后改变根据positionOffset动态改变TabLine的leftMargin */ if (currentIndex == 0 && position == 0)// 0->1 { LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine .getLayoutParams(); lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 3) + currentIndex * (screenWidth / 3)); mTabLine.setLayoutParams(lp); } else if (currentIndex == 1 && position == 0) // 1->0 { LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine .getLayoutParams(); lp.leftMargin = (int) (-(1 - positionOffset) * (screenWidth * 1.0 / 3) + currentIndex * (screenWidth / 3)); mTabLine.setLayoutParams(lp); } else if (currentIndex == 1 && position == 1) // 1->2 { LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine .getLayoutParams(); lp.leftMargin = (int) (positionOffset * (screenWidth * 1.0 / 3) + currentIndex * (screenWidth / 3)); mTabLine.setLayoutParams(lp); } else if (currentIndex == 2 && position == 1) // 2->1 { LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine .getLayoutParams(); lp.leftMargin = (int) (-(1 - positionOffset) * (screenWidth * 1.0 / 3) + currentIndex * (screenWidth / 3)); mTabLine.setLayoutParams(lp); } } @Override public void onPageScrollStateChanged(int state) { } }); mViewPager.setCurrentItem(1); // 默认选中1 } /** * 根据屏幕的宽度，初始化引导线的宽度 */ private void initTabLine() { mTabLine = (ImageView) findViewById(R.id.id_tab_line); DisplayMetrics outMetrics = new DisplayMetrics(); getWindow().getWindowManager().getDefaultDisplay() .getMetrics(outMetrics); screenWidth = outMetrics.widthPixels; LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine .getLayoutParams(); lp.width = screenWidth / 3; mTabLine.setLayoutParams(lp); } /** * 重置颜色 */ protected void resetTextView() { mLiaotian.setTextColor(getResources().getColor(R.color.black)); mFaxian.setTextColor(getResources().getColor(R.color.black)); mTongxunlu.setTextColor(getResources().getColor(R.color.black)); } /** * 初始化控件，初始化Fragment */ private void initView() { mTabLiaotian = (LinearLayout) findViewById(R.id.id_tab_liaotian_ly); mTabFaxian = (LinearLayout) findViewById(R.id.id_tab_faxian_ly); mTabTongxunlun = (LinearLayout) findViewById(R.id.id_tab_tongxunlu_ly); // 聊天 mLiaotian = (TextView) findViewById(R.id.id_liaotian); // 发现 mFaxian = (TextView) findViewById(R.id.id_faxian); // 通讯录 mTongxunlu = (TextView) findViewById(R.id.id_tongxunlu); MainTab01 tab01 = new MainTab01(); MainTab02 tab02 = new MainTab02(); MainTab03 tab03 = new MainTab03(); mFragments.add(tab01); // 存 fragment 的集合 mFragments.add(tab02); mFragments.add(tab03); // 发现BadgeView mBadgeViewforFaxian = new BadgeView(this); mBadgeViewforLiaotian = new BadgeView(this); // 聊天BadgeView mBadgeViewforTongxunlu = new BadgeView(this); // 通讯录BadgeView } // 监听点击 上面的条目的 ,切换页面的事件 private void setListener() { mTabLiaotian.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { mViewPager.setCurrentItem(0); } }); mTabFaxian.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { mViewPager.setCurrentItem(1); } }); mTabTongxunlun.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { mViewPager.setCurrentItem(2); } }); } }
MainTab01.java , MainTab01.java , MainTab01.java 都一样
public class MainTab01 extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View messageLayout = inflater.inflate(R.layout.main_tab_02, container, false); return messageLayout; } }
最后界面效果:
