Android Switch开关按钮使用和自定义样式(系列教程五)
Switch开关按钮简介
Switch开关按钮是Android中的基本控件之一,其本质上也是一个按钮,具有开和关两种展示状态。
Switch开关按钮基本使用
在布局文件中定义开关按钮:
<LinearLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:orientation="vertical">
<Switch
android:id="@+id/swtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
下面是开关按钮的默认样式,比较丑,我们后面自定义比较好看的开关按钮。
在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开关按钮自定义样式
自定义样式效果图如下,下面我们一步步去实现这个样式。
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">
<!-- <solid android:color="#b3536673"></solid>-->
</shape>
</item>
<item android:left="@dimen/thumbOffset" android:right="@dimen/thumbOffset" android:top="@dimen/thumbOffset" android:bottom="@dimen/thumbOffset">
<shape android:shape="oval">
<!-- <size android:height="30dp" android:width="30dp"></size>-->
<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">
<!-- <solid android:color="#b3536673"></solid>-->
</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
<style name="switchStyleDefault" parent="@style/TextAppearance.AppCompat.Widget.Switch">
<item name="android:textSize">10sp</item>
<item name="android:textColor">#ffffff</item>
</style>
<style name="switchStyleCheck" parent="@style/TextAppearance.AppCompat.Widget.Switch">
<item name="android:textSize">10sp</item>
<item name="android:textColor">#00ff0a</item>
</style>
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
android:id="@+id/swtAutoModel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/textView5"
android:showText="true"
android:switchMinWidth="50dp"
android:switchTextAppearance="@style/switchStyleDefault"
android:textOff="异物"
android:textOn="导线"
android:thumb="@drawable/thumb"
android:track="@drawable/track" />
至此,Switch开关按钮自定义样式已经实现。
原创不易,点个赞再走呗。。。