ViewPager+Fragment滑动页面，tabbar跟着实时滑动

反正都写了几篇ViewPager了，也不差这一篇了，官方推荐，绝配：Viewpager+Fragment

先看效果图吧，再决定往不往下看。

不说废话，直接看代码，先看整个页面的布局文件act_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#404040">
        <TextView
            android:id="@+id/page_tab0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/normal_color"
            android:gravity="center"
            android:text="Tab0"/>
        <TextView
            android:id="@+id/page_tab1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/normal_color"
            android:gravity="center"
            android:text="Tab1"/>
        <TextView
            android:id="@+id/page_tab2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/normal_color"
            android:gravity="center"
            android:text="Tab2"/>
        <TextView
            android:id="@+id/page_tab3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="18sp"
            android:textColor="@color/normal_color"
            android:gravity="center"
            android:text="Tab3"/>
    </LinearLayout>
    <View
        android:id="@+id/page_tab_line"
        android:layout_width="50dp"
        android:layout_height="2dp"
        android:background="#00ff00"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>
</LinearLayout>

代码很简单，就是一个垂直方向的线性布局，四个TextView，一个ViewPager，只是中间多了一个tabLine而已。

有了布局之后，我们的Activity也就可以开始写了，与使用ViewPager加载View不同，加载Fragment的时候虽然需要继承FragmentPagerAdapter，不过需要实现的方法却少了两个，反而相对简单了。代码如下：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        initViews();
        initTabLine();

        mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LinearLayout.LayoutParams layoutParams=(LinearLayout.LayoutParams)tabLine.getLayoutParams();
                layoutParams.leftMargin=(int)((position+positionOffset)*tabLine.getWidth());
                tabLine.setLayoutParams(layoutParams);
            }

            @Override
            public void onPageSelected(int position) {
                resetColor();
                switch (position){
                    case 0:
                        tab0.setTextColor(getResources().getColor(R.color.selected_color));
                        break;
                    case 1:
                        tab1.setTextColor(getResources().getColor(R.color.selected_color));
                        break;
                    case 2:
                        tab2.setTextColor(getResources().getColor(R.color.selected_color));
                        break;
                    case 3:
                        tab3.setTextColor(getResources().getColor(R.color.selected_color));
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

这一部分应该是整个Activity最核心的部分了了，代码应该很容易看懂，初始化view之后，我们直接setAdapter就结束了。之后的OnPageChangeListener也只是为了让ViewPager滑动的时候，更改字体颜色和让tabline跟着滑动而已。因为我们想要的是让tabline跟着实时滑动，所以，我们没有在onPageSelected()方法中去执行动画操作，而是通过在onPageScrolled()方法的offset来设置leftMargin。这几个方法，也在 上一篇博客详细说过。

接下来我们看下我们自定义的Adapter：

    class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return 4;
        }

        @Override
        public Fragment getItem(int position) {
            return MyFragment.newInstance(position);
        }
    }

就这么简单的两行，相对于我们之前的各种adapter，实在少了很多代码啊。

主要的内容也就以上的部分，剩下的也没什么东西了，索性把代码全贴出来吧。先看MyFragment的定义：

public class MyFragment extends Fragment{

    public static MyFragment newInstance(int index){
        MyFragment fragment=new MyFragment();
        Bundle args=new Bundle();
        args.putInt("index",index);
        fragment.setArguments(args);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View contentLayout=inflater.inflate(R.layout.frag_main,container,false);
        TextView textView=(TextView)contentLayout.findViewById(R.id.frag_content_text);
        textView.setText(String.format(getResources().getString(R.string.frag_content_text),getArguments().getInt("index")));
        return contentLayout;
    }
}

还有Activity里面的一些初始化的方法：

    private void initViews(){
        mViewPager=(ViewPager)findViewById(R.id.mViewPager);
        tab0=(TextView)findViewById(R.id.page_tab0);
        tab1=(TextView)findViewById(R.id.page_tab1);
        tab2=(TextView)findViewById(R.id.page_tab2);
        tab3=(TextView)findViewById(R.id.page_tab3);
        tabLine=findViewById(R.id.page_tab_line);
    }

    private void initTabLine(){
        LinearLayout.LayoutParams layoutParams=(LinearLayout.LayoutParams)tabLine.getLayoutParams();
        layoutParams.width=getResources().getDisplayMetrics().widthPixels/4;
        tabLine.setLayoutParams(layoutParams);
    }

    private void resetColor(){
        tab0.setTextColor(getResources().getColor(R.color.normal_color));
        tab1.setTextColor(getResources().getColor(R.color.normal_color));
        tab2.setTextColor(getResources().getColor(R.color.normal_color));
        tab3.setTextColor(getResources().getColor(R.color.normal_color));
    }

这样的话，整个demo就结束了，有需要源码可以点击链接， 下载地址