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

运行效果图：

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

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