HarmonyOS实战—滑动事件的坐标和返回值

简介: HarmonyOS实战—滑动事件的坐标和返回值

1. 滑动事件获取手指位置

  • 滑动事件的三个动作:

在这里插入图片描述

  • 获取手指的位置就涉及到坐标的概念,通过获取到 x、y、z就可以缺任意一个点的位置

在这里插入图片描述

  • 手机中的坐标:

在这里插入图片描述

  • 除了 x、y轴,还有z轴,在鸿蒙手机当中,完整的坐标如下,是一个立体的三维体系,但平时z轴用的非常少,一般情况只需考虑x、y轴就行了。

在这里插入图片描述

  • 结合滑动事件的三个动作坐标来分析滑动

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2. 获取按下时手指的位置(坐标)

  • 获取的这些数据其实都被鸿蒙操作系统封装到TouchEvent这个动作对象当中,通过动作去调用getPointerPosition 方法,需要传递一个值。鸿蒙系统支持多手指的操作,比如:可以用两个手指对图片进行放大或缩小,所以在getPointerPosition需要传递一个索引,一个手指操作传递的值为0,表示要获取的是第一个手指的位置,他的位置也是封装成一个对象,再用坐标对象分别获取到x、y坐标。
    //获取按下时手指的位置(坐标)
    MmiPoint point = touchEvent.getPointerPosition(0);
    //x、y表示按下时手指的位置
    float x = point.getX();
    float y = point.getY();
    text1.setText(x + "---" + y);

3. 实现案例:把按下、移动、松开的位置分别设置到文本框当中

  • 新建项目:ListenerApplication4

ability_main

  • 采用默认生成的Text文本内容,在此基础上给DirectionalLayout布局和Text组件分别加上id
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    ohos:id="$+id:dl"
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_size="40vp"
        />

</DirectionalLayout>

MainAbilitySlice

  • 采用当前类作为实现类接口的方式编写
package com.xdr630.listenerapplication.slice;

import com.xdr630.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.multimodalinput.event.TouchEvent;

public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {

    Text text1 = null;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.先找到整个布局对象
        DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
        text1 = (Text) findComponentById(ResourceTable.Id_text1);

        //2.给整个布局添加滑动事件
        //当我们在整个布局滑动的时候,就会调用本类中的onTouchEvent方法
        //在按下 移动、松开的过程,代码会不断去调用本类中的 onTouchEvent方法
        dl.setTouchEventListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        //参数1:component表示滑动的组件(布局也是一种组件,所以也可以用component表示布局对象)
        //实际上此时代表的就是DirectionalLayout布局对象,这个布局是铺满整个屏幕的
        //参数2:touchEvent表示动作对象(按下、滑动、抬起)

        //获取当前手指对屏幕进行操作(按下、滑动、抬起)
        int action = touchEvent.getAction();
        // 1:表示按下操作
        // 2:表示松开操作
        // 3. 表示滑动/移动操作

        if (action == TouchEvent.PRIMARY_POINT_DOWN){
            //只要写按下时需要运行的代码即可
            //获取按下时手指的位置(坐标)
            MmiPoint point = touchEvent.getPointerPosition(0);
            //x、y表示按下时手指的位置
            float x = point.getX();
            float y = point.getY();
            text1.setText(x + "---" + y);
        }else if (action == TouchEvent.POINT_MOVE){
            //移动或滑动
            //获取按下时手指的位置(坐标)
            MmiPoint point = touchEvent.getPointerPosition(0);
            //x、y表示按下时手指的位置
            float x = point.getX();
            float y = point.getY();
            text1.setText(x + "---" + y);
        }else if (action == TouchEvent.PRIMARY_POINT_UP){
            //松开或抬起
           //获取按下时手指的位置(坐标)
            MmiPoint point = touchEvent.getPointerPosition(0);
            //x、y表示按下时手指的位置
            float x = point.getX();
            float y = point.getY();
            text1.setText(x + "---" + y);
        }
        return true;
    }
}
  • 运行:

在这里插入图片描述

  • 按下并且移动鼠标时,坐标数值就会随着鼠标的移动而变化

在这里插入图片描述

4. 根据手指的位置来确定是上、下、左、右哪个滑动

  • 首先把按下时的 x、y 移动onTouchEvent方法外面去,因为如果没有移动外面去,当第一次按下的时候就会调用onTouchEvent方法,接着就会调用按下时的位置,获取到x、y坐标并设置到文本框里,设置完以后整个方法就么有了,获取完后就从内存中消失了,按下时的x、y的值也就消失了。
  • 所以在方法外定义x、y,因为获取到的是小数,要定义为float类型

在这里插入图片描述

  • 移动的位置就不需要获取了,只要按下和松开的位置进行对比就可以判断是上、下、左、右的哪个滑动了
  • 右滑

在这里插入图片描述

  • 下滑

在这里插入图片描述

  • 把上述代码进行如下修改
  • onTouchEvent方法外定义x、y的位置

