[[389418]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com

Selector其實就是一組狀態(tài)列表(StateList)，可以將不同的狀態(tài)關聯(lián)不同的效果，主要用于設置控件背景和字體顏色等?？丶还灿?種狀態(tài)，常用的有：空狀態(tài)empty，按下狀態(tài)pressed，獲取焦點focused，勾選狀態(tài)checked，不可用狀態(tài)disable。

鴻蒙中selector效果可以通過xml的state-container標簽或者在代碼中使用StateElement來實現(xiàn)，下面以button的背景選擇器舉例說明：

// 表示當前控件處于被勾選狀態(tài)（check狀態(tài)），如控件Checkbox 
public static final int COMPONENT_STATE_CHECKED = 64; 
// 表示當前控件處于不可用狀態(tài)，如Button的setEnabled為false 
public static final int COMPONENT_STATE_DISABLED = 32; 
// 初始狀態(tài) 
public static final int COMPONENT_STATE_EMPTY = 0; 
// 表示當前控件處于獲取焦點的狀態(tài)，如TextField被點擊輸入文字時 
public static final int COMPONENT_STATE_FOCUSED = 2; 
// 表示光標移動到當前控件上的狀態(tài) 
public static final int COMPONENT_STATE_HOVERED = 268435456; 
// 當用戶點擊或者觸摸該控件的狀態(tài)，如Button點擊 
public static final int COMPONENT_STATE_PRESSED = 16384; 
// 表示控件被選擇地狀態(tài)，比如一個ListContainer獲得焦點（focus），而用方向鍵選擇了其中一個item（selecter） 
public static final int COMPONENT_STATE_SELECTED = 4; 

實現(xiàn)以及使用：

1創(chuàng)建selector.xml

在resources/base/graphic自定義 shape，定義不同狀態(tài)的背景，然后將多個shape組合配置到state-container中生成一個新的selector_button.xml文件，提供給控件使用。

定義空狀態(tài)下的shape背景生成background_btn_empty.xml，其他狀態(tài)類似：

<?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> 

定義按下狀態(tài)下的背景生成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> 

創(chuàng)建selector_button.xml，在ohos:element字段中配置shape背景, ohos:state配置控件狀態(tài)：

<?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為狀態(tài)選擇器，并在狀態(tài)選擇器中按需添加不同的狀態(tài)和不同的狀態(tài)下的背景：

<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代碼中使用

新建不同的狀態(tài)下的ShapeElement后將其添加到State Element中，并將需要設置狀態(tài)選擇器的部分設置為添加了狀態(tài)的StateElement，如Button的setBackground、Checkbox的setButtonElement，設置之后相關的控件就會有狀態(tài)選擇器的效果。

3.1 Button

/** 
 * 添加一個Button 
 */ 
private void initButton() { 
    // Button在presses狀態(tài)的element 
    ShapeElement elementButtonPressed = new ShapeElement(); 
    elementButtonPressed.setRgbColor(RgbPalette.RED); 
    elementButtonPressed.setShape(ShapeElement.RECTANGLE); 
    elementButtonPressed.setCornerRadius(10); 
    // Button在Disabled狀態(tài)下的element 
    ShapeElement elementButtonDisable = new ShapeElement(); 
    elementButtonDisable.setRgbColor(RgbPalette.GREEN); 
    elementButtonDisable.setShape(ShapeElement.RECTANGLE); 
    elementButtonDisable.setCornerRadius(10); 
    // Button在Empty狀態(tài)下的element 
    ShapeElement elementButtonEmpty = new ShapeElement(); 
    elementButtonEmpty.setRgbColor(RgbPalette.BLUE); 
    elementButtonEmpty.setShape(ShapeElement.RECTANGLE); 
    elementButtonEmpty.setCornerRadius(10); 
    // Button在Hoveered狀態(tài)下的element 
    ShapeElement elementButtonHovered = new ShapeElement(); 
    elementButtonHovered.setRgbColor(RgbPalette.GRAY); 
    elementButtonHovered.setShape(ShapeElement.RECTANGLE); 
    elementButtonHovered.setCornerRadius(10); 
    // 將各種狀態(tài)下不同的背景添加到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); 
    // 設置按鈕的狀態(tài)，若為false，則表示狀態(tài)為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狀態(tài)的element 
    ShapeElement elementTextFieldPressed = new ShapeElement(); 
    elementTextFieldPressed.setRgbColor(RgbPalette.RED); 
    elementTextFieldPressed.setShape(ShapeElement.RECTANGLE); 
    elementTextFieldPressed.setCornerRadius(10); 
    // TextField在Disabled狀態(tài)下的element 
    ShapeElement elementTextFieldDisable = new ShapeElement(); 
    elementTextFieldDisable.setRgbColor(RgbPalette.GRAY); 
    elementTextFieldDisable.setShape(ShapeElement.RECTANGLE); 
    elementTextFieldDisable.setCornerRadius(10); 
    // TextField在Empty狀態(tài)下的element 
    ShapeElement elementTextFieldEmpty = new ShapeElement(); 
    elementTextFieldEmpty.setRgbColor(RgbPalette.BLUE); 
    elementTextFieldEmpty.setShape(ShapeElement.RECTANGLE); 
    elementTextFieldEmpty.setCornerRadius(10); 
    // TextField在Focused狀態(tài)下的element 
    ShapeElement elementTextFieldFocused = new ShapeElement(); 
    elementTextFieldFocused.setRgbColor(RgbPalette.GREEN); 
    elementTextFieldFocused.setShape(ShapeElement.RECTANGLE); 
    elementTextFieldFocused.setCornerRadius(10); 
    //將各種狀態(tài)下不同的背景添加到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的狀態(tài)，若為false，則表示狀態(tài)為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狀態(tài)的element 
    ShapeElement elementCheckboxPressed = new ShapeElement(); 
    elementCheckboxPressed.setRgbColor(RgbPalette.RED); 
    elementCheckboxPressed.setShape(ShapeElement.RECTANGLE); 
    elementCheckboxPressed.setCornerRadius(10); 
    // Checkbox在Disabled狀態(tài)下的element 
    ShapeElement elementCheckboxDisable = new ShapeElement(); 
    elementCheckboxDisable.setRgbColor(RgbPalette.GREEN); 
    elementCheckboxDisable.setShape(ShapeElement.RECTANGLE); 
    elementCheckboxDisable.setCornerRadius(10); 
    // Checkbox在Empty狀態(tài)下的element 
    ShapeElement elementCheckboxEmpty = new ShapeElement(); 
    elementCheckboxEmpty.setRgbColor(RgbPalette.BLUE); 
    elementCheckboxEmpty.setShape(ShapeElement.RECTANGLE); 
    elementCheckboxEmpty.setCornerRadius(10); 
    // Checkbox在Checked狀態(tài)下的element 
    ShapeElement elementCheckboxChecked = new ShapeElement(); 
    elementCheckboxChecked.setRgbColor(RgbPalette.GRAY); 
    elementCheckboxChecked.setShape(ShapeElement.RECTANGLE); 
    elementCheckboxChecked.setCornerRadius(10); 
    //將各種狀態(tài)下不同的背景添加到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); 
    // 設置按鈕的狀態(tài)，若為false，則表示狀態(tài)為COMPONENT_STATE_DISABLED 
    // checkbox.setEnabled(false); 
    checkbox.setButtonElement(stateElement); 
    // checkbox點擊也會有狀態(tài)變化 
    // 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 來自鴻蒙三方庫聯(lián)合特戰(zhàn)隊

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com