美文网首页
Switch控件的样式修改

Switch控件的样式修改

作者: V_boomboom | 来源:发表于2018-01-21 16:44 被阅读786次

    Switch控件的样式修改

    可以为Switch的track,thumb属性添加选中和非选中状态的drawable

    1、创建Deawablw:

    thumb的deawable,(thumb表示switch中圆形按钮的背景)

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false">
            <shape>
                <corners android:radius="24dp" />
                <solid android:color="@android:color/white" />
    
                <!--设置大小时,应注意Switch显示时UI内容的高度会以此高度为依据-->
                <size android:width="24dp" android:height="24dp" />
    
                <!--添加一个边,使UI更好看,
                当false时为未选择状态的底图颜色,true时为选择状态的底图颜色。-->
                <stroke android:width="1dp" android:color="@android:color/darker_gray" />
            </shape>
        </item>
    
        <item android:state_checked="true">
            <shape>
                <corners android:radius="24dp" />
                <solid android:color="@android:color/white" />
                <size android:width="24dp" android:height="24dp" />
                <stroke android:width="1dp" android:color="@android:color/holo_green_light" />
            </shape>
        </item>
    </selector>
    

    track的drawable:(track描述的是我们看就的switch控件按钮滑动区域背景)

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <shape>
    
                <!--这个圆角大小最好与thumb中的圆角大小保持一致-->
                <corners android:radius="24dp"/>
                <solid android:color="@android:color/holo_green_light"/>
            </shape>
        </item>
    
        <item android:state_checked="false">
            <shape>
                <corners android:radius="24dp"/>
                <solid android:color="@android:color/darker_gray"/>
            </shape>
        </item>
    </selector>
    

    2、在布局中应用

    <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:thumb="@drawable/selector_switch_thumb"
            android:track="@drawable/selector_switch_track" />
    
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:checked="false"
        android:thumb="@drawable/selector_switch_thumb"
        android:track="@drawable/selector_switch_track" />
    

    其他样式

    如果需要矩形的,可以去掉track和thumb的圆角,或者设置为一下较小的圆角

    相关文章

      网友评论

          本文标题:Switch控件的样式修改

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