开发过程中经常会遇到Tab左右或中间的圆角不一样,如下图所示:
根据上图发现两个Tab圆角不同,且不对称,无法通过设置tabBackground属性来实现不同的圆角,解决方案是采用自定义TabView的方法。具体实现方案如下:
TabLayout属性设置:
<android.support.design.widget.TabLayout
android:id="@+id/tb_layout"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:padding="0dp"
app:tabIndicatorHeight="0dp"
app:tabPaddingBottom="0dp"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingTop="0dp"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/text_14_33_df"/>
tabPadding和padding全部设置为0,由自定义TabView来设置相应的padding,tabIndicatorHeight设置为0,tabSelectedTextColor设置选中Tab文字颜色,tabTextAppearance设置Tab未选中文字颜色。
左边Tab选中背景bg_tab_left_select.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="@color/tv_color_blue"/>
<corners
android:topLeftRadius="5dp"/>
</shape>
左边Tab未选中背景bg_tab_left_unselect.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="@color/white"/>
<corners
android:topLeftRadius="5dp"/>
</shape>
右边Tab选中背景bg_tab_right_select.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="@color/tv_color_blue"/>
<corners
android:topRightRadius="5dp"/>
</shape>
右边Tab未选中背景bg_tab_right_unselect.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="@color/white"/>
<corners
android:topRightRadius="5dp"/>
</shape>
左边Tab背景选择器tab_left_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_tab_left_unselect" android:state_selected="false"/>
<item android:drawable="@drawable/bg_tab_left_select" android:state_selected="true"/>
</selector>
右边Tab背景选择器tab_right_selector.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_tab_right_unselect" android:state_selected="false"/>
<item android:drawable="@drawable/bg_tab_right_select" android:state_selected="true"/>
</selector>
左边TabView自定义布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/tab_left_selector"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tab_text_left"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:gravity="center"
android:textSize="@dimen/text_size_14"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:textColor="@color/tv_color_33"/>
</LinearLayout>
右边TabView自定义布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/tab_right_selector"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tab_text_right"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:gravity="center"
android:textSize="@dimen/text_size_14"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:textColor="@color/tv_color_33"/>
</LinearLayout>
注意:
自定义View的高度要保持与TabLayout高度一致,负责背景填充有问题。
最后代码实现:
viewPager.setOffscreenPageLimit(fragments.size());
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setupWithViewPager(viewPager);
if (tabLayout != null) {
TabLayout.Tab tab1 = tabLayout.getTabAt(0);
if (tab1 != null) {
tab1.setCustomView(getTabView0(getActivity()));
}
TabLayout.Tab tab2 = tabLayout.getTabAt(1);
if (tab2 != null) {
tab2.setCustomView(getTabView1(getActivity()));
}
}
public View getTabView0(Context context) {
LayoutInflater mInflater = LayoutInflater.from(context);
View view = mInflater.inflate(R.layout.item_tab_left, null);
TextView tv = (TextView) view.findViewById(R.id.tab_text_left);
tv.setText(titles[0]);
return view;
}
public View getTabView1(Context context) {
LayoutInflater mInflater = LayoutInflater.from(context);
View view = mInflater.inflate(R.layout.item_tab_right, null);
TextView tv = (TextView) view.findViewById(R.id.tab_text_right);
tv.setText(titles[1]);
return view;
}
网友评论