TabLayout——浅谈

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'}
1
2
3
4
1
2
3
4

　　Java调用代码如下：

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

　　 
　　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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

　　显示效果（这里是用平板模拟器做演示）： 

• 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

　　从上述代码中可以清楚的看到，我们在调用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>
1
2
3
1
2
3

　　其次讲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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

app:tabBackground="@drawable/tab_selector"
1
1

　　如果不需要变换颜色，可以直接使用一种颜色， 但是通常我们会分为选中和未选中两种状态为不同的颜色，因此需要使用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>
1
2
3
4
1
2
3
4

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

来源于http://blog.csdn.net/wenwen091100304/article/details/52424402?utm_source=tuicool&utm_medium=referral