聲明：

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

前言：

在項目開發中很多場景都會碰到tab欄切換的效果，實現的思路也有很多種，tabhost+fragment和
radionbtton+viewpager等方式都可以實現，其中關于“RadionButton+ViewPager”的實現方式可參考我的另一篇文章：ViewPager+Fragment實現底部導航欄（左右滑動/點擊切換）,今天這里主要介紹下tablayout+viewpager的實現方式；tablayout是android5.0推出來的一個MaterialDesign風格的控件，是專門用來實現tab欄效果的；功能強大，使用方便靈活；

1、引入依賴庫

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提供了很多的屬性可以設置：

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

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

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

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

有什么區別待會告訴你。

3、設置tablayout和viewpager，并將tablayout和viewpager進行關聯
在設置tablayout和viewpager，并將tablayout和viewpager進行關聯有兩中方式可以實現：
?

方式一：

3.1、TabLayout和Viewpager關聯

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

3.2、ViewPager滑動關聯tabLayout

//2.ViewPager滑動關聯tabLayout,如果不設置的話，當tab超出屏幕寬度時候，從右向左滑動，tab不會自動向左滾動viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));

3.3、設置tabLayout的標簽來自于PagerAdapter

//設置tabLayout的標簽來自于PagerAdaptertablayout.setTabsFromPagerAdapter(tabAdapter);

3.4、ViewPager設置適配器

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

?

方式二：

3.1、viewpager設置適配器

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

3.2、tablayout和viewpager相互關聯，并設置tablayout文字

//必須在viewpager設置適配器后調用tablayout.setupWithViewPager(viewpager);

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

在上面說到了tablayout的tabMode和tabGravity兩個屬性，將這個兩個屬性對應的值做下修改就可以實現一些其他的效果，這里將tablayout對應的值修改為fixed(不可滑動)，tabGravity的值修改為center(tab居中顯示),將tab欄的數量改為兩個；效果如下：

注意：如果tab的個數很多，而此時設置tabMode=“fixed”的話，所有tab會平分tabLayout的寬度,
?
如下圖：

上面這些效果都是用tablayout實現的頂部tab欄切換，tablayout照樣可以實現底部tab欄切換的效果；
?
修改xml布局文件，將tablayout和viewpager的位置互換，并設置viewpager的weight，同時將tablayout的tabIndicatorHeight屬性值設為0dp，將指示器隱藏掉，tabMode屬性值設置為fixed，tabGravity的屬性值設置為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欄文字上面添加圖片實現類似微信那樣的效果也是可以的，在tablayout和viewpager關聯后，獲取tablayout的tab數量，并對數量進行遍歷獲取到每個tab，給每個tab設置相應的view就可以了；
代碼如下：

//獲取當前tab數量int tabCount = tablayout.getTabCount();//遍歷循環tab數量for(int i=0;i<tabCount;i++){//獲取每個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設置viewtab.setCustomView(view);}

?
效果如圖：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。