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;
    }

}

最后界面效果: