当前位置：主页 > 查看内容

Selector在HarmonyOS中的使用

发布时间：2021-04-16 00:00| 有 位朋友查看

简介：想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com Selector其实就是一组状态列表(StateList)，可以将不同的状态关联不同的效果，主要用于设置控件背景和字体颜色等。控件一共有7种状态，常用的有：空状态em……

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

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

https://harmonyos.51cto.com

Selector其实就是一组状态列表(StateList)，可以将不同的状态关联不同的效果，主要用于设置控件背景和字体颜色等。控件一共有7种状态，常用的有：空状态empty，按下状态pressed，获取焦点focused，勾选状态checked，不可用状态disable。

鸿蒙中selector效果可以通过xml的state-container标签或者在代码中使用StateElement来实现，下面以button的背景选择器举例说明：

  1. // 表示当前控件处于被勾选状态（check状态），如控件Checkbox 
  2. public static final int COMPONENT_STATE_CHECKED = 64; 
  3. // 表示当前控件处于不可用状态，如Button的setEnabled为false 
  4. public static final int COMPONENT_STATE_DISABLED = 32; 
  5. // 初始状态 
  6. public static final int COMPONENT_STATE_EMPTY = 0; 
  7. // 表示当前控件处于获取焦点的状态，如TextField被点击输入文字时 
  8. public static final int COMPONENT_STATE_FOCUSED = 2; 
  9. // 表示光标移动到当前控件上的状态 
  10. public static final int COMPONENT_STATE_HOVERED = 268435456; 
  11. // 当用户点击或者触摸该控件的状态，如Button点击 
  12. public static final int COMPONENT_STATE_PRESSED = 16384; 
  13. // 表示控件被选择地状态，比如一个ListContainer获得焦点（focus），而用方向键选择了其中一个item（selecter） 
  14. 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，其他状态类似：

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <shape 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:shape="rectangle"> 
  5.  
  6.     <corners ohos:radius="5vp"/> 
  7.  
  8.     <solid ohos:color="#0000ff"/> 
  9. </shape> 

定义按下状态下的背景生成background_btn_pressed.xml：

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <shape 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:shape="rectangle"> 
  5.  
  6.     <corners ohos:radius="5vp"/> 
  7.  
  8.     <solid 
  9.         ohos:color="#FF0000"/> 
  10. </shape> 

创建selector_button.xml，在ohos:element字段中配置shape背景, ohos:state配置控件状态：

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <state-container 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"> 
  4.  
  5.     <item 
  6.         ohos:element="$graphic:background_btn_disabled" 
  7.         ohos:state="component_state_disabled"/> 
  8.  
  9.     <item 
  10.         ohos:element="$graphic:background_btn_pressed" 
  11.         ohos:state="component_state_pressed"/> 
  12.  
  13.     <item 
  14.         ohos:element="$graphic:background_btn_empty" 
  15.         ohos:state="component_state_empty"/> 
  16.  
  17. </state-container> 

也可以直接使用颜色：

  1. <state-container 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos"> 
  3.  
  4.     <item 
  5.         ohos:element="#ff0000" 
  6.         ohos:state="component_state_disabled"/> 
  7.  
  8.     <item 
  9.         ohos:element="#00ff00" 
  10.         ohos:state="component_state_pressed"/> 
  11.  
  12.     <item 
  13.         ohos:element="#0000ff" 
  14.         ohos:state="component_state_empty"/> 
  15.  
  16. </state-container> 

2控件中使用

设置控件的背景background_element为状态选择器，并在状态选择器中按需添加不同的状态和不同的状态下的背景：

  1. <Button 
  2.     ohos:height="match_content" 
  3.     ohos:width="match_content" 
  4.     ohos:background_element="$graphic:selector_button" 
  5.     ohos:layout_alignment="horizontal_center" 
  6.     ohos:margin="5vp" 
  7.     ohos:text="Button xml" 
  8.     ohos:text_size="50" 
  9.     /> 

3代码中使用

新建不同的状态下的ShapeElement后将其添加到State Element中，并将需要设置状态选择器的部分设置为添加了状态的StateElement，如Button的setBackground、Checkbox的setButtonElement，设置之后相关的控件就会有状态选择器的效果。

