Selector在HarmonyOS中的使用

作者：阿拉燈嬸丁 2021-03-25 09:58:22

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com

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); 
}