Material Design学习之 TabLayout（ViewPager实现页卡最简单方法）

在开发中，我们常常需要ViewPager结合Fragment一起使用，我们可以使用三方开源的PagerSlidingTabStrip去实现，或者viewpagerindicator，我一般都偏向前者。现在我们可以使用Design support library库的TabLayout去实现了。

实现方法

1、gradle文件中添加依赖

com.android.support:design:26.0.0

2、设置布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/mWritTable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@drawable/tab_design_color"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabSelectedTextColor="@color/name_color"
        app:tabTextColor="@color/edt_color">

    </android.support.design.widget.TabLayout>

    <View style="@style/view_line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/mWritViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

这里面没有什么特别的，就是添加了一个TabLayout和Viewpager作为上下的布局。tablayout中tabSelectedTextColor指选中时文字颜色，tabIndicatorColor指滚动条颜色。

3、代码实现

public class MainActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private MyFragmentPagerAdapter mAdapter;
    private List<Fragment> mList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {

        mTabLayout=(TabLayout)findViewById(R.id.mWriteTable);
        mViewPager=(ViewPager)findViewById(R.id.mWriteViewPager);

       mList = new ArrayList<>();    
       mList.add(new Tab1());      
       mList.add(new Tab2());

      ArrayList<String> tabTitle =new ArrayList<String>();     
       tabTitle.add("美女")

       tabTitle.add("帅哥");

       mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList, tabTitle);   
    
       mViewPager.setAdapter(mAdapter);   

       mTabLayout.setupWithViewPager(mViewPager);   
 }
}

其中MyFragmentPagerAdapter是ViewPager的适配器

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mList = new ArrayList<>();
    private List<String> tabTitles;

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list, List<String> tabTitles) {
        super(fm);
        this.mList = list;
        this.tabTitles = tabTitles;
    }

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles.get(position);
    }
}

运行效果图：

注：我这里是改变的背景颜色，我把下面的滑动条的颜色改变成了透明色，所以是看不见下面的滑动条的，可以自己改一下颜色值。

如有不对的地方欢迎指正。