TabLayout的TabItem自定义

最近项目中需要实现如下图示效果，思来想去还是觉得用TabLayout来的比较快，但是普通的TabLayout又不是这样的效果，所以这里就对TabItem进行自定义。

项目中使用了DataBinding，所以对DataBinding还不熟悉的同学可以简单去学习下再来看这篇文档。

1、主布局文件

这里简单的写下主布局文件中TabLayout的代码：

.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tab_layout_height"
    app:elevation="0dp"
    app:tabIndicatorHeight="0dp">

.support.design.widget.TabLayout>

代码很简单就是一个TabLayout，其中有两点需要说明下：

• app:elevation=”0dp” 取消阴影效果，在AppBarLayout和TabLayout中设置。
• layout_height高度设置了一个数值，数值高度要大于自定义的Item的高度，主要是为了保证Item选中时下方的横线不会被遮挡，从而导致整个TabLayout底部出现大片阴影（虽然设置了上面的elevation=“0dp”）。
• app:tabIndicatorHeight=”0dp” 取消滑动指示器的显示效果，因为自己定义了圆角的指示器。

2、TabItem布局

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="itemWeek"
            type="String" />

        <variable
            name="itemDate"
            type="String" />
    data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_week"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{itemWeek}"
            android:textColor="@drawable/selector_tab_week"
            android:textSize="12sp"
            tools:text="@string/tab_week" />

        <TextView
            android:id="@+id/text_day"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{itemDate}"
            android:textColor="@drawable/selector_tab_day"
            android:textSize="28sp"
            tools:text="@string/tab_day" />

        <View
            android:layout_width="wrap_content"
            android:layout_height="4dp"
            android:background="@drawable/selector_tab_indicator" />
    LinearLayout>
layout>

这里可以看到DataBinding在布局中使用的方法了，根布局变为了layout标签开始的，同时加入了data标签。TextView的textColor 和 View的background都是有选中和非选中状态的，自己可以在drawable中定义效果。

3、使用自定义布局

for (int i = 0; i < 7; i++) {
    int dayOfWeek = DataUtil.getDayOfWeek() - 1;
    int datesOfWeek[] = DataUtil.getDatesOfWeek();
    ItemTabBinding itemTabBinding = ItemTabBinding.inflate(LayoutInflater.from(this), binding.tabLayout, false);
    itemTabBinding.setItemWeek(DataUtil.week[i]);
    itemTabBinding.setItemDate(String.valueOf(datesOfWeek[i]));

    //暂不清楚为什么布局宽度会出现问题，这里需要重新设置下布局参数（100只是随便写的一个值，后需修改）
     itemTabBinding.getRoot().setLayoutParams(new LinearLayout.LayoutParams(
                    100,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            ));

      TabLayout.Tab tab = binding.tabLayout.newTab().setCustomView(itemTabBinding.getRoot());
      binding.tabLayout.addTab(tab);
      if (dayOfWeek == i) {
            tab.select();
      }
}
binding.tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

binding.tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 这句话设置了TabLayout是根据TabItem的个数和内容可进行滑动的。

本来在不使用DataBinding时候直接添加布局是不会出现问题的，但是使用了DataBinding来使用newTab().setCustomView（）的时候就会出现TabItem布局宽度过宽的情况，所以可以看到上面的代码中给TabItem使用setLayoutParams（）重新设置布局参数来解决问题。最终效果图如下所示：

谢谢观看

该项目Sunshine已放在GitHub，这是其中一篇开发记录，更多开发记录文章请点击该项目查看。