鴻蒙OS Button

2020-10-12 10:05 更新

鴻蒙OS Button

按鈕（Button）是一種常見的組件，點擊可以觸發(fā)對應的操作，通常由文本或圖標組成，也可以由圖標和文本共同組成。

圖1 文本按鈕 img

圖2 圖標按鈕 img

圖3 圖標和文本共同組成的按鈕 img

創(chuàng)建Button

使用 Button 組件，可以生成形狀、顏色豐富的按鈕。

  1. <Button    
  2.     ohos:id="$+id:button_sample"
  3.     ohos:width="match_content"
  4.     ohos:height="match_content"
  5.     ohos:text_size="27fp"
  6.     ohos:text="button"
  7.     ohos:background_element="$graphic:button_element"
  8.     ohos:left_margin="15vp"
  9.     ohos:bottom_margin="15vp"
  10.     ohos:right_padding="8vp"
  11.     ohos:left_padding="8vp"
  12.     ohos:element_left="$graphic:ic_btn_reload"

button_element.xml：

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

img

響應點擊事件

按鈕的重要作用是當用戶單擊按鈕時，會執(zhí)行相應的操作或者界面出現(xiàn)相應的變化。實際上用戶點擊按鈕時，Button 對象將收到一個點擊事件。 開發(fā)者可以自定義響應點擊事件的方法。例如，通過創(chuàng)建一個 Component.ClickedListener 對象，然后通過調(diào)用 setClickedListener 將其分配給按鈕。

  1. //從定義的xml中獲取Button對象
  2. Button button = (Button) rootLayout.findComponentById(ResourceTable.Id_button_sample); 
  3. // 為按鈕設置點擊事件回調(diào)
  4. button.setClickedListener(new Component.ClickedListener() {
  5.     public void onClick(Component v) {
  6.         // 此處添加點擊按鈕后的事件處理邏輯
  7.     }
  8. });

不同類型的按鈕

按照按鈕的形狀，按鈕可以分為：普通按鈕，橢圓按鈕，膠囊按鈕，圓形按鈕等。

  • 普通按鈕

img

普通按鈕和其他按鈕的區(qū)別在于不需要設置任何形狀，只設置文本和背景顏色即可，例如：

  1.   <Button
  2.     ohos:width="150vp"
  3.     ohos:height="50vp"
  4.     ohos:text_size="27fp"
  5.     ohos:text="button"
  6.     ohos:background_element="$graphic:color_blue_element"
  7.     ohos:left_margin="15vp"
  8.     ohos:bottom_margin="15vp"
  9.     ohos:right_padding="8vp"
  10.     ohos:left_padding="8vp"
  11.   />

color_blue_element.xml：

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#FF007DFF"/>
  6.   </shape>

  • 橢圓按鈕

img

橢圓按鈕是通過設置 background_element 的來實現(xiàn)的，background_element 的shape 設置為橢圓（oval），例如：

  1.   <Button
  2.     ohos:width="150vp"
  3.     ohos:height="50vp"
  4.     ohos:text_size="27fp"
  5.     ohos:text="button"
  6.     ohos:background_element="$graphic:oval_button_element"
  7.     ohos:left_margin="15vp"
  8.     ohos:bottom_margin="15vp"
  9.     ohos:right_padding="8vp"
  10.     ohos:left_padding="8vp"
  11.     ohos:element_left="$graphic:ic_btn_reload"
  12.   />

oval_button_element.xml:

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="oval">
  4.     <solid
  5.         ohos:color="#FF007DFF"/>
  6.   </shape>

  • 膠囊按鈕

img

膠囊按鈕是一種常見的按鈕，設置按鈕背景時將背景設置為矩形形狀，并且設置 ShapeElement 的 radius 的半徑，例如：

  1.   <Button
  2.     ohos:id="$+id:button"
  3.     ohos:width="match_content"
  4.     ohos:height="match_content"
  5.     ohos:text_size="27fp"
  6.     ohos:text="button"
  7.     ohos:background_element="$graphic:capsule_button_element"
  8.     ohos:left_margin="15vp"
  9.     ohos:bottom_margin="15vp"
  10.     ohos:right_padding="15vp"
  11.     ohos:left_padding="15vp"
  12.   />

