TabLayout——浅谈

　　TabLayout是Google新推出（其实好久了。。。）的一个组件，在android5.0的之后的应用中被广泛应用，最近做的一个项目当中也使用到，所以抽空花点时间，整理总结一番。

TabLayout是什么？

　　TabLayout是一个用来横向显示Tab组件的布局。用来显示Tab组件非常方便，是Android应用中使用最广泛的布局组件之一。
TabLayout的基本用法

　　首先引入TabLayout的库，项目是基于Android Studio的，所以引入库是十分方便的，在应用的build.gradle文件中加入这一句，其中后面的版本号跟自己的 compileSdkVersion保持一致就好：

dependencies {
    ……
    compile 'com.android.support:design:23.2.0'
}

　　java调用代码如下：


 TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

　　
　　xml布局举例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tablayout"
        android:isScrollContainer="true"
        app:tabMinWidth="100dp"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextColor="@android:color/black"
        >
    </android.support.design.widget.TabLayout>

</LinearLayout>

　　显示效果（这里是用平板模拟器做演示）：
这里写图片描述

TabLayout与ViewPager结合使用

　　TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果，因此用来做导航页，是十分方便的，使用时需要注意的一个地方如下：


        mTabLayout.addTab(mTabLayout.newTab().setText(R.string.DTV));
        mTabLayout.addTab(mTabLayout.newTab().setText(R.string.broadband_pay));
        mVPBody = (ViewPager)findViewById(R.id.vp_search_body);

        dvbSearchFragment = new DVBSearchFragment();
        brandSearchFragment = new BrandSearchFragment();
        listSearch = new ArrayList<>();
        listSearch.add(dvbSearchFragment);
        listSearch.add(brandSearchFragment);
        adapter = new SearchBodyAdapter(getSupportFragmentManager(),listSearch);
        mVPBody.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mVPBody);  //tablayout 与ViewPager关联
        //必须在后面重新为Tab设置value
        mTabLayout.getTabAt(0).setText(R.string.DTV);
        mTabLayout.getTabAt(1).setText(R.string.broadband_pay);

　　从上述代码中可以清楚的看到，我们在调用TabLayout的setupWithViewPager()方法后需要再次为已添加的Tab赋值，否则之前的tab的value就会消失。（直接拿一个小项目的配图看了）效果如下：
　　这里写图片描述
　　而正确的效果应该如下：
　　
- TabLayout中Tab字体大小修改
　　修改TabLayout中Tab字体大小需要通过定义Style的方式来完成，然后将值赋给TabLayout，代码如下：
　　首先定义style：

  <style name="tablayout_textstyle">
        <item name="android:textSize">@dimen/text_size_title</item>
    </style>

　　其次讲style赋给TabLayout，代码如下：

    <android.support.design.widget.TabLayout
        android:background="#EBEEF3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tablayout"
        android:isScrollContainer="true"
        <!--tab的最小宽度-->
        app:tabMinWidth="100dp"
       <!--indicator的颜色-->
        app:tabIndicatorColor="@android:color/holo_blue_dark"
        <!--选中时的字体颜色-->
        app:tabSelectedTextColor="@android:color/holo_blue_dark"
        <!--未选中时的字体颜色-->
        app:tabTextColor="@android:color/black"
        <!--字体风格-->
        app:tabTextAppearance="@style/tablayout_textstyle"
        >
    </android.support.design.widget.TabLayout>

TabLayout中Tab背景修改
修改背景的方法比较简单，直接使用如下代码，：

app:tabBackground="@drawable/tab_selector"

　　如果不需要变换颜色，可以直接使用一种颜色，但是通常我们会分为选中和未选中两种状态为不同的颜色，因此需要使用state-select文件来做，样例代码如下：
　　

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_select" android:state_selected="true" />
    <item android:drawable="@color/tab_normal" />
</selector>

　　需要注意的是，写select文件，要把normal-state放在最后。
　　以上就是我对TabLayout的一些基本认识以及在实际项目当中遇到的一些问题，分享与此，与君共勉！

　　三日不读书，便觉语言无味，面目可憎；
　　三天不动笔，必会思维迟钝，头脑发空；

TabLayout——浅谈

TabLayout——浅谈

猜你喜欢