鴻蒙App開發之Button

按鈕是我們開發中最常見的組件之一，如果讀者已經打開鴻蒙開發工具DevEco Studio，按住Ctrl添加Button類，會發現其繼承自Text組件，

public class Button extends Text

所以，其在鴻蒙中是沒有自有的XML屬性的，其所有屬性都繼承自Text組件，

創建一個Button

這里，我們和Text組件一樣，首先通過XML布局檔案進行Button組件的創建，示例代碼如下所示：

<Button
    ohos:id="$+id:test_button"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:element_left="$media:icon"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="30vp"
    ohos:background_element="$graphic:background_ability_main"
    ohos:text="$string:test_button"
    ohos:text_size="40vp"
/>

這里，我們創建了一個長方形的按鈕，graphic資源檔案如下，僅僅設定了其背景的顏色為紅色，

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#FF0000"/>
</shape>

運行之后，效果如下：

圓形按鈕

通過graphic資源檔案的設定，我們還可以將按鈕變換為圓形頭像類似的圓形按鈕，示例代碼如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid
        ohos:color="#FF0000"/>
</shape>

不過，需要注意的是，這里我們設定的按鈕為oval橢圓形，而圓形也是橢圓形的一種，但圓形的寬高相等，所以，我們還需要將Button按鈕寬高設定成一樣，

<Button
    ohos:id="$+id:test_button"
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="30vp"
    ohos:background_element="$graphic:background_ability_main"
    ohos:text="+"
    ohos:text_size="40vp"
/>

運行之后，效果如下：

至于橢圓，只要保證寬高不相等即是橢圓按鈕，

無背景有邊框的圓角按鈕

這里，我們還是實作一個長方形的按鈕，但其4個角是圓角過渡，且沒有背景，示例代碼如下：

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <stroke
        ohos:width="2"
        ohos:color="#FF0000"/>
    <corners
        ohos:radius="100"/>
</shape>

這里，我們設定了邊框的寬度為2，且為紅色，同時設定圓角為100，而XML布局中的按鈕代碼如下所示：

<Button
    ohos:id="$+id:test_button"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="30vp"
    ohos:padding="10vp"
    ohos:background_element="$graphic:background_ability_main"
    ohos:text="$string:test_button"
    ohos:text_size="40vp"
/>

運行之后，效果如下：

按鈕的點擊事件（實戰通話界面）

眾所周知，我們很多手機的通話界面就是12個圓形按鈕組成的按鍵，當我們點擊按鈕的時候，對應的數字就會輸入到上面的文本框中形成電話號碼，

下面，我們通過這個專案來實戰按鈕是否完全掌握，代碼如下：

