TabLayout 标签布局

TabLayout ：ViewPager上方放置一个标签指示器与其进行联动，此标签指示器就是TabLayout ，其中的Tab标签可以自定义view的样式。
示例如下：
1.导入依赖包 implementation ‘com.android.support:design:25.4.0’
2.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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_tab_layout"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="#ff0000"       //下划线滚动的颜色
    app:tabSelectedTextColor="#ff00ff"    //tab被选中后，文字的颜色
    app:tabTextColor="#000000" >          //tab默认的文字颜色
</android.support.design.widget.TabLayout>

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

3.MainActivity.java文件
其中item布局文件非常简单，为了观察明显，因此只定义了背景颜色，具体代码省略，也可以自定义布局练习。

public class MainActivity extends AppCompatActivity   {
List <View> viewList;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    LayoutInflater lf = LayoutInflater.from(this);
    View view1 = lf.inflate(R.layout.item,null);
    View view2 = lf.inflate(R.layout.item1,null);
    View view3 = lf.inflate(R.layout.item2,null);
    viewList = new ArrayList<>();
    viewList.add(view1);
    viewList.add(view2);
    viewList.add(view3);

    ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
    MyPagerAdapter adapter = new MyPagerAdapter();
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);  //关联viewpager
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);  //设置模式

    for (int i =0;i<adapter.getCount();i++){
        View view = lf.inflate(R.layout.custom_table,null);
        TextView tv = (TextView) view.findViewById(R.id.tv_tab);
        tv.setText(adapter.getPageTitle(i));
        tabLayout.getTabAt(i).setCustomView(view);  //设置自定义条目
    }
}

private class MyPagerAdapter extends PagerAdapter{

    //返回条目的数量
    @Override
    public int getCount() {
        return viewList.size();
    }

    //object和view之间的关系
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    //条目的初始化
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = viewList.get(position);
        container.addView(view);
        return view;
    }

    //销毁一个条目
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        Log.i("MyPagerAdapter","回收了哪一个位置"+position);
        container.removeView(viewList.get(position));
    }

    //指定每个页面的标题
    @Override
    public CharSequence getPageTitle(int position) {
        return "条目"+position;
    }
  }
}

4.custom_tab.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:gravity="center"
android:orientation="horizontal">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:src="@mipmap/ic_launcher"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tv_tab"
    android:textSize="14sp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:gravity="center"
    android:textColor="#000000"
    android:layout_gravity="center"
    android:text="条目"/>
</LinearLayout>