capsule_button_element.xml:

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

  • 圓形按鈕

img

圓形按鈕和橢圓按鈕的區(qū)別在于組件本身的寬度和高度需要相同，例如：

  1.   <Button
  2.     ohos:id="$+id:button4"
  3.     ohos:width="50vp"
  4.     ohos:height="50vp"
  5.     ohos:text_size="27fp"
  6.     ohos:background_element="$graphic:circle_button_element"
  7.     ohos:text="+"
  8.     ohos:left_margin="15vp"
  9.     ohos:bottom_margin="15vp"
  10.     ohos:right_padding="15vp"
  11.     ohos:left_padding="15vp"
  12.   />

circle_button_element.xml:

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="oval">
  4.     <solid
  5.         ohos:color="#FF007DFF"/>
  6.   </shape>

場景示例

利用圓形按鈕，膠囊按鈕，文本組件可以繪制出如下?lián)芴柋P的UI界面。

圖4 界面效果

img

源碼示例：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="match_parent"
  6.     ohos:background_element="$graphic:color_light_gray_element"
  7.     ohos:orientation="vertical">
  8.     <Text
  9.         ohos:width="match_content"
  10.         ohos:height="match_content"
  11.         ohos:text_size="20fp"
  12.         ohos:text="0123456789"
  13.         ohos:background_element="$graphic:green_text_element"
  14.         ohos:text_alignment="center"
  15.         ohos:layout_alignment="horizontal_center"
  16.     />
  17.     <DirectionalLayout
  18.         ohos:width="match_parent"
  19.         ohos:height="match_content"
  20.         ohos:alignment="horizontal_center"
  21.         ohos:orientation="horizontal"
  22.         ohos:top_margin="5vp"
  23.         ohos:bottom_margin="5vp">
  24.         <Button
  25.             ohos:width="40vp"
  26.             ohos:height="40vp"
  27.             ohos:text_size="15fp"
  28.             ohos:background_element="$graphic:green_circle_button_element"
  29.             ohos:text="1"
  30.             ohos:text_alignment="center"
  31.         />
  32.         <Button
  33.             ohos:width="40vp"
  34.             ohos:height="40vp"
  35.             ohos:text_size="15fp"
  36.             ohos:background_element="$graphic:green_circle_button_element"
  37.             ohos:text="2"
  38.             ohos:left_margin="5vp"
  39.             ohos:right_margin="5vp"
  40.             ohos:text_alignment="center"
  41.         />
  42.         <Button
  43.             ohos:width="40vp"
  44.             ohos:height="40vp"
  45.             ohos:text_size="15fp"
  46.             ohos:background_element="$graphic:green_circle_button_element"
  47.             ohos:text="3"
  48.             ohos:text_alignment="center"
  49.         />
  50.     </DirectionalLayout>
  51.     <DirectionalLayout
  52.         ohos:width="match_parent"
  53.         ohos:height="match_content"
  54.         ohos:alignment="horizontal_center"
  55.         ohos:orientation="horizontal"
  56.         ohos:bottom_margin="5vp">
  57.         <Button
  58.             ohos:width="40vp"
  59.             ohos:height="40vp"
  60.             ohos:text_size="15fp"
  61.             ohos:background_element="$graphic:green_circle_button_element"
  62.             ohos:text="4"
  63.             ohos:text_alignment="center"
  64.         />
  65.         <Button
  66.             ohos:width="40vp"
  67.             ohos:height="40vp"
  68.             ohos:text_size="15fp"
  69.             ohos:left_margin="5vp"
  70.             ohos:right_margin="5vp"
  71.             ohos:background_element="$graphic:green_circle_button_element"
  72.             ohos:text="5"
  73.             ohos:text_alignment="center"
  74.         />
  75.         <Button
  76.             ohos:width="40vp"
  77.             ohos:height="40vp"
  78.             ohos:text_size="15fp"
  79.             ohos:background_element="$graphic:green_circle_button_element"
  80.             ohos:text="6"
  81.             ohos:text_alignment="center"
  82.         />
  83.     </DirectionalLayout>
  84.     <DirectionalLayout
  85.         ohos:width="match_parent"
  86.         ohos:height="match_content"
  87.         ohos:alignment="horizontal_center"
  88.         ohos:orientation="horizontal"
  89.         ohos:bottom_margin="5vp">
  90.         <Button
  91.             ohos:width="40vp"
  92.             ohos:height="40vp"
  93.             ohos:text_size="15fp"
  94.             ohos:background_element="$graphic:green_circle_button_element"
  95.             ohos:text="7"
  96.             ohos:text_alignment="center"
  97.         />
  98.         <Button
  99.             ohos:width="40vp"
  100.             ohos:height="40vp"
  101.             ohos:text_size="15fp"
  102.             ohos:left_margin="5vp"
  103.             ohos:right_margin="5vp"
  104.             ohos:background_element="$graphic:green_circle_button_element"
  105.             ohos:text="8"
  106.             ohos:text_alignment="center"
  107.         />
  108.         <Button
  109.             ohos:width="40vp"
  110.             ohos:height="40vp"
  111.             ohos:text_size="15fp"
  112.             ohos:background_element="$graphic:green_circle_button_element"
  113.             ohos:text="9"
  114.             ohos:text_alignment="center"
  115.         />
  116.     </DirectionalLayout>
  117.     <DirectionalLayout
  118.         ohos:width="match_parent"
  119.         ohos:height="match_content"
  120.         ohos:alignment="horizontal_center"
  121.         ohos:orientation="horizontal"
  122.         ohos:bottom_margin="5vp">
  123.         <Button
  124.             ohos:width="40vp"
  125.             ohos:height="40vp"
  126.             ohos:text_size="15fp"
  127.             ohos:background_element="$graphic:green_circle_button_element"
  128.             ohos:text="*"
  129.             ohos:text_alignment="center"
  130.         />
  131.         <Button
  132.             ohos:width="40vp"
  133.             ohos:height="40vp"
  134.             ohos:text_size="15fp"
  135.             ohos:left_margin="5vp"
  136.             ohos:right_margin="5vp"
  137.             ohos:background_element="$graphic:green_circle_button_element"
  138.             ohos:text="0"
  139.             ohos:text_alignment="center"
  140.         />
  141.         <Button
  142.             ohos:width="40vp"
  143.             ohos:height="40vp"
  144.             ohos:text_size="15fp"
  145.             ohos:background_element="$graphic:green_circle_button_element"
  146.             ohos:text="#"
  147.             ohos:text_alignment="center"
  148.         />
  149.     </DirectionalLayout>
  150.     <Button
  151.         ohos:width="match_content"
  152.         ohos:height="match_content"
  153.         ohos:text_size="15fp"
  154.         ohos:text="CALL"
  155.         ohos:background_element="$graphic:green_capsule_button_element"
  156.         ohos:bottom_margin="5vp"
  157.         ohos:text_alignment="center"
  158.         ohos:layout_alignment="horizontal_center"
  159.         ohos:left_padding="10vp"
  160.         ohos:right_padding="10vp"
  161.         ohos:top_padding="2vp"
  162.         ohos:bottom_padding="2vp"
  163.     />
  164. </DirectionalLayout>

color_light_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ffeeeeee"/>
  6. </shape>

green_text_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <corners
  5.         ohos:radius="20"/>
  6.     <stroke
  7.         ohos:width="2"
  8.         ohos:color="#ff008B00"/>
  9.     <solid
  10.         ohos:color="#ffeeeeee"/>
  11. </shape>

green_circle_button_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="oval">
  4.     <stroke
  5.         ohos:width="5"
  6.         ohos:color="#ff008B00"/>
  7.     <solid
  8.         ohos:color="#ffeeeeee"/>
  9. </shape>

green_capsule_button_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <corners
  5.         ohos:radius="100"/>
  6.     <solid
  7.         ohos:color="#ff008B00"/>
  8. </shape>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號