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属性就介绍到这里，接下来的文章会具体介绍它的使用。
附：
网友评论