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

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

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

https://harmonyos.51cto.com