java tabitem,Android 基础[花式实现底部导航栏之TabLayout]

前文中我们已经简单介绍了BottomNavigationView实现选项卡页面的细节，接下来我们继续花式实现底部导航栏之旅，本片中主要是使用TabLayout实现，TabLayout也是Support Design库中提供的控件。

TabLayout继承自HorizontalScrollView，可以用于展示多个选项卡，其灵活度较之BottomNavigationView更高，TabLayout的继承关系如下图：

接下来我们将学习如何使用TabLayout实现一个选项卡页面。

创建TabLayout

使用TabLayout首先需要引入Support Design库，在此不再详细赘述，TabLayout与BottomNavigationView一样，继承自View，使其即可在XML中创建，也可以使用Java代码创建，在XML中声明TabLayout的代码如下：

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

app:tabTextAppearance="@style/MyCustomTextAppearance"

app:tabIndicatorHeight="0dp"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorPrimary"

app:tabGravity="fill">

上述代码中已经声明了TabLayout的常见属性，解释如下：

app:tabIndicatorHeight:指定选项卡选中时的指示器高度，通常与app:tabIndicatorColor一起使用以设置选项卡选中样式，当需要自定义选中效果时，可将高度设置为0；

app:tabTextAppearance:指明选项卡中的文字样式，TabLayout默认选项卡中的所有英文均启用大写模式，如需关闭，需要在自定义的Style中添加false；

app:tabSelectedTextColor:设置选项卡选中时的字体颜色，与之对应的是app:tabTextColor;

app:tabGravity:指定选项卡的对其方式，有fill和center两个备选值，其中fill使得所有选项卡等分排布，填充整个父控件的宽度，center使得选项卡按照固定大小排列，超出最大宽度后可滚动(个数不够填满最大宽度时会居中显示，平板上见过)；

app:tabMode:选项卡的工作模式，有fixed和scrollable两个备选值，其中scrollable通常与ViewPager配合使用；

创建TabItem

我们可以通过两种方式创建TabItem，一种是使用TabLayout的API创建，另一种是在XML中使用TabItem创建.

XML

在XML中创建代码如下：

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Tab 1"

android:icon="@mipmap/ic_launcher" />

甚至说我们可以在这里使用自定义布局，代码如下：

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout="@layout/tab_item"

android:text="Tab 1"

android:icon="@drawable/ic_launcher" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

需要注意的是这里的TextView和ImageView 的id必须使用系统的id，如上所示，系统的TabItem使用CustomView时调用的id为icon和text1，TabItem中的代码如下：

//TabLayout.java#1664 lines

if (custom != null) {

......

mCustomTextView = (TextView) custom.findViewById(android.R.id.text1);

if (mCustomTextView != null) {

mDefaultMaxLines = TextViewCompat.getMaxLines(mCustomTextView);

}

mCustomIconView = (ImageView) custom.findViewById(android.R.id.icon);

}

Java

使用Java代码，我们只需要使用TabLayout.newTab()创建一个Tab对象，然后使用TabLayout.addTab(Tab tab)添加即可。代码如下：

mTabLayout.addTab(mTabLayout.newTab().setText("first Tab").setIcon());

记得根据需求设置Tab的常见属性，例如说文本和图片等

示例

下面我们根据前面描述编写一个简单的Tab页面，实现后效果如下：

其中第一个选项卡来源于XML，剩余四个选项卡来源于Java代码。

首先添加TabLayout到布局文件中，并设置TabLayout在最底部，代码如下：

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

app:tabTextAppearance="@style/MyCustomTextAppearance"

app:tabIndicatorHeight="0dp"

app:tabMode="scrollable"

app:tabSelectedTextColor="@color/colorPrimary"

app:tabGravity="center"

>

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Tab 1"

android:icon="@mipmap/ic_launcher" />

在上述代码中我已经使用XML初始化了一个基本的TabItem。随后在对应的Activity找到该TabLayout，动态添加Tab，代码如下：

mTabLayout = findViewById(R.id.tabs);

//添加Tab

mTabLayout.addTab(mTabLayout.newTab().setText("first Tab").setIcon(R.drawable.bottom_bar_screen_record_state_list));

mTabLayout.addTab(mTabLayout.newTab().setText("second Tab").setIcon(R.drawable.bottom_bar_video_manager_state_list));

mTabLayout.addTab(mTabLayout.newTab().setText("third Tab").setIcon(R.drawable.bottom_bar_discover_state_list));

mTabLayout.addTab(mTabLayout.newTab().setText("four Tab").setIcon(R.drawable.bottom_bar_match_state_list));

运行后即可得到开始的效果图，这里如果我们修改app:tabMode="scrollable",就会得到滚动效果，如下所示:

完整代码参见：

https://github.com/tuozhaobing/CsdnDemoCode/tree/master/TabLayoutDemo