TabLayout的TabItem自定义

本文主要是介绍TabLayout的TabItem自定义，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

这里写图片描述

1、主布局文件

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

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

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

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

2、TabItem布局

<?xml version="1.0" encoding="utf-8"?>
<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（）重新设置布局参数来解决问题。最终效果图如下所示：

这里写图片描述