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组件的选择状态，然后再做进一步的操作。
