devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

DevEco Studio 的组件布局和事件内容（笔记）_deveco studio 控件和事件

作者：我家小花儿 | 2024-03-12 04:58:01

赞

踩

deveco studio 控件和事件

本文选择的是Java开发模式，不是Js+Java的开发模式

一、组件、布局、事件

组件：屏幕展示出来的元素，文本、按钮、图片等。

布局：组件摆放方式

事件：可以被组件识别的操作

二、事件

常见的有：单击、双击、长按、滑动等

1.单击事件

第一种写法

自己定义实现类

修改ability_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.   <Button
  10.       ohos:id="$+id:but1"
  11.       ohos:height="match_content"
  12.       ohos:width="match_content"
  13.       ohos:text="click me"
  14.       ohos:text_size="100"
  15.       ohos:background_element="red"
  16.       />
  17.  
  18.  
  19. </DirectionalLayout>

为对应的页面写上如下代码

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8.  
  9. public class MainAbilitySlice extends AbilitySlice {
  10.     @Override
  11.     public void onStart(Intent intent) {
  12.         super.onStart(intent);
  13.         super.setUIContent(ResourceTable.Layout_ability_main);
  14.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  15.         but1.setClickedListener((new MyListener()));
  16.  
  17.  
  18.     }
  19.  
  20.     @Override
  21.     public void onActive() {
  22.         super.onActive();
  23.     }
  24.  
  25.     @Override
  26.     public void onForeground(Intent intent) {
  27.         super.onForeground(intent);
  28.     }
  29. }
  30.  
  31. class MyListener implements Component.ClickedListener{
  32.     @Override
  33.     //传入的参数指的是被点击的控件
  34.     public void onClick(Component component){
  35.         Button but = (Button)component;
  36.         but.setText("Clicked");
  37.     }
  38.  
  39.  
  40. }

第二种写法

当前类作为实现类，即上一篇文章中的用法

不过这里将增添一个文本，让其随点击事件而变化

由此可以知，第二种写法可以较方便的控制页面中其他组件。当然，第一种可以改写构造函数来实现。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.   <Text
  10.     ohos:id="$+id:text1"
  11.     ohos:height="match_content"
  12.     ohos:width="match_content"
  13.     ohos:text="Wait"
  14.     ohos:text_size="100"
  15.     />
  16.  
  17.   <Button
  18.     ohos:id="$+id:but1"
  19.     ohos:height="match_content"
  20.     ohos:width="match_content"
  21.     ohos:text="click me"
  22.     ohos:text_size="100"
  23.     ohos:background_element="red"
  24.     />
  25.  
  26.  
  27. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.Text;
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  11.     Text text1 = null;
  12.     @Override
  13.     public void onStart(Intent intent) {
  14.         super.onStart(intent);
  15.         super.setUIContent(ResourceTable.Layout_ability_main);
  16.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  17.         text1 = (Text) findComponentById(ResourceTable.Id_text1);
  18.         but1.setClickedListener(this);
  19.  
  20.  
  21.     }
  22.  
  23.     @Override
  24.     public void onActive() {
  25.         super.onActive();
  26.     }
  27.  
  28.     @Override
  29.     public void onForeground(Intent intent) {
  30.         super.onForeground(intent);
  31.     }
  32.     @Override
  33.     public void onClick(Component component){
  34.         Button but = (Button)component;
  35.         text1.setText("Clicked");
  36.         but.setText("Clicked");
  37.     }
  38. }

第三种写法

匿名内部类

只能使用一次，且外部无法得知。

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice{
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  16.         but1.setClickedListener(new Component.ClickedListener() {
  17.             @Override
  18.             public void onClick(Component component) {
  19.                 Button but = (Button)component;
  20.                 but.setText("Clicked");
  21.             }
  22.         });
  23.     }
  24.  
  25.     @Override
  26.     public void onActive() {
  27.         super.onActive();
  28.     }
  29.  
  30.     @Override
  31.     public void onForeground(Intent intent) {
  32.         super.onForeground(intent);
  33.     }
  34. }

第四种写法

方法引用

需要同接口方法一致，用引用的方法作为接口的实现

onClick

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice{
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  16.         but1.setClickedListener(this::onClick);
  17.     }
  18.  
  19.     @Override
  20.     public void onActive() {
  21.         super.onActive();
  22.     }
  23.  
  24.     @Override
  25.     public void onForeground(Intent intent) {
  26.         super.onForeground(intent);
  27.     }
  28.     public void onClick(Component componet){
  29.         Button btu = (Button)componet;
  30.         btu.setText("Clicked");
  31.  
  32.     }
  33. }

