仿腾讯视频android客户端上方的标题栏

如图，上方的导航栏是不是很酷，首先它本身是可以滑动的，然后右侧有一个可以查看所有Tab的按钮，然后他和下方的ViewPager还是联动的，可以通过点击它切换ViewPager，并且ViewPager滑动，它也会随着改变，还有指示条。如果要实现这个效果怎么办？

当然，完全可以自己定义实现，但是有太多的细节需要去考虑到，还得手动调整指示条的位置，这还不是问题，问题是滑动到头怎么办，而且需求要求Tab项不确定，指示条长度就不一样，滑动范围也不确定，不过还是可以实现的。但是想想就觉得代码太冗余了...

于是我想，可不可以用ViewPager就能实现？

上方的Tab用PagerTabStrip去实现，但是一想，不行啊，右侧的查看更多怎么办？后来一想，我可以用FrameLayout来实现，因为ViewPager和PagerTabStrip是一体的，所以我把整个ViewPager先放入FrameLayout里，然后在右上角摞上一个ImageView就可以实现效果了！联动和效果都有了。

可是，问题又出现了，PagerTabStrip的tab之间的距离他封装的有一个最小的距离，而且无法修改，所以他的setTextSpacing方法只能调整的越来越大，却不能比他设置的最小值还小，所以我就...

所以这条路就走不通了。

我记得我之前实现过可以让标题栏收缩在屏幕之中显示的，然后我就回去看了笔记，果然！

不过不是只用ViewPager就能实现的，而是用TabLayout和ViewPager结合来实现的。

首先，在xml中定义TabLayout（和“查看更多”的按钮一块布好局）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/main"
        app:tabTextAppearance="@style/TabStyle">
    </android.support.design.widget.TabLayout>

    <ImageView
        android:id="@+id/more"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/more_divider"
        android:padding="10dp"
        android:src="@drawable/more"/>

</LinearLayout>

然后代码中设置：

//下面这么写如果和ViewPager一绑定就会不显示文字，因为他会先remove掉之前的所有Tab，然后new，把ViewPager的标题拿
// 过来用，倘若你的ViewPager没有设置标题，则就会看不见了
//        //调接口获取所有咨询标题
//        mTitles.add("昌吉");
//        mTitles.add("体育");
//        mTitles.add("军事");
//        mTitles.add("历史");
//        mTitles.add("轻松一刻");
//        mTitles.add("NBA");
//        //给TabLayout添加标题
//        for (int i = 0; i < mTitles.size(); i++) {
//            mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(i)));
//        }
//使Tab可滚动
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置指示条颜色
mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));
//设置文字颜色
mTabLayout.setTabTextColors(Color.BLACK, Color.parseColor("#418DEB"));
//将ViewPager和TabLayout联系起来
mTabLayout.setupWithViewPager(mViewpager);

这是我一开始这么写的，发现Tab的文字不见了，但是指示条还在，然后还可以正常滑动，而且不蹦。

然后我把

//将ViewPager和TabLayout联系起来
mTabLayout.setupWithViewPager(mViewpager);

这一句屏蔽了，发现又能显示了！

然后就开始百度，发现了大神的解决方法->点击打开链接

原来如果你和ViewPager绑定之后，他会先remove掉之前的所有Tab，然后new出新的Tab，把ViewPager的标题拿过来用，倘若你的ViewPager没有设置标题，则就会出现看不见了文字的情况了。

所以，改成下面这样写：

//使Tab可滚动
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置指示条颜色
mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));
//设置文字颜色
mTabLayout.setTabTextColors(Color.BLACK, Color.parseColor("#418DEB"));
//将ViewPager和TabLayout联系起来
mTabLayout.setupWithViewPager(mViewpager);
//在上一行代码“mTabLayout.setupWithViewPager(mViewpager);”之后添加Tab
mTitles.add("昌吉");
mTitles.add("体育");
mTitles.add("军事");
mTitles.add("历史");
mTitles.add("轻松一刻");
mTitles.add("NBA");
//这里的mViews一定要和mTitle长度一致(从同一个接口返回的List里取)
for (int i = 0; i < mViews.size(); i++) {
    mTabLayout.getTabAt(i).setText(mTitles.get(i));
}

也可以在xml中设置TabLayout的属性：

app:tabTextAppearance="@style/TabStyle">
<!-- app:tabTextColor="@android:color/black"//设置TabLayout的tab的字体颜色
 app:tabSelectedTextColor="?attr/colorAccent"//设置TabLayout的tab被选中后的字体的颜色
 app:tabBackground="@android:color/white"//设置TabLayout的tab的背景色
 app:tabIndicatorColor="?attr/colorAccent"//设置TabLayout的指示器的颜色
 app:tabPaddingStart="12dp"
 app:tabPaddingEnd="12dp"//设置TabLayout的tab的内间距
 app:tabMode="scrollable"//设置TabLayout是固定还是可以滚动
 app:tabGravity="center"//设置TabLayout的tab在中心-->

到此，完美实现效果！

最后，提一下，ViewPager添加View，尽量不要用inflate来添加，改用在代码中new的形式添加，可以少定义好多布局，而且inflate会很耗时间！

提供一种思路：

private void initViews() {
    mViews = new ArrayList<>();
    for (int i = 0; i < 6; i++) {
        //要添加的View
        LinearLayout pager = new LinearLayout(getActivity());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        pager.setOrientation(LinearLayout.HORIZONTAL);
        //官方下拉刷新
        final SwipeRefreshLayout refreshLayout = new SwipeRefreshLayout(getActivity());
        refreshLayout.setLayoutParams(params);
        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshLayout.setRefreshing(false);
            }
        });
        //刷新的时候变化的颜色
        refreshLayout.setColorSchemeColors(Color.parseColor("#418DEB"), Color.BLUE, Color.BLACK);
        //刷新里面的ListView
        ListView listView = new ListView(getActivity());
        listView.setLayoutParams(params);
        MyBaseAdapter mListViewAdapter = new MyBaseAdapter();
        listView.setAdapter(mListViewAdapter);
        refreshLayout.addView(listView);
        pager.addView(refreshLayout);
        mViews.add(pager);
    }

}

来自我的工作项目：掌上昌吉。