打开TabLayout的正确姿势

TabLayout

在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它需要跟ViewPager结合起来使用完成TabPageIndicator（页签导航条）的效果。

先看下效果:

一:在布局文件中使用:

        android:layout_width="match_parent"
        android:background="@color/colorPrimary"//设置背景色
        app:tabIndicatorHeight="3dp"//下划线高度
        app:tabIndicatorColor="@color/colorPrimary"//下划线的颜色
        app:tabSelectedTextColor="@color/white"//选中文字的颜色     
        app:tabTextColor="#7f000000" //未选中文字的颜色
        app:tabMode="scrollable"//scrollable代表title有多个可以滚动 fixed表示一个屏幕全部容纳
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

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

二:在代码中使用:

//初始化...
//和viewpager进行关联,一定要写 不然无法和viewpager联动
mTabLayout.setupWithViewPager(mViewpager);

三:标签初始化:

 @Override
    public CharSequence getPageTitle(int position) {
        String title = datas.get(position);
        return title;//在viewpager的adapter中复写该方法,集合中的内容就是你要展示的title
    }

四:在TabLayout之前我们有 PagerSlidingTabStrip 、 SmartTabLayout 、 FlycoTabLayout 、 ViewPagerIndicator 等一系列第三方库来帮我们实现,
但是现在Google的TabLayout也很强大,不止可以作为顶部页签,也可以在底部做导航

<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.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" /> 

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#1FBCD2"
        //等分且居中
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorHeight="0dp"    
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextColor="#000000"></android.support.design.widget.TabLayout>
</LinearLayout>

五:问什么TabLayout会知道viewpager的页数

 mTlMvShow.setupWithViewPager(mVpMvShow);//TabLayout拿到了viewpager,这里我们需要看下setupWithViewPager这个方法的源码

 final PagerAdapter adapter = viewPager.getAdapter();//拿到了viewpager的adapter

 mPagerAdapter = adapter;//用自己的变量记录我们的adapter

//这里大家应该明白了 getPageTitle这个方法不就是我们在viewpager的适配器中复写的方法吗
if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

六:关于TabLayout的title区分英文大小写大家都知道Android默认的英文都是大写,一般我们都会自己手动加上

android:textAllCaps="false"

但是TabLayout中你会发现并没有这一条属性,方法看下面代码,可能有多种实现,但是这里只提供一种

  <android.support.design.widget.TabLayout
        style="@style/TabLayoutStyle"//自定义style 
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

style样式如下:

<!-- TabLayout样式 -->
    <style name="TabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/TabTextAppearence</item>
    </style>
    <style name="TabTextAppearence" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>//源码是true 我们改为false
    </style>

再次运行,就解决了title的英文没有区分大小写的问题!