1 前言
以前沒有寫博客的習慣，需要什么東西都是直接搜索，然后再來看怎么使用，有什么需要注意的，時間久了也就忘了是怎么回事了，又得重復這個過程。比如這個今天要介紹的TabLyout，很久之前用過，最近又需要用到，但是已經忘了怎么使用了，這也是為什么最近開始在簡書上開始記錄的原因。廢話不多說...
其實Android在5.1（22.2.0）的時候給我們提供了一個水平布局來顯示標簽TabLayout，實際應用中也有很多需要橫向標簽的應用場景。直接先來看個效果圖（偷的網易的）：
2 TabLayout簡單使用
今天這篇文章是奔著TabLayout的屬性來的，就用最簡單的使用方式來介紹它的屬性。我們在xml文件中直接使用TabLayout：
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab3"/>
</android.support.design.widget.TabLayout>
看上去還是有那么點標簽的意思...接下來就正式介紹它的屬性了。
3 屬性介紹
- 背景顏色
app:tabBackground="@android:color/white"
- 選中tab字體顏色
app:tabSelectedTextColor="@android:color/holo_red_light"
- 未選中tab字體顏色
app:tabTextColor="@android:color/holo_blue_dark"
- 指示器顏色
app:tabIndicatorColor="@android:color/holo_green_dark"
設置完演的后的TabLayout:
- 指示器高度
app:tabIndicatorHeight="5dp"
- tabY軸偏移量（沒看出效果）
app:tabContentStart="100dp"
- tab顯示方式
app:tabGravity="center" //center：居中 fill：充滿
- tab最大最小寬度
app:tabMaxWidth="100dp"
app:tabMinWidth="100dp"
- tab布局模式
app:tabMode="scrollable" //可取fixed 固定,scrollable 滾動，默認fixed：標簽很多時候會被擠壓，不能滑動。
- Tab里內容的內邊距
app:tabPadding="10dp"
app:tabPaddingStart="10dp"
app:tabPaddingEnd="10dp"
app:tabPaddingTop="10dp"
app:tabPaddingBottom="10dp"
- tab文字大小設置
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large"
以上就是TabLayout的基本屬性，接下來我們用這些基本屬性實現一個類似文章開頭的效果:
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@android:color/white"
app:tabIndicatorColor="@android:color/holo_red_light"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabTextColor="@android:color/darker_gray">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab3"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab4"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab5"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab6"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab7"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab8"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab9"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab10"/>
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
TabLayout屬性就介紹到這里，接下來的文章會具體介紹它的使用。
附：
