聲明：

此文章主要來(lái)自：TabLayout+ViewPager輕松搞定Tab欄切換 ，原作者寫(xiě)的很詳細(xì)。但是為了加深印象，以及對(duì)其中的部分現(xiàn)象進(jìn)行更好的演示，特此重新寫(xiě)一遍。

前言：

在項(xiàng)目開(kāi)發(fā)中很多場(chǎng)景都會(huì)碰到tab欄切換的效果，實(shí)現(xiàn)的思路也有很多種，tabhost+fragment和
radionbtton+viewpager等方式都可以實(shí)現(xiàn)，其中關(guān)于“RadionButton+ViewPager”的實(shí)現(xiàn)方式可參考我的另一篇文章：ViewPager+Fragment實(shí)現(xiàn)底部導(dǎo)航欄（左右滑動(dòng)/點(diǎn)擊切換）,今天這里主要介紹下tablayout+viewpager的實(shí)現(xiàn)方式；tablayout是android5.0推出來(lái)的一個(gè)MaterialDesign風(fēng)格的控件，是專門(mén)用來(lái)實(shí)現(xiàn)tab欄效果的；功能強(qiáng)大，使用方便靈活；

1、引入依賴庫(kù)

compile 'com.android.support:design:25.3.1' compile 'com.android.support:support-v4:25.3.1'

2、xml布局文件中使用

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.mdtablayout.MainActivity"><!-- tabIndicatorColor：指示器顏色--><!-- tabTextColor： tab欄字體顏色--><!-- tabSelectedTextColor：tab欄字體被選顏色--><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/colorAccent"app:tabTextColor="@android:color/black"app:tabSelectedTextColor="@color/colorAccent"app:tabMode="scrollable"app:tabGravity="fill"app:tabBackground="@android:color/holo_orange_dark"/><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"/> </LinearLayout>

tablayout提供了很多的屬性可以設(shè)置：

app:tabIndicatorColor 指示器顏色 app:tabTextColor tab欄字體顏色 app:tabSelectedTextColor tab欄字體被選顏色 app:tabIndicatorHeight 指示器高度 app:tabBackground tab背景顏色 app:tabMaxWidth tab欄最大寬度 app:tabTextAppearance tab欄字體樣式 app:tabMinWidth tab欄最小 ......

大家在使用的過(guò)程中，可以嘗試更改下相關(guān)屬性，看看效果。

還是那句話：凡是能夠在xml中設(shè)置的屬性，都可以在java代碼進(jìn)行設(shè)置；
需要注意這兩個(gè)屬性：

app:tabMode="";有scrollable和fixed兩個(gè)屬性值 scrollable:可滑動(dòng); fixed:不能滑動(dòng)，平分tabLayout寬度;app:tabGravity="";有center和fill兩個(gè)屬性值 fill:tabs平均填充整個(gè)寬度; center:tab居中顯示;

有什么區(qū)別待會(huì)告訴你。

3、設(shè)置tablayout和viewpager，并將tablayout和viewpager進(jìn)行關(guān)聯(lián)
在設(shè)置tablayout和viewpager，并將tablayout和viewpager進(jìn)行關(guān)聯(lián)有兩中方式可以實(shí)現(xiàn)：
?

方式一：

3.1、TabLayout和Viewpager關(guān)聯(lián)

TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager());//1.TabLayout和Viewpager關(guān)聯(lián)tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {Log.i(TAG, "onTabSelected: 000");//tab被選中的時(shí)候回調(diào)viewpager.setCurrentItem(tab.getPosition(), true);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {//tab未被選擇的時(shí)候回調(diào)Log.i(TAG, "onTabUnselected: 111");}@Overridepublic void onTabReselected(TabLayout.Tab tab) {//tab重新選擇的時(shí)候回調(diào)Log.i(TAG, "onTabReselected: 222");}});

3.2、ViewPager滑動(dòng)關(guān)聯(lián)tabLayout