3.1 Button

  1. /** 
  2.  * 添加一个Button 
  3.  */ 
  4. private void initButton() { 
  5.     // Button在presses状态的element 
  6.     ShapeElement elementButtonPressed = new ShapeElement(); 
  7.     elementButtonPressed.setRgbColor(RgbPalette.RED); 
  8.     elementButtonPressed.setShape(ShapeElement.RECTANGLE); 
  9.     elementButtonPressed.setCornerRadius(10); 
  10.     // Button在Disabled状态下的element 
  11.     ShapeElement elementButtonDisable = new ShapeElement(); 
  12.     elementButtonDisable.setRgbColor(RgbPalette.GREEN); 
  13.     elementButtonDisable.setShape(ShapeElement.RECTANGLE); 
  14.     elementButtonDisable.setCornerRadius(10); 
  15.     // Button在Empty状态下的element 
  16.     ShapeElement elementButtonEmpty = new ShapeElement(); 
  17.     elementButtonEmpty.setRgbColor(RgbPalette.BLUE); 
  18.     elementButtonEmpty.setShape(ShapeElement.RECTANGLE); 
  19.     elementButtonEmpty.setCornerRadius(10); 
  20.     // Button在Hoveered状态下的element 
  21.     ShapeElement elementButtonHovered = new ShapeElement(); 
  22.     elementButtonHovered.setRgbColor(RgbPalette.GRAY); 
  23.     elementButtonHovered.setShape(ShapeElement.RECTANGLE); 
  24.     elementButtonHovered.setCornerRadius(10); 
  25.     // 将各种状态下不同的背景添加到StateElement中 
  26.     StateElement stateElement = new StateElement(); 
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementButtonPressed); 
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementButtonDisable); 
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_HOVERED}, elementButtonHovered); 
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonEmpty); 
  31.  
  32.     // 新建一个button并将其添加到布局中 
  33.     Button button = new Button(this); 
  34.     button.setMarginTop(20); 
  35.     button.setText("Button"); 
  36.     button.setTextSize(50); 
  37.     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED 
  38.     // button.setEnabled(false); 
  39.     button.setBackground(stateElement); 
  40.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig( 
  41.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT); 
  42.     layoutConfig.alignment = LayoutAlignment.CENTER; 
  43.     layoutConfig.setMargins(20, 20, 20, 20); 
  44.     button.setLayoutConfig(layoutConfig); 
  45.     dlSelector.addComponent(button); 
  46. } 

3.2 TextField

  1. /** 
  2.  * 添加一个TextField 
  3.  */ 
  4. private void initTextField() { 
  5.     // TextField在presses状态的element 
  6.     ShapeElement elementTextFieldPressed = new ShapeElement(); 
  7.     elementTextFieldPressed.setRgbColor(RgbPalette.RED); 
  8.     elementTextFieldPressed.setShape(ShapeElement.RECTANGLE); 
  9.     elementTextFieldPressed.setCornerRadius(10); 
  10.     // TextField在Disabled状态下的element 
  11.     ShapeElement elementTextFieldDisable = new ShapeElement(); 
  12.     elementTextFieldDisable.setRgbColor(RgbPalette.GRAY); 
  13.     elementTextFieldDisable.setShape(ShapeElement.RECTANGLE); 
  14.     elementTextFieldDisable.setCornerRadius(10); 
  15.     // TextField在Empty状态下的element 
  16.     ShapeElement elementTextFieldEmpty = new ShapeElement(); 
  17.     elementTextFieldEmpty.setRgbColor(RgbPalette.BLUE); 
  18.     elementTextFieldEmpty.setShape(ShapeElement.RECTANGLE); 
  19.     elementTextFieldEmpty.setCornerRadius(10); 
  20.     // TextField在Focused状态下的element 
  21.     ShapeElement elementTextFieldFocused = new ShapeElement(); 
  22.     elementTextFieldFocused.setRgbColor(RgbPalette.GREEN); 
  23.     elementTextFieldFocused.setShape(ShapeElement.RECTANGLE); 
  24.     elementTextFieldFocused.setCornerRadius(10); 
  25.     //将各种状态下不同的背景添加到StateElement中 
  26.     StateElement stateElement = new StateElement(); 
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementTextFieldPressed); 
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementTextFieldDisable); 
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_FOCUSED}, elementTextFieldFocused); 
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementTextFieldEmpty); 
  31.  
  32.     //新建一个TextField并将其添加到布局中 
  33.     TextField textField = new TextField(this); 
  34.     textField.setText("TextField"); 
  35.     textField.setTextSize(50); 
  36.     // 设置textfield的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED 
  37.     // textField.setEnabled(false); 
  38.     textField.setBackground(stateElement); 
  39.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig( 
  40.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT); 
  41.     layoutConfig.alignment = LayoutAlignment.CENTER; 
  42.     layoutConfig.setMargins(20, 20, 20, 20); 
  43.     textField.setLayoutConfig(layoutConfig); 
  44.     dlSelector.addComponent(textField); 
  45. } 

