6.0--TabLayout使用介绍（2）

180928更新
关于指定条的宽度，在support28 / androdix 的版本添加了属性设置app:tabIndicatorFullWidth为false时自适应文字的宽度， 还有反射里面的mTabStrip也改成了slidingTabIndicator，如果是更高的版本再使用mTabStrip会报空指针。

相关文章：
6.0--TabLayout使用介绍（1）

在6.0--TabLayout使用介绍（1）中，介绍了单独使用TabLayout的情况，接下来要说的是，TabLayout 与 ViewPager配合使用实现ViewPagerIndicator的功能。

(1). activity_vp_and_tl.xml 布局文件

布局方式有两种，如下：

方式1 ：ViewPager 与TabLayout是平级关系

activity_vp_and_tl.xml

方式2 ：ViewPager 中嵌套TabLayout

(2).代码中的使用：

VpAndTlActvitiy.java

/**
 * Created by CnPeng on 2016/12/6.
 * 

 * 展示viewPager 和 TabLayout的配合使用
 */

public class VpAndTLActivity extends AppCompatActivity {

    public static void startVpAndTLActivity(Context context) {
        Intent inent = new Intent(context, VpAndTLActivity.class);
        context.startActivity(inent);
    }

    @Override
    protected void onCreate(
            @Nullable
                    Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_vp_and_tl);

        initView();
    }

    /**
     * 初始化view
     */
    private void initView() {
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        TabLayout tablayout = (TabLayout) findViewById(R.id.tableLayout);

        tablayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorAccent));   //指示器的颜色(底部横线的颜色)
        tablayout.setSelectedTabIndicatorHeight(15);                             //指示器的高度，单位 px（底部横线的高度）
        tablayout.setTabTextColors(R.color.colorPrimary, R.color.colorAccent);   //指示器中文字的颜色

        FragmentManager manager = getSupportFragmentManager();

        List titles = new ArrayList<>();
        titles.add("第 1 个页面");
        titles.add("第 2 个页面");
        titles.add("第 3 个页面");
        titles.add("第 4 个页面");
        titles.add("第 5 个页面");

        viewPager.setAdapter(new MyVpAndTlAdapter(titles));

        //关联vp 和 tl (如果vp 和 TL 是平级关系时，使用这种；如果VP中包含TL时，不用写这句代码)
        tablayout.setupWithViewPager(viewPager);
    }
}

(3). ViewPager适配器代码

MyVpAndTlAdapter.java

/**
 * Created by CnPeng on 2016/12/6.
 * 

 * ViewPager + TabLayout 时使用的适配器
 */
public class MyVpAndTlAdapter extends PagerAdapter {
    private final List titles;

    public MyVpAndTlAdapter(List titles) {
        this.titles = titles;
    }

    @Override   //获取总数量
    public int getCount() {
        return titles.size();
    }

    @Override   //实例化布局
    public Object instantiateItem(ViewGroup container, int position) {
        View view = new ImageView(container.getContext());
        view.setBackgroundResource(R.drawable.ic_launcher);
        container.addView(view);
        return view;
    }

    @Override  //获取标题
    public CharSequence getPageTitle(int position) {
        //        return super.getPageTitle(position);
        return titles.get(position);
    }

    @Override   //销毁视图
    public void destroyItem(ViewGroup container, int position, Object object) {
        //        super.destroyItem(container, position, object);
        container.removeView((View) object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;  //固定写法
    }
}

附：layer_list_singleline.xml,这个是第一种方式中vp的那个backgroud

总结：
A:
如果vp 和 TL 是平级关系,需要使用 tablayout.setupWithViewPager(viewPager); 将二者关联。
如果VP中包含TL时，会自动关联，不用写上面这句代码
B:
vp配合TL使用时，TabLayout 中的标签名称是通过ViewPager适配器中的getPageTitle()方法来设置的。所以，需要给适配器传入一个标签名称的集合。

参考连接https://developer.android.com/reference/android/support/design/widget/TabLayout.html

一个TL+一个VP +一个FM 实现多页面切换时，VP使用FragmentPagerAdapter，其写法参考：https://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html