Hongmeng App Development (2) ---Button component

table of Contents

Button developed by Hongmeng App

The button is one of the most common components in our development. If the reader has opened the DevEco Studio, the development tool of Hongmeng, press and hold Ctrl to add the Button class, they will find that it inherits from the Text component.

public class Button extends Text

Therefore, it does not have its own XML attributes in Hongmeng, and all its attributes are inherited from the Text component.

Create a Button

Here, like the Text component, we first create the Button component through the XML layout file. The sample code is as follows:

<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"
/>

Here, we have created a rectangular button. The graphic resource file is as follows, only the background color is set to red.

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

After running, the effect is as follows:

Rectangle button

Round button

By setting the graphic resource file, we can also transform the button into a round button similar to a round avatar. The sample code is as follows:

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

However, it should be noted that the button we set here is oval, and the circle is also a kind of oval, but the width and height of the circle are equal. Therefore, we also need to set the Button button width and height to be the same.

<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"
/>

After running, the effect is as follows:

Round button
As for the ellipse, as long as the width and height are not equal, it is an ellipse button.

Round button with no background and border

Here, we still implement a rectangular button, but its 4 corners are rounded transitions and there is no background. The sample code is as follows:

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

Here, we set the width of the border to 2 and red, and set the rounded corners to 100. The button code in the XML layout is as follows:

<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"
/>

After running, the effect is as follows:

Round button

Button click event (actual call interface)

As we all know, the call interface of many of our mobile phones is composed of 12 circular buttons. When we click the button, the corresponding number will be entered into the text box above to form a phone number.

Dial interface


Next, we use this project to fully grasp the actual combat button. code show as below:

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);
    }
}

Here we use the most basic way to obtain controls. When we explain ResourceTable later, we will teach you how to use the loop body to obtain components with similar names.

XML layout file code:

<?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 resource file code:

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