Viewpager实现今日头条顶部导航的功能

利用简单的Textview 和Viewpager实现滑动、点击换页的效果，效果图如下：

　　　

先上布局文件代码：

<?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="@color/white"
    android:orientation="vertical" >

   <LinearLayout
       android:background="@color/red_base"
       android:orientation="horizontal"
       android:layout_width="match_parent"
       android:layout_height="50dp">

   </LinearLayout>
    <!-- 选项卡 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/white"
        android:orientation="horizontal"
        android:weightSum="5" >

        <FrameLayout
            android:id="@+id/rim_tab1_fl"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center" >

            <TextView
                android:id="@+id/rim_tab1_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="全部"
                android:textColor="@color/red_base"
                android:textSize="16sp" />
        </FrameLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/divider_gray_line" />

        <FrameLayout
            android:id="@+id/rim_tab2_fl"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center" >

            <TextView
                android:id="@+id/rim_tab2_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="周边"
                android:textColor="@color/text_gray_4"
                android:textSize="16sp" />
        </FrameLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/divider_gray_line" />

        <FrameLayout
            android:id="@+id/rim_tab3_fl"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center" >

            <TextView
                android:id="@+id/rim_tab3_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="应援"
                android:textColor="@color/text_gray_4"
                android:textSize="16sp" />
        </FrameLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/divider_gray_line" />

        <FrameLayout
            android:id="@+id/rim_tab4_fl"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center" >

            <TextView
                android:id="@+id/rim_tab4_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="话题"
                android:textColor="@color/text_gray_4"
                android:textSize="16sp" />
        </FrameLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/divider_gray_line" />

        <FrameLayout
            android:id="@+id/rim_tab5_fl"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center" >

            <TextView
                android:id="@+id/rim_tab5_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="明星"
                android:textColor="@color/text_gray_4"
                android:textSize="16sp" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@color/white" >

        <ImageView
            android:id="@+id/rim_cursor"
            android:layout_width="80dp"
            android:layout_height="3dp"
            android:layout_marginTop="0dip"
            android:background="@color/title_bar_blue" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/btn_bg_gray" />
    <!-- 选项卡内容显示区域 -->

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@color/bg_light_gray" />

    <android.support.v4.view.ViewPager
        android:id="@+id/rim_third_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

上面红色指示器的view的初始化

private int screenWidth;//指示器
private ImageView cursorImg;
private LinearLayout.LayoutParams lp;


 private void initViews(){

        WindowManager wm = (WindowManager)
                getSystemService(Context.WINDOW_SERVICE);

        int width = wm.getDefaultDisplay().getWidth();
        screenWidth=width/5;
        cursorImg = (ImageView) findViewById(R.id.rim_cursor);
        lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams();
        lp.width = screenWidth;
        cursorImg.setLayoutParams(lp);
        leftMargin = lp.leftMargin;
  }

初始化indicater

private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.rim_third_vp);
        fragmentsList = new ArrayList<Fragment>();
        fragment1 = new RimFragment();     
        fragmentsList.add(fragment1);
        fragmentsList.add(fragment2);
        fragmentsList.add(fragment3);
        fragmentsList.add(fragment4);
        fragmentsList.add(fragment5);

        viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),
                fragmentsList));
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(this);
    }

设置上面选项卡的点击事件

 @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.rim_tab1_fl:
                viewPager.setCurrentItem(0);
                num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
                num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                fragment1.setMsgName("1","周边");//周边的官方和会员的接口参数,官方
                break;

设置viewpager 滑动事件

 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        offset = (screenWidth - cursorImg.getLayoutParams().width) / 5;

        hidePoint(position, positionOffsetPixels);//设置红色指示器的位置
        cursorImg.setLayoutParams(lp);
        currentIndex = position;
    }

    @Override
    public void onPageSelected(int position) {

        switch (position){//设置点击事件
            case  0:
                fragment1.setMsgName("1","周边");
                num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
                num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
                break;


        }

        if (position==0)
        {


        }else {

        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    //设置指示器的位置
    private void hidePoint(int position, int positionOffsetPixels) {
        if (position == 0) {// 0<->1
            lp.leftMargin = (int) (positionOffsetPixels / 5) + offset;

        } else if (position == 1) {// 1<->2
            lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth
                    + offset;

        }else  if(position==2){
            lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*2
                    + offset;
        }
        else  if(position==3){
            lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*3
                    + offset;
        }
        else  if(position==4){
            lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*4
                    + offset;
        }
    }

代码并不难，希望通过我这个例子，一是巩固自己的学习和理解，二是希望更多的人更好的学习，我会再接再厉，写更多的博文。

源码下载