文章转载自:https://www.jb51.net/article/124942.htm
========================================================================================
实战中,其实会发现以下代码,switch并不能显示文字,因为缺少了一行:
1
|
android:showText="true" |
========================================================================================
在Android中偶尔会用到开关,Switch就是一个简单易使用的不错的控件。
首先,在布局中添加上Switch控件:
1
2
3
4
5
6
7
8
9
|
< Switch
android:id = "@+id/s_v"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:switchMinWidth = "20dp"
android:textOn = "on"
android:textOff = "off"
android:thumb = "@drawable/thumb"
android:track = "@drawable/track" />
|
以下是该控件的常用属性:
textOn:控件打开时显示的文字
textOff:控件关闭时显示的文字
thumb:控件开关的图片
track:控件开关的轨迹图片
typeface:设置字体类型
switchMinWidth:开关最小宽度
switchPadding:设置开关 与文字的空白距离
switchTextAppearance:设置文本的风格
checked:设置初始选中状态
splitTrack:是否设置一个间隙,让滑块与底部图片分隔(API 21及以上)
showText:设置是否显示开关上的文字(API 21及以上)
我们一般不会用该控件原本的样式,那么我们就需要自己修改样式了:
gray_thumb.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle" >
<!-- 高度40 -->
< size android:height = "40dp" android:width = "40dp" />
<!-- 圆角弧度 20 -->
< corners android:radius = "20dp" />
<!-- 变化率 -->
< gradient
android:endColor = "#ffffff"
android:startColor = "#ffffff" />
< stroke android:width = "1dp"
android:color = "#9e9e9e" />
</ shape >
|
green_thumb.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle" >
<!-- 高度40 -->
< size android:height = "40dp" android:width = "40dp" />
<!-- 圆角弧度 20 -->
< corners android:radius = "20dp" />
<!-- 变化率 -->
< gradient
android:endColor = "#ffffff"
android:startColor = "#ffffff" />
< stroke android:width = "1dp"
android:color = "#33da33" />
</ shape >
|
gray_track.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape = "rectangle" >
<!-- 高度 此处设置宽度无效-->
< size android:height = "20dp" />
<!-- 圆角弧度 15 -->
< corners android:radius = "25dp" />
<!-- 变化率 定义从左到右的颜色不变 -->
< gradient
android:endColor = "#9e9e9e"
android:startColor = "#9e9e9e" />
</ shape >
|
green_track.xml:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android" >
<!-- 高度40 -->
< size android:height = "20dp" />
<!-- 圆角弧度 20 -->
< corners android:radius = "25dp" />
<!-- 变化率 -->
< gradient
android:endColor = "#33da33"
android:startColor = "#33da33" />
</ shape >
|
thumb.xml:
1
2
3
4
5
6
7
8
|
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- 设置按钮在不同状态下的时候,按钮不同的颜色 -->
< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
< item android:state_checked = "true" android:drawable = "@drawable/green_thumb" />
< item android:drawable = "@drawable/gray_thumb" />
</ selector >
|
track.xml:
1
2
3
4
5
6
7
8
|
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- 控制Switch在不同状态下,底下下滑条的颜色 -->
< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
< item android:state_checked = "true" android:drawable = "@drawable/green_track" />
< item android:drawable = "@drawable/gray_track" />
</ selector >
|
在styles.xml中添加如下style:
1
2
3
4
5
6
7
|
< style name = "s_true" parent = "@android:style/TextAppearance.Small" >
< item name = "android:textColor" >#33da33</ item >
</ style >
< style name = "s_false" parent = "@android:style/TextAppearance.Small" >
< item name = "android:textColor" >#9b9b9b</ item >
</ style >
|
最后,只需要将控件实例化出来进行相应操作就可以了:
MainActivity.class:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public class MainActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Switch aSwitch = (Switch) findViewById(R.id.s_v);
aSwitch.setChecked( false );
aSwitch.setSwitchTextAppearance(MainActivity. this ,R.style.x1);
aSwitch.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
//控制开关字体颜色
if (b) {
aSwitch.setSwitchTextAppearance(MainActivity. this ,R.style.s_true);
} else {
aSwitch.setSwitchTextAppearance(MainActivity. this ,R.style.x1);
}
}
});
}
}
|
最终效果如下图:

