效果图:
![{H)605MZ4]6TJJ3T8J6MXS.png
用的是tablayout + viewpager实现页面
1,tablayout 布局,主要是tabBackground这个属性为Tab选中时的背景padding属性则可以显示外层布局的边框
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="1.5dp"
app:tabBackground="@drawable/tab_background"
app:tabIndicatorColor="@color/black"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#fff"
app:tabTextColor="@color/black"
/>
2,外面包裹一层relativelayout,这样可以设置边框颜色线和设置圆角
<RelativeLayout
android:id="@+id/layout"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:background="@drawable/tab_background_ridus"/>
3,设置relativelayout背景drawable/tab_background_ridus
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充 -->
<solid android:color="#FFF" />
<!-- 圆角 -->
<corners android:radius="5dp" />
<stroke
android:width="1.5dp"
android:color="#0e88eb" />
</shape>
4,设置TabBackGround
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_background_unchecked"
android:state_selected="false" />
<item android:drawable="@drawable/tab_background_checked"
android:state_selected="true" />
</selector>
5,选中,选中不能设置圆角,因为本身会显示外层,因为padding
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<!-- 填充 -->
<solid android:color="#0e88eb" />
<!-- 圆角 去除 -->
<!--<corners android:radius="3dp" />-->
</shape>
6,未选中,Corner必须得设置圆角,否则Tab选中时出现空隙,
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充 -->
<solid android:color="#FFF" />
<!-- 圆角,未选中的必须得设置,否则显示不完全 -->
<corners
android:radius="5dp" />
</shape>
网友评论