目錄

• 鴻蒙App開發(fā)之Button
• • 創(chuàng)建一個(gè)Button
  • • 圓形按鈕
    • 無(wú)背景有邊框的圓角按鈕
  • 按鈕的點(diǎn)擊事件（實(shí)戰(zhàn)通話界面）

鴻蒙App開發(fā)之Button

按鈕是我們開發(fā)中最常見的組件之一，如果讀者已經(jīng)打開鴻蒙開發(fā)工具DevEco Studio，按住Ctrl添加Button類，會(huì)發(fā)現(xiàn)其繼承自Text組件。

public class Button extends Text

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

創(chuàng)建一個(gè)Button

這里，我們和Text組件一樣，首先通過(guò)XML布局文件進(jìn)行Button組件的創(chuàng)建。示例代碼如下所示：

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

這里，我們創(chuàng)建了一個(gè)長(zhǎng)方形的按鈕。graphic資源文件如下，僅僅設(shè)置了其背景的顏色為紅色。

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

運(yùn)行之后，效果如下：

圓形按鈕

通過(guò)graphic資源文件的設(shè)置，我們還可以將按鈕變換為圓形頭像類似的圓形按鈕。示例代碼如下：

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

不過(guò)，需要注意的是，這里我們?cè)O(shè)置的按鈕為oval橢圓形，而圓形也是橢圓形的一種，但圓形的寬高相等。所以，我們還需要將Button按鈕寬高設(shè)置成一樣。

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

運(yùn)行之后，效果如下：

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

無(wú)背景有邊框的圓角按鈕

這里，我們還是實(shí)現(xiàn)一個(gè)長(zhǎng)方形的按鈕，但其4個(gè)角是圓角過(guò)渡，且沒有背景。示例代碼如下：

<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><strokeohos:width="2"ohos:color="#FF0000"/><cornersohos:radius="100"/> </shape>

這里，我們?cè)O(shè)置了邊框的寬度為2，且為紅色，同時(shí)設(shè)置圓角為100。而XML布局中的按鈕代碼如下所示：

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

運(yùn)行之后，效果如下：

按鈕的點(diǎn)擊事件（實(shí)戰(zhàn)通話界面）

眾所周知，我們很多手機(jī)的通話界面就是12個(gè)圓形按鈕組成的按鍵。當(dāng)我們點(diǎn)擊按鈕的時(shí)候，對(duì)應(yīng)的數(shù)字就會(huì)輸入到上面的文本框中形成電話號(hào)碼。

下面，我們通過(guò)這個(gè)項(xiàng)目來(lái)實(shí)戰(zhàn)按鈕是否完全掌握。代碼如下：

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;@Overridepublic 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);}@Overridepublic 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("");}}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);} }

這里我們使用最基本獲取控件的方式，后面講解ResourceTable時(shí)，教大家如何使用循環(huán)體獲取名稱相近的組件。

XML布局文件代碼：

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Textohos: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排按鈕 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos: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"/><Buttonohos: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"/><Buttonohos: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排按鈕 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos: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"/><Buttonohos: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"/><Buttonohos: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排按鈕 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos: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"/><Buttonohos: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"/><Buttonohos: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排按鈕 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos: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"/><Buttonohos: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"/><Buttonohos: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資源文件代碼：

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

總結(jié)

以上是生活随笔為你收集整理的鸿蒙开发（2）---Button组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。