Selector在HarmonyOS中的使用
作者：阿拉燈嬸丁
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
Selector其實(shí)就是一組狀態(tài)列表(StateList)，可以將不同的狀態(tài)關(guān)聯(lián)不同的效果，主要用于設(shè)置控件背景和字體顏色等。控件一共有7種狀態(tài)，常用的有：空狀態(tài)empty，按下狀態(tài)pressed，獲取焦點(diǎn)focused，勾選狀態(tài)checked，不可用狀態(tài)disable。
鴻蒙中selector效果可以通過xml的state-container標(biāo)簽或者在代碼中使用StateElement來實(shí)現(xiàn)，下面以button的背景選擇器舉例說明：
- // 表示當(dāng)前控件處于被勾選狀態(tài)（check狀態(tài)），如控件Checkbox
- public static final int COMPONENT_STATE_CHECKED = 64;
- // 表示當(dāng)前控件處于不可用狀態(tài)，如Button的setEnabled為false
- public static final int COMPONENT_STATE_DISABLED = 32;
- // 初始狀態(tài)
- public static final int COMPONENT_STATE_EMPTY = 0;
- // 表示當(dāng)前控件處于獲取焦點(diǎn)的狀態(tài)，如TextField被點(diǎn)擊輸入文字時(shí)
- public static final int COMPONENT_STATE_FOCUSED = 2;
- // 表示光標(biāo)移動(dòng)到當(dāng)前控件上的狀態(tài)
- public static final int COMPONENT_STATE_HOVERED = 268435456;
- // 當(dāng)用戶點(diǎn)擊或者觸摸該控件的狀態(tài)，如Button點(diǎn)擊
- public static final int COMPONENT_STATE_PRESSED = 16384;
- // 表示控件被選擇地狀態(tài)，比如一個(gè)ListContainer獲得焦點(diǎn)（focus），而用方向鍵選擇了其中一個(gè)item（selecter）
- public static final int COMPONENT_STATE_SELECTED = 4;
實(shí)現(xiàn)以及使用：
1創(chuàng)建selector.xml
在resources/base/graphic自定義 shape，定義不同狀態(tài)的背景，然后將多個(gè)shape組合配置到state-container中生成一個(gè)新的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控件中使用
設(shè)置控件的背景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中，并將需要設(shè)置狀態(tài)選擇器的部分設(shè)置為添加了狀態(tài)的StateElement，如Button的setBackground、Checkbox的setButtonElement，設(shè)置之后相關(guān)的控件就會(huì)有狀態(tài)選擇器的效果。
3.1 Button
- /**
- * 添加一個(gè)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);
- // 新建一個(gè)button并將其添加到布局中
- Button button = new Button(this);
- button.setMarginTop(20);
- button.setText("Button");
- button.setTextSize(50);
- // 設(shè)置按鈕的狀態(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
- /**
- * 添加一個(gè)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);
- //新建一個(gè)TextField并將其添加到布局中
- TextField textField = new TextField(this);
- textField.setText("TextField");
- textField.setTextSize(50);
- // 設(shè)置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
- /**
- * 添加一個(gè)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);
- //新建一個(gè)button并將其添加到布局中
- Checkbox checkbox = new Checkbox(this);
- checkbox.setText("Checkbox");
- checkbox.setTextSize(50);
- // 設(shè)置按鈕的狀態(tài)，若為false，則表示狀態(tài)為COMPONENT_STATE_DISABLED
- // checkbox.setEnabled(false);
- checkbox.setButtonElement(stateElement);
- // checkbox點(diǎn)擊也會(huì)有狀態(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)隊(duì)
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
責(zé)任編輯：jianghua
來源：
鴻蒙社區(qū)