2.双击事件

同理

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.   <Text
  9.     ohos:id="$+id:text1"
  10.     ohos:height="match_content"
  11.     ohos:width="match_content"
  12.     ohos:text="请双击"
  13.     ohos:text_size="100"
  14.     />
  15.   <Button
  16.     ohos:id="$+id:but1"
  17.     ohos:height="match_content"
  18.     ohos:width="match_content"
  19.     ohos:text="按钮"
  20.     ohos:text_size="100"
  21.     ohos:background_element="red"
  22.     />
  23.  
  24.  
  25. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.Text;
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener {
  12.     Text text1 = null;
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  18.         text1 = (Text)findComponentById(ResourceTable.Id_text1);
  19.         but1.setDoubleClickedListener(this);
  20.     }
  21.  
  22.     @Override
  23.     public void onActive() {
  24.         super.onActive();
  25.     }
  26.  
  27.     @Override
  28.     public void onForeground(Intent intent) {
  29.         super.onForeground(intent);
  30.     }
  31.  
  32.     @Override
  33.     public void onDoubleClick(Component component) {
  34.         text1.setText("已双击");
  35.     }
  36. }

3.长按事件

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.Text;
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.LongClickedListener {
  12.     Text text1 = null;
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         Button but1 = (Button)findComponentById(ResourceTable.Id_but1);
  18.         text1 = (Text)findComponentById(ResourceTable.Id_text1);
  19.         but1.setLongClickedListener(this);
  20.         //but1.setLongClickable(false);在绑定事件后，通过该函数可为其能否长按属性进行改变
  21.     }
  22.  
  23.     @Override
  24.     public void onActive() {
  25.         super.onActive();
  26.     }
  27.  
  28.     @Override
  29.     public void onForeground(Intent intent) {
  30.         super.onForeground(intent);
  31.     }
  32.     @Override
  33.     public void onLongClicked(Component component) {
  34.         text1.setText("已长按");
  35.     }
  36. }

4.滑动事件

需要知道按下、移动、松开，即：按下位置、抬起位置

滑动事件获取

我们现在为屏幕滑动事件进行获取

需要先为布局函数准备一个ID

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.*;
  7. import ohos.multimodalinput.event.TouchEvent;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {
  11.     Text text1 = null;
  12.     int count = 0;
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         //1.先找到整个的布局对象
  18.         DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_d1);
  19.         text1 = (Text) findComponentById(ResourceTable.Id_text1);
  20.         //2.为整个布局添加滑动事件
  21.         //在布局上滑动时，就会执行
  22.         //在按下、移动、松开这个过程中，程序会不断执行 onTouchEvent方法
  23.         dl.setTouchEventListener(this);
  24.  
  25.     }
  26.  
  27.     @Override
  28.     public void onActive() {
  29.         super.onActive();
  30.     }
  31.  
  32.     @Override
  33.     public void onForeground(Intent intent) {
  34.         super.onForeground(intent);
  35.     }
  36.  
  37.     @Override
  38.     //参数一是滑动的组件（对象也是一个组件）
  39.     //参数二是动作对象（按下，滑动，抬起）
  40.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  41.        int action = touchEvent.getAction();
  42.        count++;
  43.        switch(action){
  44.             case TouchEvent.PRIMARY_POINT_DOWN:{
  45.                 text1.setText("已按下,\n调用次数："+count);
  46.                 break;
  47.             }
  48.             case TouchEvent.POINT_MOVE:{
  49.                 text1.setText("在移动,\n调用次数："+count);
  50.                 break;
  51.             }
  52.             case TouchEvent.PRIMARY_POINT_UP: {
  53.                 text1.setText("未按下,\n调用次数："+count);
  54.                 break;
  55.             }
  56.             default: {
  57.                 throw new IllegalStateException("Unexpected value: " + action);
  58.             }
  59.         }
  60.         return true;
  61.     }
  62. }

手机的坐标系

