通常我们有这样一个需求,需要实现多个标签的切换,实现指示器背景色的改变,可以使用系统提供的TabLayout来实现。
一、首先我们在xml定义一个tablayout文件
<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 tab指示器的背景图片
app:tabIndicatorColor tab指示器的颜色
app:tabIndicatorGravity 指示器居中
app:tabRippleColor="@android:color/transparent" 取消指示器点击波纹效果
app:tabTextColor="@android:color/white" tab的文字颜色
app:tabTextAppearance="@style/tabLayoutTextStyle" 这个是设置tab的文字大小,只能通过此方法,如下:
<style name="tabLayoutTextStyle">
<item name="android:textSize">28sp</item>
</style>
二、在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) {
}
});
这样基本能满足我们的需求了。但是可能有小伙伴注意到了,通过tabLayout.setSelectedTabIndicator(Drawable drawable);方法,我们只能把tab的标签设置成跟图片一样的形状,颜色并不是跟我们的图片一样,只能通过setSelectedTabIndicatorColor设置tab的背景颜色。而且TabLayout只能修改所有tab的文字颜色,如果我们需要改变单独某个tab的文字颜色,或者将指示器的背景使用图片,并在某些状态下tab还不能被选中呢,这样我们就只能使用自定义view来实现了,以后我会再开一篇文章给大家讲解。