harmonyos在哪里使用,Selector在HarmonyOS中的使用

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

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

// 表示当前控件处于被勾选状态(check状态)，如控件Checkbox

publicstaticfinalintCOMPONENT_STATE_CHECKED = 64;

// 表示当前控件处于不可用状态，如Button的setEnabled为false

publicstaticfinalintCOMPONENT_STATE_DISABLED = 32;

// 初始状态

publicstaticfinalintCOMPONENT_STATE_EMPTY = 0;

// 表示当前控件处于获取焦点的状态，如TextField被点击输入文字时

publicstaticfinalintCOMPONENT_STATE_FOCUSED = 2;

// 表示光标移动到当前控件上的状态

publicstaticfinalintCOMPONENT_STATE_HOVERED = 268435456;

// 当用户点击或者触摸该控件的状态，如Button点击

publicstaticfinalintCOMPONENT_STATE_PRESSED = 16384;

// 表示控件被选择地状态，比如一个ListContainer获得焦点(focus)，而用方向键选择了其中一个item(selecter)

publicstaticfinalintCOMPONENT_STATE_SELECTED = 4;

实现以及使用：

1创建selector.xml

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

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

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

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

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

ohos:color="#FF0000"/>

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

xmlns:ohos="http://schemas.huawei.com/res/ohos">

ohos:element="$graphic:background_btn_disabled"

ohos:state="component_state_disabled"/>

ohos:element="$graphic:background_btn_pressed"

ohos:state="component_state_pressed"/>

ohos:element="$graphic:background_btn_empty"

ohos:state="component_state_empty"/>

也可以直接使用颜色：

xmlns:ohos="http://schemas.huawei.com/res/ohos">

ohos:element="#ff0000"

ohos:state="component_state_disabled"/>

ohos:element="#00ff00"

ohos:state="component_state_pressed"/>

ohos:element="#0000ff"

ohos:state="component_state_empty"/>

2控件中使用

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

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 来自鸿蒙三方库联合特战队

【编辑推荐】

【责任编辑：jianghua TEL：(010)68476606】

点赞 0