TabLayout和ViewPager搭配使用的Tab背景设置
Google官方在14年Google I/O上推出了全新的设计语言——Material Design。一并推出了一系列实现Material Design效果的控件库——Android Design Support Library。其中,有TabLayout, NavigationView,Floating labels for editing text,Floating Action Button,Snackbar, CoordinatorLayout, CollapsingToolbarLayout等等控件。
如今TabLayout加ViewPager在大家项目开发中都已经司空见惯,如下图所示:
1.改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
3.改变指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.设置指示器下标的高度:
app:tabIndicatorHeight="4dp"
5.设置图标:
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
等等。。。。。。
上图的实现过程相信大家应该都很6了,不多说。在这儿我要讲的是如何把TabLayout中的Tab标签设置背景颜色:
如图所示:
这里可以考虑自定义TabLayout,这个网上已经有很多了,在此我就不多赘述,而我偷个懒,是采用选择器selector和shape的搭配实现的这个效果,直接贴代码,一目明了:
shape:
1.未点击的tab效果图
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<corners
android:radius="2dp" />
<solid
android:color="#F0EFF4"/>
<stroke
android:width="0.5dp"
android:color="#C5C0D3"/>
</shape>
2.已点击的tab效果图
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<corners
android:radius="2dp" />
<solid
android:color="@color/orange"/>
<stroke
android:width="0.5dp"
android:color="#C5C0D3"/>
</shape>
接下来就是选择器了
selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_shape_oval_press" android:state_selected="true" />
<item android:drawable="@drawable/tab_shape_oval" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
</selector>