Android自定义Switch样式

如图自定义的Switch样式:


5421606984766_.pic.jpg

需要注意的是:switch的大小是跟thumb的大小有关
下面以样式二为例:

switch_track_selector_new.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_track_bg_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_track_bg_normal" android:state_checked="false"/>
</selector>

switch_track_bg_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/switch_track_selected"/>
    <size  android:width="@dimen/switch_track_width"
        android:height="@dimen/switch_track_height"/>
    <corners android:radius="20dp"/>

</shape>

switch_track_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/switch_track_normal"/>
    <size  android:width="@dimen/switch_track_width"
        android:height="@dimen/switch_track_height"/>
    <corners android:radius="20dp"/>

</shape>
switch_thumb_selector_new.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/switch_thumb_bg_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_thumb_bg_normal" android:state_checked="false"/>

</selector>

switch_thumb_bg_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:width="@dimen/switch_thumb_stroke_width" android:color="@color/switch_track_selected"/>
    <solid android:color="@color/switch_thumb_normal"/>
    <size  android:width="@dimen/switch_track_height"
        android:height="@dimen/switch_track_height"/>

</shape>

switch_thumb_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:width="@dimen/switch_thumb_stroke_width" android:color="@color/switch_track_normal"/>
    <solid android:color="@color/switch_thumb_normal"/>
    <size  android:width="@dimen/switch_track_height"
        android:height="@dimen/switch_track_height"/>

</shape>

switch引用:

<Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:thumb="@drawable/switch_thumb_selector_new"
            android:track="@drawable/switch_track_selector_new"/>

详细参考: Android Switch自定义样式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容