Android Switch开关按钮使用和自定义样式（系列教程五）

快来打我* 2024-04-01 14:47 66阅读 0赞

#### Switch开关按钮简介 ####

Switch开关按钮是Android中的基本控件之一，其本质上也是一个按钮，具有开和关两种展示状态。

#### Switch开关按钮基本使用 ####

在布局文件中定义开关按钮：

下面是开关按钮的默认样式，比较丑，我们后面自定义比较好看的开关按钮。

![a9fe33b4421f44ff9e0f9803cf6ecb3f.png][]

在Activity中使用开关按钮：

Switch开关按钮本质上也是一个按钮，也具有对onClick、onLongClick、onTouch事件的处理能力，但它又是一个特殊的按钮，拥有一个特殊的事件，可以监听开关按钮的状态变化，如下所示：

public class MainActivity05 extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main_05);
    
            //根据ID获取到开关按钮
            Switch swtTest = findViewById(R.id.swtTest);
    
            //给开关按钮设置监听状态改变事件
            swtTest.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    System.out.println("开关按钮的状态 = " + b);
                }
            });
        }
    }

#### Switch开关按钮属性介绍 ####

*  textOn：开关按钮打开时显示的文字。
 *  textOff：开关按钮关闭时显示的文字。
 *  thumb：开关按钮上原型滑块的样式，自定义样式时需要设置此样式。
 *  track：开关按钮下面导轨的样式，自定义样式时需要设置此样式。
 *  switchTextAppearance：设置文本的风格，可以用来设置开关两种状态下的文本样式。
 *  checked：设置初始选中状态
 *  showText：设置是否显示开关上的文字（android系统中默认不显示）

#### Switch开关按钮自定义样式 ####

自定义样式效果图如下，下面我们一步步去实现这个样式。

![19776f5779644d74b1b00965d41f6dca.png][]![4e871ee5d1c545239b0e2b79b41b069b.png][]

1. 定义开关按钮底部导轨的样式：drawable/track.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item android:state_checked="false">
            <shape>
                <size android:height="@dimen/switchHeight" android:width="@dimen/switchWidth"></size>
                <corners android:radius="20dp"></corners>
                <solid android:color="#b353667c"></solid>
                <stroke android:color="#b3ffffff" android:width="1dp"></stroke>
            </shape>
        </item>
    
        
        <item android:state_checked="true">
            <shape>
                <size android:height="@dimen/switchHeight" android:width="@dimen/switchWidth"></size>
                <corners android:radius="20dp"></corners>
                <solid android:color="#b32881d5"></solid>
                <stroke android:color="#b3ffffff" android:width="1dp"></stroke>
            </shape>
        </item>
    </selector>

2. 定义开关按钮上滑块的样式：drawable/thumb.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false">
            <layer-list>
                <item android:width="@dimen/switchHeight" android:height="@dimen/switchHeight">
                    <shape android:shape="oval">
    
                    </shape>
                </item>
    
                <item android:left="@dimen/thumbOffset" android:right="@dimen/thumbOffset" android:top="@dimen/thumbOffset" android:bottom="@dimen/thumbOffset">
                    <shape android:shape="oval">
    
                        <solid android:color="#b3536673"></solid>
                        <stroke android:width="1dp" android:color="#b3ffffff"></stroke>
                    </shape>
                </item>
            </layer-list>
        </item>
    
        <item android:state_checked="true">
            <layer-list>
                <item android:width="@dimen/switchHeight" android:height="@dimen/switchHeight">
                    <shape android:shape="oval">
                        
                    </shape>
                </item>
    
                <item android:left="@dimen/thumbOffset" android:right="@dimen/thumbOffset" android:top="@dimen/thumbOffset" android:bottom="@dimen/thumbOffset">
                    <shape android:shape="oval">
                        <solid android:color="#b3536673"></solid>
                        <stroke android:width="1dp" android:color="#b3ffffff"></stroke>
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>

3. 定义开关时的字体样式：values/style.xml

4. 需要在代码中根据按钮状态设置字体样式。

//给开关按钮设置监听状态改变事件
            swtTest.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    System.out.println("开关按钮的状态 = " + b);
    
                    //设置改变字体颜色
                    swtTest.setSwitchTextAppearance(MainActivity05.this, b ? R.style.switchStyleCheck : R.style.switchStyleDefault);
                }
            });

5. 最后，看一下布局中Switch开关按钮属性的设置，都引用了我们前面定义的样式。

至此，Switch开关按钮自定义样式已经实现。

原创不易，点个赞再走呗。。。

![a526cd85c64a408098e0e494a2cf5e5a.jpeg][]

[a9fe33b4421f44ff9e0f9803cf6ecb3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3d6a742a2cc44ba3b64ba902fa1a9b02.png
[19776f5779644d74b1b00965d41f6dca.png]: https://img-blog.csdnimg.cn/19776f5779644d74b1b00965d41f6dca.png
[4e871ee5d1c545239b0e2b79b41b069b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c829a37edb924d6d800d26bf3dd536a1.png
[a526cd85c64a408098e0e494a2cf5e5a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a7c69fc3302c4b18a054c6fb18a00c01.jpeg