Selector在HarmonyOS中的使用

阿拉灯婶丁
发布于 2021-3-21 20:46
浏览
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创建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   来自鸿蒙三方库联合特战队

标签
Selector在HarmonyOS中的使用.zip 28.77K 49次下载
已于2021-3-21 20:46:52修改
4
收藏 2
回复
举报
4条回复
按时间正序
/
按时间倒序
奶盖
奶盖

不错,对Selector讲解的挺全面的。

回复
2021-3-22 09:28:48
白鹿白鹿
白鹿白鹿

超级干货

回复
2021-4-15 09:08:49
FredomKing
FredomKing

学习到了。

回复
2021-4-15 09:48:55
Tongson?
Tongson?

<item
    ohos:element="$media:xxx"
    ohos:state="component_state_pressed"/>

怎么使用呢

回复
2022-3-4 10:23:31
回复
    相关推荐