日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Selector在HarmonyOS中的使用

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的金鳳網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

https://harmonyos.

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

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

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

實現(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)類似：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.

定義按下狀態(tài)下的背景生成background_btn_pressed.xml：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.     
  
  
  
  
  9.         ohos:color="#FF0000"/>
    10. 
  
  
  
  
  10.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos">
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     
  
  
  
  
  6.         ohos:element="$graphic:background_btn_disabled"
    7. 
  
  
  
  
  7.         ohos:state="component_state_disabled"/>
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:element="$graphic:background_btn_pressed"
    11. 
  
  
  
  
  11.         ohos:state="component_state_pressed"/>
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     
  
  
  
  
  14.         ohos:element="$graphic:background_btn_empty"
    15. 
  
  
  
  
  15.         ohos:state="component_state_empty"/>
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.

也可以直接使用顏色：

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

2控件中使用

設(shè)置控件的背景background_element為狀態(tài)選擇器，并在狀態(tài)選擇器中按需添加不同的狀態(tài)和不同的狀態(tài)下的背景：

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

3代碼中使用

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

3.1 Button

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

3.2 TextField

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

3.3 Checkbox

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

本文作者：Zhang Heng 來自鴻蒙三方庫聯(lián)合特戰(zhàn)隊

想了解更多內(nèi)容，請訪問：

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

https://harmonyos.


網(wǎng)頁題目：Selector在HarmonyOS中的使用
分享地址：http://www.dlmjj.cn/article/cdcijhj.html