在这里插入图片描述

    //记录按下手指的位置
    float startX = 0;
    float startY = 0;
  • onTouchEvent方法里的if判断作出如下修改
    if (action == TouchEvent.PRIMARY_POINT_DOWN){
        MmiPoint point = touchEvent.getPointerPosition(0);
        //x、y表示按下时手指的位置
        startX = point.getX();
        startY = point.getY();
    }else if (action == TouchEvent.POINT_MOVE){
        //移动的位置就不需要获取了,只要按下和松开的位置进行对比就可以判断是上、下、左、右的哪个滑动了
    }else if (action == TouchEvent.PRIMARY_POINT_UP){
        //松开或抬起
        MmiPoint point = touchEvent.getPointerPosition(0);
        //x、y表示按下时手指的位置
        float endX = point.getX();
        float endY = point.getY();
        //拿着按下时的位置跟松开时手指的位置进行比对
        if (endX > startX){
            text1.setText("右滑");
        }else if (endX < startX){
            text1.setText("左滑");
        }else if (endY > startY){
            text1.setText("下滑");
        }else if (endY < startY) {
            text1.setText("上滑");
        }
  • 运行:

在这里插入图片描述

  • 按下后鼠标从左往右移动,然后松开

在这里插入图片描述

  • 按下后鼠标从右往左移动,然后松开

在这里插入图片描述

  • 按下后鼠标从上往下移动,然后松开

在这里插入图片描述

  • 按下后鼠标从下往上移动,然后松开

在这里插入图片描述

  • 此时还有一个明显的bug,那就是当鼠标从最最左边上面的点到最右边下面的点,既有下滑也有右滑

5. 滑动事件bug处理

  • 当我们滑动的时候,滑的不直,滑的有点斜
  • 斜着滑,可以对Y变化的范围(斜的幅度)做一个规定,假设变化为100,如果你滑的时候变化了超过了100,那就认为这是一个无效的滑动,如果没有超过,才认为这是一个有效的滑动

在这里插入图片描述

  • 解决bug:

添加个绝对值,防止两者大小相减出现复数

    if (endX > startX && Math.abs(endY - startY) < 100){
        text1.setText("右滑");
    }else if (endX < startX && Math.abs(endY - startY) < 100){
        text1.setText("左滑");
    }else if (endY > startY && Math.abs(endX - startX) < 100){
        text1.setText("下滑");
    }else if (endY < startY && Math.abs(endX - startX) < 100) {
        text1.setText("上滑");
    }
  • 运行,当斜的幅度超过100时,就会认为这是个无效的滑动,就不会显示这个滑动的动作
  • 但运行斜的幅度不超过100,就会显示正确的滑动效果

在这里插入图片描述

6. onTouchEvent方法的返回值

  • 如果为true,表示所有的动作都会触发当前方法并执行对应的代码
  • 如果为false,表示只有一个动作会触发当前方法并执行对应的代码,后续的动作就不会触发当前方法
  • 滑动事件的三个动作:按下——>移动——>松开,当为true时,这三个动作都会执行onTouchEvent方法并执行下面对应的代码。为false时,只有按下这个动作会触发 onTouchEvent方法并执行下面对应的代码

7. 验证onTouchEvent方法的返回值对滑动事件三个动作的影响

  • 上述代码不变,onTouchEvent方法改动如下:
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {

        count++;

        int action = touchEvent.getAction();
        
        if (action == TouchEvent.PRIMARY_POINT_DOWN){
            text1.setText("按下");
        }else if (action == TouchEvent.POINT_MOVE){
            text1.setText("移动");
        }else if (action == TouchEvent.PRIMARY_POINT_UP){
            text1.setText("松开");
        }
        //如果为true,表示所有的动作都会触发当前方法并执行对应的代码
        //如果为false,表示只有一个动作会触发当前方法并执行对应的代码,后续的动作就不会触发当前方法了
        return false;
    }
  • 运行后,当按下后再移动、松开。显示的文本依赖不变,说明返回值为false,只有按下这个动作会触发 onTouchEvent方法并执行下面对应的代码,移动、松开都不会执行onTouchEvent方法。

在这里插入图片描述

  • 把上面的返回值改为true,运行后。发现文本显示的值都会随着按下、移动、松开的动作进行变化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 所以滑动事件一般都写true
目录
相关文章
|
11天前
|
JavaScript API 数据处理
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0(Next)中实现渐变模糊效果,涵盖从基础页面搭建到添加模糊、渐变效果的全过程,并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果,接着通过`linearGradient`属性融入渐变效果,使界面更加精致美观。此外,还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果,增强用户体验。最后,通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果,突显HarmonyOS的强大功能与灵活性。
67 17
|
12天前
|
数据管理 API 调度
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统,专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例,全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性,并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用,展示分布式能力的实际应用,涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外,深入分析分布式数据同步原理、任务调度优化及常见问题解决方案,帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
138 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
|
4天前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
11天前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
75 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
11天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
97 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
7天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
70 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
9天前
【HarmonyOS Next开发】使用两层Scroll实现一天时间轴和事件卡片的层叠显示
实现某一天24小时的时间长度和当天事件的页面。
47 9
|
11天前
|
人工智能 安全 数据安全/隐私保护
HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】
本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。
115 9
|
1天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
61 47
Harmony OS开发-ArkTS语言速成二
|
3天前
|
API 索引
鸿蒙开发:实现一个超简单的网格拖拽
实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。
56 13
鸿蒙开发:实现一个超简单的网格拖拽

热门文章

最新文章