美文网首页
Android自定义Switch样式

Android自定义Switch样式

作者: 可以再长高10cm | 来源:发表于2020-12-03 16:33 被阅读0次

    如图自定义的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自定义样式

    相关文章

      网友评论

          本文标题:Android自定义Switch样式

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