package com.liyuanjing.idacommunity.slice;
import com.liyuanjing.idacommunity.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    private Button button0;
    private Button button1;
    private Button button2;
    private Button button3;
    private Button button4;
    private Button button5;
    private Button button6;
    private Button button7;
    private Button button8;
    private Button button9;
    private Button button10;
    private Button button11;
    private Text phone_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.button0=(Button)findComponentById(ResourceTable.Id_button_0);
        this.button1=(Button)findComponentById(ResourceTable.Id_button_1);
        this.button2=(Button)findComponentById(ResourceTable.Id_button_2);
        this.button3=(Button)findComponentById(ResourceTable.Id_button_3);
        this.button4=(Button)findComponentById(ResourceTable.Id_button_4);
        this.button5=(Button)findComponentById(ResourceTable.Id_button_5);
        this.button6=(Button)findComponentById(ResourceTable.Id_button_6);
        this.button7=(Button)findComponentById(ResourceTable.Id_button_7);
        this.button8=(Button)findComponentById(ResourceTable.Id_button_8);
        this.button9=(Button)findComponentById(ResourceTable.Id_button_9);
        this.button10=(Button)findComponentById(ResourceTable.Id_button_10);
        this.button11=(Button)findComponentById(ResourceTable.Id_button_11);
        this.phone_text=(Text)findComponentById(ResourceTable.Id_phone_number_text);

        this.phone_text.setClickedListener(this);
        this.button0.setClickedListener(this);
        this.button1.setClickedListener(this);
        this.button2.setClickedListener(this);
        this.button3.setClickedListener(this);
        this.button4.setClickedListener(this);
        this.button5.setClickedListener(this);
        this.button6.setClickedListener(this);
        this.button7.setClickedListener(this);
        this.button8.setClickedListener(this);
        this.button9.setClickedListener(this);
        this.button10.setClickedListener(this);
        this.button11.setClickedListener(this);
    }
    @Override
    public void onClick(Component component) {
        switch (component.getId()){
            case ResourceTable.Id_button_0:
                this.phone_text.setText(this.phone_text.getText()+"0");
                break;
            case ResourceTable.Id_button_1:
                this.phone_text.setText(this.phone_text.getText()+"1");
                break;
            case ResourceTable.Id_button_2:
                this.phone_text.setText(this.phone_text.getText()+"2");
                break;
            case ResourceTable.Id_button_3:
                this.phone_text.setText(this.phone_text.getText()+"3");
                break;
            case ResourceTable.Id_button_4:
                this.phone_text.setText(this.phone_text.getText()+"4");
                break;
            case ResourceTable.Id_button_5:
                this.phone_text.setText(this.phone_text.getText()+"5");
                break;
            case ResourceTable.Id_button_6:
                this.phone_text.setText(this.phone_text.getText()+"6");
                break;
            case ResourceTable.Id_button_7:
                this.phone_text.setText(this.phone_text.getText()+"7");
                break;
            case ResourceTable.Id_button_8:
                this.phone_text.setText(this.phone_text.getText()+"8");
                break;
            case ResourceTable.Id_button_9:
                this.phone_text.setText(this.phone_text.getText()+"9");
                break;
            case ResourceTable.Id_button_10:
                this.phone_text.setText(this.phone_text.getText()+"*");
                break;
            case ResourceTable.Id_button_11:
                this.phone_text.setText(this.phone_text.getText()+"#");
                break;
            case ResourceTable.Id_phone_number_text:
                this.phone_text.setText("");
        }
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

這里我們使用最基本獲取控制元件的方式，后面講解ResourceTable時，教大家如何使用回圈體獲取名稱相近的組件，

XML布局檔案代碼：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:phone_number_text"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:text_size="30vp"
        ohos:layout_alignment="horizontal_center"
        ohos:width="match_content"/>
    <!--第1排按鈕 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:margin="10vp"
        ohos:orientation="horizontal">

        <Button
            ohos:id="$+id:button_1"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="1"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_2"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="2"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_3"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="3"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>
    </DirectionalLayout>
    <!--第2排按鈕 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:margin="10vp"
        ohos:orientation="horizontal">

        <Button
            ohos:id="$+id:button_4"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="4"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_5"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="5"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_6"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="6"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>
    </DirectionalLayout>
    <!--第3排按鈕 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:margin="10vp"
        ohos:orientation="horizontal">
        
        <Button
            ohos:id="$+id:button_7"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="7"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_8"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="8"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_9"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="9"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>
    </DirectionalLayout>
    <!--第4排按鈕 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:margin="10vp"
        ohos:orientation="horizontal">

        <Button
            ohos:id="$+id:button_10"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="*"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_0"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="0"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>

        <Button
            ohos:id="$+id:button_11"
            ohos:height="100vp"
            ohos:width="100vp"
            ohos:text="#"
            ohos:text_size="30vp"
            ohos:left_margin="10vp"
            ohos:background_element="$graphic:background_ability_main"/>
    </DirectionalLayout>
</DirectionalLayout>

graphic:background_ability_main資源檔案代碼：

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <stroke
        ohos:width="2"
        ohos:color="#FF0000"/>
</shape>