Selector在HarmonyOS中的使用

阿拉灯婶丁

发布于 2021-3-21 20:46

1.7w浏览

2收藏

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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

实现以及使用：

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>1.
2.
3.
4.
5.
6.
7.
8.
9.

定义按下状态下的背景生成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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

创建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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

也可以直接使用颜色：

<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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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"
    />1.
2.
3.
4.
5.
6.
7.
8.
9.

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);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

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);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

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);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.