以坐上角为原点，竖直向下为Y轴正轴，水平向右为X轴正轴，垂直于屏幕向外为Z轴正轴

  1.  public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  2.        int action = touchEvent.getAction();
  3.        switch(action){
  4.             case TouchEvent.PRIMARY_POINT_DOWN:{
  5.                 //鸿蒙支持多手指操作，0代表第一个手指
  6.                 MmiPoint point = touchEvent.getPointerPosition(0);
  7.                 float x = point.getX();
  8.                 float y = point.getY();
  9.                 text1.setText("("+x+","+y+")");
  10.                 break;
  11.             }
  12.             case TouchEvent.POINT_MOVE:{
  13.                 MmiPoint point = touchEvent.getPointerPosition(0);
  14.                 float x = point.getX();
  15.                 float y = point.getY();
  16.                 text1.setText("("+x+","+y+")");
  17.                 break;
  18.             }
  19.             case TouchEvent.PRIMARY_POINT_UP: {
  20.                 MmiPoint point = touchEvent.getPointerPosition(0);
  21.                 float x = point.getX();
  22.                 float y = point.getY();
  23.                 text1.setText("("+x+","+y+")");
  24.                 break;
  25.             }
  26.             default: {
  27.                 throw new IllegalStateException("Unexpected value: " + action);
  28.             }
  29.         }
  30.         return true;
  31.     }

通过获取点击点和移动点，比较其坐标变化，获取滑动方向

右滑（手指向右移动）：Y轴不变，X轴变大

左滑：Y轴不变，X轴变小

上滑：X轴不变，Y轴变小

下滑：X轴不变，Y轴变大

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.*;
  7. import ohos.multimodalinput.event.MmiPoint;
  8. import ohos.multimodalinput.event.TouchEvent;
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {
  12.     Text text1 = null;
  13.     float startx = 0;
  14.     float starty = 0;
  15.     @Override
  16.     public void onStart(Intent intent) {
  17.         super.onStart(intent);
  18.         super.setUIContent(ResourceTable.Layout_ability_main);
  19.         //1.先找到整个的布局对象
  20.         DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_d1);
  21.         text1 = (Text) findComponentById(ResourceTable.Id_text1);
  22.         //2.为整个布局添加滑动事件
  23.         //在布局上滑动时，就会执行
  24.         //在按下、移动、松开这个过程中，程序会不断执行 onTouchEvent方法
  25.         dl.setTouchEventListener(this);
  26.  
  27.     }
  28.  
  29.     @Override
  30.     public void onActive() {
  31.         super.onActive();
  32.     }
  33.  
  34.     @Override
  35.     public void onForeground(Intent intent) {
  36.         super.onForeground(intent);
  37.     }
  38.  
  39.     @Override
  40.     //参数一是滑动的组件（对象也是一个组件）
  41.     //参数二是动作对象（按下，滑动，抬起）
  42.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  43.        int action = touchEvent.getAction();
  44.        switch(action){
  45.             case TouchEvent.PRIMARY_POINT_DOWN:{
  46.                 //鸿蒙支持多手指操作，0代表第一个手指
  47.                 MmiPoint point = touchEvent.getPointerPosition(0);
  48.                 startx = point.getX();
  49.                 starty = point.getY();
  50.                 text1.setText("已点击");
  51.                 break;
  52.             }
  53.             case TouchEvent.POINT_MOVE:{
  54.                 break;
  55.             }
  56.             case TouchEvent.PRIMARY_POINT_UP: {
  57.                 MmiPoint point = touchEvent.getPointerPosition(0);
  58.                 float endx = point.getX();
  59.                 float endy = point.getY();
  60.                 if(endx>startx) {
  61.                     if(starty>endy){
  62.                         text1.setText("右上滑动");
  63.                     }
  64.                     else if(starty<endy){
  65.                         text1.setText("右下滑动");
  66.                     }
  67.                     else {
  68.                         text1.setText("右滑");
  69.                     }
  70.                 }
  71.                 else if(endx <startx){
  72.                     if(starty>endy){
  73.                         text1.setText("左上滑动");
  74.                     }
  75.                     else if(starty<endy){
  76.                         text1.setText("左下滑动");
  77.                     }
  78.                     else {
  79.                         text1.setText("左滑");
  80.                     }
  81.                 }
  82.                 else{
  83.                     if(starty>endy){
  84.                         text1.setText("上滑");
  85.                     }
  86.                     else if(starty<endy){
  87.                         text1.setText("下滑");
  88.                     }
  89.                     else {
  90.                         text1.setText("未滑动");
  91.                     }
  92.                 }
  93.                 break;
  94.             }
  95.             default: {
  96.                 throw new IllegalStateException("Unexpected value: " + action);
  97.             }
  98.         }
  99.         return true;
  100.     }
  101. }

返回值问题

为true时：表示所有的动作都会触发当前方法并执行对应代码

为false时：只有第一个动作会触发当前方法并执行对应代码，后续不再触发

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/222210?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。