3.3 Checkbox

  1. /** 
  2.  * 添加一个Checkbox 
  3.  */ 
  4. private void initCheckbox() { 
  5.     // Checkbox在presses状态的element 
  6.     ShapeElement elementCheckboxPressed = new ShapeElement(); 
  7.     elementCheckboxPressed.setRgbColor(RgbPalette.RED); 
  8.     elementCheckboxPressed.setShape(ShapeElement.RECTANGLE); 
  9.     elementCheckboxPressed.setCornerRadius(10); 
  10.     // Checkbox在Disabled状态下的element 
  11.     ShapeElement elementCheckboxDisable = new ShapeElement(); 
  12.     elementCheckboxDisable.setRgbColor(RgbPalette.GREEN); 
  13.     elementCheckboxDisable.setShape(ShapeElement.RECTANGLE); 
  14.     elementCheckboxDisable.setCornerRadius(10); 
  15.     // Checkbox在Empty状态下的element 
  16.     ShapeElement elementCheckboxEmpty = new ShapeElement(); 
  17.     elementCheckboxEmpty.setRgbColor(RgbPalette.BLUE); 
  18.     elementCheckboxEmpty.setShape(ShapeElement.RECTANGLE); 
  19.     elementCheckboxEmpty.setCornerRadius(10); 
  20.     // Checkbox在Checked状态下的element 
  21.     ShapeElement elementCheckboxChecked = new ShapeElement(); 
  22.     elementCheckboxChecked.setRgbColor(RgbPalette.GRAY); 
  23.     elementCheckboxChecked.setShape(ShapeElement.RECTANGLE); 
  24.     elementCheckboxChecked.setCornerRadius(10); 
  25.     //将各种状态下不同的背景添加到StateElement中 
  26.     StateElement stateElement = new StateElement(); 
  27.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_PRESSED}, elementCheckboxPressed); 
  28.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_DISABLED}, elementCheckboxDisable); 
  29.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementCheckboxChecked); 
  30.     stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementCheckboxEmpty); 
  31.  
  32.     //新建一个button并将其添加到布局中 
  33.     Checkbox checkbox = new Checkbox(this); 
  34.     checkbox.setText("Checkbox"); 
  35.     checkbox.setTextSize(50); 
  36.     // 设置按钮的状态，若为false，则表示状态为COMPONENT_STATE_DISABLED 
  37.     // checkbox.setEnabled(false); 
  38.     checkbox.setButtonElement(stateElement); 
  39.     // checkbox点击也会有状态变化 
  40.     // checkbox.setBackground(stateElement); 
  41.     DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig( 
  42.             ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT); 
  43.     layoutConfig.alignment = LayoutAlignment.CENTER; 
  44.     layoutConfig.setMargins(20, 20, 20, 20); 
  45.     checkbox.setLayoutConfig(layoutConfig); 
  46.     dlSelector.addComponent(checkbox); 
  47. } 

本文作者：Zhang Heng 来自鸿蒙三方库联合特战队

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

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

https://harmonyos.51cto.com


本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Java基础入门之字符串的转换、替换、删除和判断 下一篇：现代前端工程为什么越来越离不开 Monorepo?

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