美文网首页
安卓Tablayout 设置选中title时背景切换

安卓Tablayout 设置选中title时背景切换

作者: Rhett_yu | 来源:发表于2018-07-19 20:35 被阅读0次

    效果图:
    ![{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>
    

    相关文章

      网友评论

          本文标题:安卓Tablayout 设置选中title时背景切换

          本文链接:https://www.haomeiwen.com/subject/chhxmftx.html