Android進階——Material Design新控制項之初識TabLayout（一）

標籤：

引言

Google I/O 2015 推出的 Android Design Support Library令人非常激動。Material Design的推出確實振奮了不少 Android開發人員以及使用者的心。以前Google給我的感覺就像是他並沒太在乎他們的UI（或者審美不同，Gmail不忍吐槽），但是當Material Design伴隨Android5.0發布之後，一切好像就都變了個樣，Google好像意識到了設計的重要性以及自己以往的種種不足，決定也要迎頭趕上，不僅僅只是推出一套Material Design的語言同時也推出了很多新的控制項，接下來我們就來學習下 AndroidDesign Support Library庫下的所有新的控制項，首先從android.support.design.widget.TabLayout開始。

一、TabLayout概述

TabLayout，滑動指示選項卡，繼承自HorizontalScrollView（註：與TableLayout毫無關係），提供了一個水平的可滾動布局來展示Tabs。所以有了它我們就不必在去自己定義實作類別似ActionBar的Tab欄了（TabLayout provides a horizontal layout to display tabs）與以前早期TabHost不同TabLayout相容性更強、使用更簡單並且效果更好，還內建小滑塊的動畫效果。如果熟悉Github裡的TabPageIndicator，他們的原理大同小異。在開發中結合ViewPager和Fragment使用，我們就可以快速搭建一個Tabs切換的主介面，類似、知乎、網易新聞、新浪等等。

二、TabLayout的常用屬性和方法

TabLayout除了Android控制項常有的屬性（以android:為命名空間）之外，還定義了些專屬的屬性（是以”app:”的命名空間的,形如app:tabMode），這裡只列出部分屬性和部分方法（getter、setter和屬性是一一對應的）。

屬性	說明
app:tabMode	tab配置模式，取值常量，fixed,scrollable，預設fixed：標籤很多時候會被擠壓，不能滑動。
app:tabSelectedTextColor	選中時字型的顏色
app:tabTextColor	未選中時字型的顏色
app:tabIndicatorColor	sliding的顏色
app:tabBackground	整個Tab布局的背景
app:tabTextAppearance	Tab上的標題文字大小
app:tabIndicatorHeight	Sliding的高度
app:tabPadding	Tab裡內容的內邊距
app:paddingEnd	整個TabLayout的內邊距
app:tabGravity	Tab裡內容的布局，center，fill
app:tabMaxWidth	Tab的最大寬度
app:tabContentStart	TabLayout的外邊距
方法	說明
TabLayout(Context context)	構造方法，我們可以通過構造方法來擷取TabLayout對象
TabLayout(Context context, AttributeSet attrs)
TabLayout(Context context, AttributeSet attrs,int defStyleAttr)
Tab newTab()	構造一個Tab對象即TabLayout裡盛放的二級容器
int getTabCount()	擷取Tab的數量
Tab getTabAt(int index)	根據Tab的索引值擷取對應的Tab，當我們初始化時系統會自動為我們的Tab添加index值，從0開始依次增加1
int getSelectedTabPosition()	擷取當前選中的Tab的index，為空白則返回-1
void addTab(@NonNull Tab tab)	添加Tab至TabLayout（也可以添加至指定index處，, addTab(@NonNull Tab tab,int position）
void removeTab(Tab tab)	移除指定Tab（也可通過removeTabAt(int position)）
void removeAllTabs()	移除所有Tabs
void setupWithViewPager(@NonNull ViewPager viewPager)	設定與ViewPager關聯起來，註：不允許傳遞空的ViewPager，否則會異常
void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter)	設定TabLayout的適配器，註：不允許傳遞空的PagerAdapter，否則會異常
OnTabSelectedListener	Tab事件回調介面，包含onTabSelected，onTabUnselected，onTabReselected回調方法
void setOnTabSelectedListener(OnTabSelectedListener onTabSelectedListener)	設定Tab選中時的監聽、未由選中變成未選中到釋放的監聽

三、TabLayout的使用步驟1、構造TabLayout對象

構造TabLayout對象和其他控制項一樣，欲使用先得到對象，也是有兩種方式：代碼和xml布局。

• xml方式靜態構造

<!--注意一下tabMode這些屬性的首碼app:,為什麼呢？因為xmlns:app="http://schemas.android.com/apk/res-auto"--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/id_tabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="scrollable"        app:tabGravity="center"        /></LinearLayout>

• Java代碼動態構造
  首先是通過其建構函式得到TabLayout對象

TabLayout tabLayout=new TabLayout(MainActivity.this);

然後設定其一系列屬性

 tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setBackgroundColor(Color.parseColor("#2b2b2b")); tabLayout.setSelectedTabIndicatorHeight(4); tabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));

記住，TabLayout其本質上一個ViewGroup，只是一個容器用於存放其他View的，這裡我們存放的View是Tab，所以我們得把Tab添加到TabLayout裡

tabLayout.addTab(tabLayout.newTab().setText("Tab1").setIcon(android.R.drawable.ic_menu_search));        tabLayout.addTab(tabLayout.newTab().setText("Tab2").setIcon(android.R.drawable.ic_menu_agenda));        tabLayout.addTab(tabLayout.newTab().setText("Tab3").setIcon(android.R.drawable.ic_menu_camera));

最後，雖然我們已經把Tab添加到TabLayout了，但是歸根結底TabLayout也是一個ViewGroup，所以還需要設定到當前的布局裡才能顯示。

 mFrameLayout.addView(tabLayout);

至此，相信大家應該學會使用這個全新的空間裡了吧，下一篇再結合ViewPager+Fragment的主流架構講解下應用的注意事項和常見錯誤的解決。

Android進階——Material Design新控制項之初識TabLayout（一）