Selector在HarmonyOS中的使用

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

Selector其实就是一组状态列表(StateList)，可以将不同的状态关联不同的效果，主要用于设置控件背景和字体颜色等。控件一共有7种状态，常用的有：空状态empty，按下状态pressed，获取焦点focused，勾选状态checked，不可用状态disable。

鸿蒙中selector效果可以通过xml的state-container标签或者在代码中使用StateElement来实现，下面以button的背景选择器举例说明：

// 表示当前控件处于被勾选状态（check状态），如控件Checkbox public static final int COMPONENT_STATE_CHECKED = 64; // 表示当前控件处于不可用状态，如Button的setEnabled为false public static final int COMPONENT_STATE_DISABLED = 32; // 初始状态 public static final int COMPONENT_STATE_EMPTY = 0; // 表示当前控件处于获取焦点的状态，如TextField被点击输入文字时 public static final int COMPONENT_STATE_FOCUSED = 2; // 表示光标移动到当前控件上的状态 public static final int COMPONENT_STATE_HOVERED = 268435456; // 当用户点击或者触摸该控件的状态，如Button点击 public static final int COMPONENT_STATE_PRESSED = 16384; // 表示控件被选择地状态，比如一个ListContainer获得焦点（focus），服务器托管而用方向键选择了其中一个item（selecter） public static final int COMPONENT_STATE_SELECTED = 4; 

实现以及使用：

1创建selector.xml

在resources/base/graphic自定义 shape，定义不同状态的背景，然后将多个shape组合配置到state-container中生成一个新的selector_button.xml文件，提供给控件使用。

定义空状态下的shape背景生成background_btn_empty.xml，其他状态类似：

<?xml version="1.0" encoding="UTF-8" ?> <shape     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:shape="rectangle">     <corners ohos:radius="5vp"/>     <solid ohos:color="#0000ff"/> </shape> 

定义按下状态下的背景生成background_btn_pressed.xml：

<?xml version="1.0" encoding="UTF-8" ?> <shape     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:shape="rectangle">     <corners ohos:radius="5vp"/>     <solid         ohos:color="#FF0000"/> </shape> 

创建selector_button.xml，在ohos:element字段中配置shape背景, ohos:state配置控件状态：

<?xml version="1.0" encoding="UTF-8" ?> <state-container     xmlns:ohos="http://schemas.huawei.com/res/ohos">     <item         ohos:element="$graphic:background_btn_disabled"         ohos:state="component_state_disabled"/>     <item         ohos:element="$graphic:background_btn_pressed"         ohos:state="component_state_pressed"/>     <item         ohos:element="$graphic:background_btn_empty"         ohos:state="component_state_empty"/> </state-container> 

也可以直接使用颜色：

<state-container     xmlns:ohos="http://schemas.huawei.com/res/ohos">     <item         ohos:element="#ff0000"         ohos:state="component_state_disabled"/>     <item         ohos:element="#00ff00"         ohos:state="component_state_pressed"/>     <item         ohos:element="#0000ff"         ohos:state="component_state_empty"/> </state-container> 

2控件中使用

设置控件的背景background_element为状态选择器，并在状态选择器中按需添加不同的状态和不同的状态下的背景：

<Button     ohos:height="match_content"     ohos:width="match_content"     ohos:background_element="$graphic:selector_button"     ohos:layout_alignment="horizontal_center"     ohos:margin="5vp"     ohos:text="Button xml"     ohos:text_size="50"     /> 

3代码中使用

新建不同的状态下的ShapeElement后将其添加到State Element中，并将需要设置状态选择器的部分设置为添加了状态的StateElement，如Button的setBackground、Checkbox的setButtonElement，设置之后相关的控件就会有状态选择器的服务器租用效果。

3.1 Button

