Usually we have such a requirement that we need to switch multiple tabs and change the background color of the indicator, which can be realized by using the TabLayout provided by the system.
1. First, we define a tablayout file in xml
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="500dp"
android:layout_height="50dp"
android:background="@drawable/tab_bg"
android:elevation="3dp"
app:tabGravity="fill"
app:tabIndicator="@drawable/tab_sel"
app:tabIndicatorColor="@android:color/blue"
app:tabIndicatorGravity="center"
app:tabRippleColor="@android:color/transparent"
app:tabTextAppearance="@style/tabLayoutTextStyle"
app:tabTextColor="@android:color/white">
</android.support.design.widget.TabLayout>app:tabIndicator The background image of the tab indicator
app:tabIndicatorColor The color of the tab indicator
app:tabIndicatorGravity indicator centered
app:tabRippleColor="@android:color/transparent" Cancel indicator click ripple effect
app:tabTextColor="@android:color/white" The text color of the tab
app:tabTextAppearance="@style/tabLayoutTextStyle" This is to set the text size of the tab, only through this method, as follows:
<style name="tabLayoutTextStyle">
<item name="android:textSize">28sp</item>
</style>2. Initialize in onCreate()
tabLayout.addTab(tabLayout.newTab().setText("成都"));
//设置true为默认选中，不然第一次点击tablayout不会回调监听方法
tabLayout.addTab(tabLayout.newTab().setText("重庆"), true);
tabLayout.addTab(tabLayout.newTab().setText("上海"));
//默认选中的tab
tabLayout.setScrollPosition(1, 0, false);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
switch (position) {
case 0:
//修改指示器的颜色
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.007a67));
//修改指示器背景图片
tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_1);
case 1:
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.065eab));
tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_2);
break;
case 2:
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.6f5a0f));
tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_3);
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});This basically meets our needs. But some friends may have noticed that through the tabLayout.setSelectedTabIndicator(Drawable drawable); method, we can only set the label of the tab to the same shape as the picture, and the color is not the same as our picture. We can only set the tab through setSelectedTabIndicatorColor background color. And TabLayout can only modify the text color of all tabs. If we need to change the text color of a single tab, or use a picture for the background of the indicator, and the tab cannot be selected in some states, then we can only It is implemented using a custom view, and I will open another article to explain it to you in the future.