鸿蒙开发(2)---Button组件

简介: 鸿蒙开发(2)---Button组件

鸿蒙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>
相关文章
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
60 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
49 1
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
43 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
60 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
75 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
72 2
|
12天前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
67 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
181 0
|
12天前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
62 3
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
32 1