Switch组件
对于这个组件，Android开发并没有直接提供，但IOS开发中是有UISwitch的。鸿蒙的Switch组件与它的效果差不多。
本篇，将详细介绍Switch组件的使用规则。
创建Switch组件
首先，我们通过XML布局文件来创建一个Switch组件。示例代码如下：
<Switch
ohos:id="$+id:test_switch"
ohos:layout_alignment="horizontal_center"
ohos:top_margin="20vp"
ohos:height="60vp"
ohos:width="120vp"
ohos:text_state_on="开启"
ohos:text_state_off="关闭"
ohos:text_size="20vp"
ohos:marked="false"/>
运行之后，交互效果如下：
这里，有几个属性需要注意：
属性 | 含义 |
| text_state_on | 开启按钮时的文字 |
| text_state_off | 关闭按钮时的文字 |
| marked | 默认按钮是开启还是关闭 |
| track_element | 轨迹样式 |
| thumb_element | thumb样式 |
| check_element | 状态标志样式 |
用代码设置其交互样式
这里，我们可以直接通过graphic的shape文件设置后面这3个样式属性。但因为这个组件功能简单，我们来详细通过代码实现样式交互。
示例如下：
public class MainAbilitySlice extends AbilitySlice{
private Switch aSwitch;
HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
this.aSwitch=(Switch)findComponentById(ResourceTable.Id_test_switch);
// 开启状态下滑块的样式
ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);
// 关闭状态下滑块的样式
ShapeElement elementThumbOff = new ShapeElement();
elementThumbOff.setShape(ShapeElement.OVAL);
elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
elementThumbOff.setCornerRadius(50);
// 开启状态下轨迹样式
ShapeElement elementTrackOn = new ShapeElement();
elementTrackOn.setShape(ShapeElement.RECTANGLE);
elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
elementTrackOn.setCornerRadius(50);
// 关闭状态下轨迹样式
ShapeElement elementTrackOff = new ShapeElement();
elementTrackOff.setShape(ShapeElement.RECTANGLE);
elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
elementTrackOff.setCornerRadius(50);
//设置轨迹交互样式
this.aSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
//设置滑块交互样式
this.aSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
}
private StateElement trackElementInit(ShapeElement on, ShapeElement off){
StateElement trackElement = new StateElement();
trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
return trackElement;
}
private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
StateElement thumbElement = new StateElement();
thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
return thumbElement;
}
}
运行之后，效果如首图所示。
监听事件
Switch组件大多用于App的设置当中，一般都只有两个选择。所以，我们需要监听其到底是开启还是关闭。
示例代码如下：
this.aSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
// 回调处理Switch状态改变事件
@Override
public void onCheckedChanged(AbsButton button, boolean isChecked) {
}
});
这里的isChecked值，就能获取到Switch组件的选择状态，然后再做进一步的操作。
