Android仿微信开关按钮SwitchButton

╰+攻爆jí腚メ 2021-06-11 15:13 712阅读 0赞

使用系统自带的功能，只需要设置selector选择器就可实现下面的功能  
![在这里插入图片描述][201901091003521.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

> 这里说明一下：使用Android原生的switch选择器难免在某些布局上显得很丑。UI一般给图都会给出上诉的图

##### xml设置 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]

这里需要注意的地方：`Switch下的thumb与track，一个是滑块，一个是滑动背景。`

##### Selector #####

滑块：switch\_ios\_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="#FFF" />
        <stroke android:width="3dp" android:color="#00000000" />
        <size android:width="20dp" android:height="20dp" />
    </shape>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]

滑动背景：switch\_ios\_track\_selector

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]

##### Activity中调用 #####

swAutoPlay.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { 
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
                    SPUtils.getInstance().put(Constants.AUTO_PALY_IN_WIFI, isChecked);
                    if (isChecked) { 
                        Log.e(TAG, "onCheckedChanged: 开启" + isChecked);
                    } else { 
                        Log.e(TAG, "onCheckedChanged: 关闭" + isChecked);
                    }
                }
            });

以上就是SwitchButton中的一个简单的应用。

[201901091003521.png]: /images/20210529/831b999788e94919b9ae57bed2db2169.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/e69830ca0efe4828a38bf82c6471629f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/2014d4bf935a41ab8deb5bd1addf309f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210529/82f4c32ebc954afd9564ec8b5495254c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]: /images/20210529/172eef2ed97d4d24bc44af5cf0fcee35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]: /images/20210529/80e87a35d5d74becbeae93f49cdb3d4e.png