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' } 1234 1234

　　Java调用代码如下：

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

　　  　　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> 12345678910111213141516171819 12345678910111213141516171819

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

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); 12345678910111213141516 12345678910111213141516

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

　　其次讲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> 123456789101112131415161718 123456789101112131415161718 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> 1234 1234

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

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

相关资源：微信小程序源码-合集1.rar