//2.ViewPager滑動(dòng)關(guān)聯(lián)tabLayout,如果不設(shè)置的話，當(dāng)tab超出屏幕寬度時(shí)候，從右向左滑動(dòng)，tab不會(huì)自動(dòng)向左滾動(dòng)viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));

3.3、設(shè)置tabLayout的標(biāo)簽來(lái)自于PagerAdapter

//設(shè)置tabLayout的標(biāo)簽來(lái)自于PagerAdaptertablayout.setTabsFromPagerAdapter(tabAdapter);

3.4、ViewPager設(shè)置適配器

//viewpager設(shè)置適配器viewpager.setAdapter(tabAdapter);

?

方式二：

3.1、viewpager設(shè)置適配器

//viewpager設(shè)置適配器viewpager.setAdapter(tabAdapter);

3.2、tablayout和viewpager相互關(guān)聯(lián)，并設(shè)置tablayout文字

//必須在viewpager設(shè)置適配器后調(diào)用tablayout.setupWithViewPager(viewpager);

使用第二種方式需要注意的是 setupWithViewPager();方法的調(diào)用必須在viewpager設(shè)置完適配器后調(diào)用，如果在設(shè)置適配器之前調(diào)用會(huì)拋異常； 這樣tab欄切換效果就實(shí)現(xiàn)了：

在上面說(shuō)到了tablayout的tabMode和tabGravity兩個(gè)屬性，將這個(gè)兩個(gè)屬性對(duì)應(yīng)的值做下修改就可以實(shí)現(xiàn)一些其他的效果，這里將tablayout對(duì)應(yīng)的值修改為fixed(不可滑動(dòng))，tabGravity的值修改為center(tab居中顯示),將tab欄的數(shù)量改為兩個(gè)；效果如下：

注意：如果tab的個(gè)數(shù)很多，而此時(shí)設(shè)置tabMode=“fixed”的話，所有tab會(huì)平分tabLayout的寬度,
?
如下圖：

上面這些效果都是用tablayout實(shí)現(xiàn)的頂部tab欄切換，tablayout照樣可以實(shí)現(xiàn)底部tab欄切換的效果；
?
修改xml布局文件，將tablayout和viewpager的位置互換，并設(shè)置viewpager的weight，同時(shí)將tablayout的tabIndicatorHeight屬性值設(shè)為0dp，將指示器隱藏掉，tabMode屬性值設(shè)置為fixed，tabGravity的屬性值設(shè)置為fill；

<?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"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.mdtablayout.MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/holo_orange_light"app:tabGravity="fill"app:tabIndicatorColor="@color/colorAccent"app:tabIndicatorHeight="0dp"app:tabMode="fixed"app:tabSelectedTextColor="@color/colorAccent"app:tabTextColor="@android:color/black" /> </LinearLayout>

?
如果想在底部tab欄文字上面添加圖片實(shí)現(xiàn)類似微信那樣的效果也是可以的，在tablayout和viewpager關(guān)聯(lián)后，獲取tablayout的tab數(shù)量，并對(duì)數(shù)量進(jìn)行遍歷獲取到每個(gè)tab，給每個(gè)tab設(shè)置相應(yīng)的view就可以了；
代碼如下：

//獲取當(dāng)前tab數(shù)量int tabCount = tablayout.getTabCount();//遍歷循環(huán)tab數(shù)量for(int i=0;i<tabCount;i++){//獲取每個(gè)tabTabLayout.Tab tab = tablayout.getTabAt(i);View view = View.inflate(this, R.layout.tab_view, null);ImageView iv = (ImageView) view.findViewById(R.id.iv);TextView tv = (TextView) view.findViewById(R.id.tv);tv.setText(tabList.get(i));iv.setImageResource(R.mipmap.message_icon);//給tab設(shè)置viewtab.setCustomView(view);}

?
效果如圖：

?
另附上示例鏈接：
https://download.csdn.net/download/zhangqunshuai/10588658
?
孰能生巧，以此自勉！

總結(jié)

以上是生活随笔為你收集整理的TabLayout+ViewPager实现tab切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。