【鸿蒙】HarMonyOS的UI组件学习二之拨号界面

打开DevEco studio，选择java语言新建项目

打开Layout布局文件夹，编辑布局文件

该练习使用DirectionalLayout布局嵌套使用，完成手机拨号界面，该界面包含Text和Button组件组成，其效果图如下:

在graphic文件夹中创建Button使用的圆形背景样式background_button_phone.xml，其代码如下:

布局代码如下:

在对应的AbilitySilce类的界面中，使用setUIContent方法加载布局文件，并通过组件的id获得所有组件的对象。给所有数字键添加触摸事件，并监听其按下和弹起状态，完成拨号键盘的功能并随机完成背景颜色按下时的颜色改变。

其java代码如下:

package com.example.hm_phone_java.slice;

import com.example.hm_phone_java.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.multimodalinput.event.KeyEvent;
import ohos.multimodalinput.event.TouchEvent;

import java.util.Random;

public class ButtonAbilitySlice extends AbilitySlice {
    private Button[] buttons=new Button[12];
    private int[] ids={ResourceTable.Id_b1,ResourceTable.Id_b2,
            ResourceTable.Id_b3,ResourceTable.Id_b4,
            ResourceTable.Id_b5,ResourceTable.Id_b6,
            ResourceTable.Id_b7,ResourceTable.Id_b8,
            ResourceTable.Id_b9,ResourceTable.Id_b10,
            ResourceTable.Id_b11,ResourceTable.Id_b12};
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_callphone);
        Text text= (Text) this.findComponentById(ResourceTable.Id_tv_phone);
        //设置自动更改字体大小的范围
        text.setAutoFontSizeRule(70,100,5);
        initButton(text);
    }
    //初始化所有键盘数字按钮
   public void initButton(Text text){
       for (int i = 0; i < buttons.length; i++) {
           buttons[i]= (Button) this.findComponentById(ids[i]);
           //给所有按键设置点击事件
          /* buttons[i].setClickedListener(new Component.ClickedListener() {
               @Override
               public void onClick(Component component) {
                           //Button btn= (Button) component;
                           //text.setText(text.getText()+btn.getText());
               }
           });*/
            //给所有数字按键添加触摸事件
           buttons[i].setTouchEventListener(new Component.TouchEventListener() {
               @Override
               public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
                   ShapeElement se=new ShapeElement();
                   se.setShape(ShapeElement.OVAL);
                   Button btn= (Button) component;
                   //将监听按下和弹起两种事件
                   switch (touchEvent.getAction()){
                       case TouchEvent.PRIMARY_POINT_DOWN:
                           //当有按键被按下，获得该数字键上的数字追加在text文本上，并随机改变背景颜色
                           text.setText(text.getText()+btn.getText());
                           se.setRgbColor(new RgbColor(new Random().nextInt(255),
                                   new Random().nextInt(255),
                                   new Random().nextInt(255)));
                           break;
                       case TouchEvent.PRIMARY_POINT_UP:
                           //当弹起时，恢复数字键默认颜色
                           se.setRgbColor(new RgbColor(198,196,194));
                           break;
                   }
                    btn.setBackground(se);
                   return true;
               }
           });
       }


   }
}

运行效果如下:

（因不能上传录制的效果视频，先截图给大家看一下效果，抱歉不能展示更好的效果体验，请亲自尝试，看到效果）

下一篇 【鸿蒙】HarMonyOS的UI组件学习三之登录页面