/**  * 添加一个Button  */ private void initButton() {      // Button在presses状态的element     ShapeElement elementButtonPressed = new ShapeElement();     elementButtonPressed.setRgbColor(RgbPalette.RED);     elementButtonPressed.setShape(ShapeElement.RECTANGLE);     elementButtonPressed.setCornerRadius(10);     // Button在Disabled状态下的element     ShapeElement elementButtonDisable = new ShapeElement();     elementButtonDisable.setRgbColor(RgbPalette.GREEN);     elementButtonDisable.setShape(ShapeElement.RECTANGLE);     elementButtonDisable.setCornerRadius(10);     // Button在Empty状态下的element     ShapeElement elementButtonEmpty = new ShapeElement();     elementButtonEmpty.setRgbColor(RgbPalette.BLUE);     elementButtonEmpty.setShape(ShapeElement.RECTANGLE);     elementButtonEmpty.setCornerRadius(10);     // Button在Hoveered状态下的element     ShapeElement elementButtonHovered = new ShapeElement();     elementButtonHovered.setRgbColor(RgbPalette.GRAY);     elementButtonHovered.setShape(ShapeElement.RECTANGLE);     elementButtonHovered.setCornerRadius(10);     // 将各种状态下不同的背景添加到StateElement中     StateElement stateElement = new StateElement();     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_PRESSED}, elementButtonPressed);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_DISABLED}, elementButtonDisable);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_HOVERED}, elementButtonHovered);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_EMPTY}, elementButtonEmpty);     // 新建一个button并将其添加到布局中     Button button = new Button(this);     button.setMarginTop(20);     button.setText("Button");     button.setTextSize(50);     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED     // button.setEnabled(false);     button.setBackground(stateElement);     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);     layoutConfig.alignment = LayoutAlignment.CENTER;     layoutConfig.setMargins(20, 20, 20, 20);     button.setLayoutConfig(layoutConfig);     dlSelector.addComponent(button); } 

3.2 TextField

/**  * 添加一个TextField  */ private void initTextField() {      // TextField在presses状态的element     ShapeElement elementTextFieldPressed = new ShapeElement();     elementTextFieldPressed.setRgbColor(RgbPalette.RED);     elementTextFieldPressed.setShape(ShapeElement.RECTANGLE);     elementTextFieldPressed.setCornerRadius(10);     // TextField在Disabled状态下的element     ShapeElement elementTextFieldDisable = new ShapeElement();     elementTextFieldDisable.setRgbColor(RgbPalette.GRAY);     elementTextFieldDisable.setShape(ShapeElement.RECTANGLE);     elementTextFieldDisable.setCornerRadius(10);     // TextField在Empty状态下的element     ShapeElement elementTextFieldEmpty = new ShapeElement();     elementTextFieldEmpty.setRgbColor(RgbPalette.BLUE);     elementTextFieldEmpty.setShape(ShapeElement.RECTANGLE);     elementTextFieldEmpty.setCornerRadius(10);     // TextField在Focused状态下的element     ShapeElement elementTextFieldFocused = new ShapeElement();     elementTextFieldFocused.setRgbColor(RgbPalette.GREEN);     elementTextFieldFocused.setShape(ShapeElement.RECTANGLE);     elementTextFieldFocused.setCornerRadius(10);     //将各种状态下不同的背景添加到StateElement中     StateElement stateElement = new StateElement();     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_PRESSED}, elementTextFieldPressed);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_DISABLED}, elementTextFieldDisable);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_FOCUSED}, elementTextFieldFocused);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_EMPTY}, elementTextFieldEmpty);     //新建一个TextField并将其添加到布局中     TextField textField = new TextField(this);     textField.setText("TextField");     textField.setTextSize(50);     // 设置textfield的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED     // textField.setEnabled(false);     textField.setBackground(stateElement);     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);     layoutConfig.alignment = LayoutAlignment.CENTER;     layoutConfig.setMargins(20, 20, 20, 20);     textField.setLayoutConfig(layoutConfig);     dlSelector.addComponent(textField); } 

3.3 Checkbox

/**  * 添加一个Checkbox  */ private void initCheckbox() {      // Checkbox在presses状态的element     ShapeElement elementCheckboxPressed = new ShapeElement();     elementCheckboxPressed.setRgbColor(RgbPalette.RED);     elementCheckboxPressed.setShape(ShapeElement.RECTANGLE);     elementCheckboxPressed.setCornerRadius(10);     // Checkbox在Disabled状态下的element     ShapeElement elementCheckboxDisable = new ShapeElement();     elementCheckboxDisable.setRgbColor(RgbPalette.GREEN);     elementCheckboxDisable.setShape(ShapeElement.RECTANGLE);     elementCheckboxDisable.setCornerRadius(10);     // Checkbox在Empty状态下的element     ShapeElement elementCheckboxEmpty = new ShapeElement();     elementCheckboxEmpty.setRgbColor(RgbPalette.BLUE);     elementCheckboxEmpty.setShape(ShapeElement.RECTANGLE);     elementCheckboxEmpty.setCornerRadius(10);     // Checkbox在Checked状态下的element     ShapeElement elementCheckboxChecked = new ShapeElement();     elementCheckboxChecked.setRgbColor(RgbPalette.GRAY);     elementCheckboxChecked.setShape(ShapeElement.RECTANGLE);     elementCheckboxChecked.setCornerRadius(10);     //将各种状态下不同的背景添加到StateElement中     StateElement stateElement = new StateElement();     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_PRESSED}, elementCheckboxPressed);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_DISABLED}, elementCheckboxDisable);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_CHECKED}, elementCheckboxChecked);     stateElement.addState(new int[]{ ComponentState.COMPONENT_STATE_EMPTY}, elementCheckboxEmpty);     //新建一个button并将其添加到布局中     Checkbox checkbox = new Checkbox(this);     checkbox.setText("Checkbox");     checkbox.setTextSize(50);     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED     // checkbox.setEnabled(false);     checkbox.setButtonElement(stateElement);     // checkbox点击也会有状态变化     // checkbox.setBackground(stateElement);     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);     layoutConfig.alignment = LayoutAlignment.CENTER;     layoutConfig.setMargins(20, 20, 20, 20);     checkbox.setLayoutConfig(layoutConfig);     dlSelector.addComponent(checkbox); } 

本文作者：Zhang Heng 来自鸿蒙三方库联合特战队

想了解更多内容，请访问：

和华为官方合作共建的香港云服务器鸿蒙技术社区

https://harmonyos.51cto.com

很赞哦!（68326）