打开TabLayout的正确姿势

TabLayout

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

先看下效果:

一:在布局文件中使用:

"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的英文没有区分大小写的问题!