Switch控件的样式修改

2018-01-21  本文已影响786人  V_boomboom

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的圆角,或者设置为一下较小的圆角

上一篇 下一篇

猜你喜欢

热点阅读