HarmonyOS(鸿蒙)——滑动事件之上、下、左、右滑动

简介: HarmonyOS(鸿蒙)——滑动事件之上、下、左、右滑动

本文已收录于专栏


❤️《鸿蒙开发》❤️


欢迎各位关注、三连博主的文章及专栏,每周定期更新1-5篇基础文章,共勉!


目录


一、简述


二、代码实现


2.1 坐标获取


2.2 判断滑动方向


2.3 总结


一、简述

滑动事件有多个步骤组成,它不是一个简单的事件,它需要多个动作来共同完成,滑动根据方向不同分为向上滑动、向下滑动、向左滑动和向右滑动。在现如今移动互联网和短视频等行业的迅猛发展,滑动事件大家都非常的熟悉,尤其是抖音、快手这些快餐式的娱乐小视频,一滑就停不下来。

日常生活中,我们经常使用坐标系来确定位置,在手机中也是如此,手机的坐标系是三维立体空间,分为x、y、z轴,以屏幕左上角为坐标轴原点,水平方向为x轴,竖直方向为y轴,垂直于屏幕方向为z轴。z轴我们平时使用的相对较少

image.png在手机滑动过程中,我们通过记录手指按下时的坐标和松开时手指的坐标,计算坐标的差值就可以判断是属于左滑、右滑、上滑、下滑等操作。由于我们滑动的过程中,不可能完全在保证x或y的坐标不变,也就是说手指比较粗滑动快,无论向左、向右、向上、向下滑动都会有一定的误差,而这个误差范围内我们是可以视为一个方向的滑动,因此滑动是在被允许的区间范围内发生。


注意下面所有的不变,都是在区间范围内的不变,假如被允许的区间是5,起始位置0,那么结束位置在+5和-5这个范围之内滑动,都是可以视为不变的。

左滑:y坐标不变,x坐标变小

右滑:y坐标不变,x坐标变大

下滑:x坐标不变,y坐标变小

上滑:x坐标不变,y坐标变大


二、代码实现

2.1 坐标获取

MainAbilitySlice实现Component.TouchEventListener接口,重写onTouchEvent方法,在onTouchEvent方法中,我们可以通过方法参数TouchEvent对象获取坐标相关信息image.png完整的代码如下,这个代码并未考虑区间范围,只是用来演示坐标的获取

1.package com.liziba.demo.slice;
import com.liziba.demo.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.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;
public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {
    /** 文本组件 */
    Text text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        // 通过id寻找组件对象
        // 1、找到布局对象
        DirectionalLayout layout = (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl);
        // 2、找到文本对象
        text = (Text) this.findComponentById(ResourceTable.Id_text_helloworld);
        // 3、给整个布局DirectionalLayout添加滑动事件
        layout.setTouchEventListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    /**
     * 滑动事件触发后调用的方法
     *
     * @param component     滑动事件触发的组件 -- 这里是DirectionalLayout
     * @param touchEvent    事件的类型,上面有说到三种按下、滑动、抬起,其实有更多,如下所示
     *
     *     public static final int CANCEL = 6;
     *     public static final int HOVER_POINTER_ENTER = 7;
     *     public static final int HOVER_POINTER_EXIT = 9;
     *     public static final int HOVER_POINTER_MOVE = 8;
     *     public static final int NONE = 0;
     *     public static final int OTHER_POINT_DOWN = 4;
     *     public static final int OTHER_POINT_UP = 5;
     *     public static final int POINT_MOVE = 3;
     *     public static final int PRIMARY_POINT_DOWN = 1;
     *     public static final int PRIMARY_POINT_UP = 2;
     *
     * @return
     */
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        // 通过id比较可以验证component组件就是DirectionalLayout
        MmiPoint pointerPosition;
        float x;
        float y;
        int id = component.getId();
        if (id == ResourceTable.Id_dl) {
            // 操作类型
            int action = touchEvent.getAction();
            if (TouchEvent.PRIMARY_POINT_DOWN == action) {
                // 按下操作
                // getPointerPosition()方法的参数指的是手指的索引,可能存在多个手指同时滑动,比如小米手机三个手指头同时向下滑动截屏
                // 目前这里只有一个手指头滑动,所以传入0
                pointerPosition = touchEvent.getPointerPosition(0);
                x = pointerPosition.getX();
                y = pointerPosition.getY();
                text.setText("按下:"+ x + "--" + y);
            } else if (TouchEvent.POINT_MOVE == action) {
                // 滑动操作 过程我们不需要考虑,我们只确定按下时的位置和松开的位置进行比较
                pointerPosition = touchEvent.getPointerPosition(0);
                x = pointerPosition.getX();
                y = pointerPosition.getY();
                text.setText("滑动:"+ x + "--" + y);
            } else if (TouchEvent.PRIMARY_POINT_UP == action) {
                // 松开操作
                pointerPosition = touchEvent.getPointerPosition(0);
                x = pointerPosition.getX();
                y = pointerPosition.getY();
                text.setText("松开:" + x + "--" + y);
            }
        }
        // 返回值需要修改为true
        return true;
    }
}

image.pngimage.pngimage.png2.2 判断滑动方向

此时我们在TouchEvent.PRIMARY_POINT_UP == action操作中去判断x和y的变化,我们需要定义四个变量来分别记录起始的x和y的值和结束的x和y的值。

float startX;float startY;float endX;float endY;

注意这里不能放到方法中,需要提取到类的成员变量。

package com.liziba.demo.slice;
import com.liziba.demo.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.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;
public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {
    /** 文本组件 */
    Text text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        // 通过id寻找组件对象
        // 1、找到布局对象
        DirectionalLayout layout = (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl);
        // 2、找到文本对象
        text = (Text) this.findComponentById(ResourceTable.Id_text_helloworld);
        // 3、给整个布局DirectionalLayout添加滑动事件
        layout.setTouchEventListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    float startX;
    float startY;
    float endX;
    float endY;
    /**
     * 滑动事件触发后调用的方法
     *
     * @param component     滑动事件触发的组件 -- 这里是DirectionalLayout
     * @param touchEvent    事件的类型,上面有说到三种按下、滑动、抬起,其实有更多,如下所示
     *
     * @return
     */
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        // 通过id比较可以验证component组件就是DirectionalLayout
        MmiPoint pointerPosition;
        int id = component.getId();
        if (id == ResourceTable.Id_dl) {
            // 操作类型
            int action = touchEvent.getAction();
            if (TouchEvent.PRIMARY_POINT_DOWN == action) {
                // 按下操作
                // getPointerPosition()方法的参数指的是手指的索引,可能存在多个手指同时滑动,比如小米手机三个手指头同时向下滑动截屏
                // 目前这里只有一个手指头滑动,所以传入0
                pointerPosition = touchEvent.getPointerPosition(0);
                startX = pointerPosition.getX();
                startY = pointerPosition.getY();
            } else if (TouchEvent.POINT_MOVE == action) {
                // 滑动操作 过程我们不需要考虑,我们只确定按下时的位置和松开的位置进行比较
//                pointerPosition = touchEvent.getPointerPosition(0);
//                x = pointerPosition.getX();
//                y = pointerPosition.getY();
//                text.setText("滑动:"+ x + "--" + y);
            } else if (TouchEvent.PRIMARY_POINT_UP == action) {
                // 松开操作
                pointerPosition = touchEvent.getPointerPosition(0);
                endX = pointerPosition.getX();
                endY = pointerPosition.getY();
                // y轴不变,x变大
                if (endY == startY && endX > startX) {
                    text.setText("右滑");
                } else if (endY == startY && endX < startX) {
                    text.setText("左滑");
                } else if (endX == startX && endY < startY) {
                    text.setText("下滑");
                } else if (endX == startX && endY > startY) {
                    text.setText("上滑");
                }
            }
        }
        // 返回值需要修改为true
        return true;
    }
}

image.png

目录
相关文章
|
25天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
68 3
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
10天前
|
监控 UED 开发者
鸿蒙next版开发:订阅应用事件(ArkTS)
在HarmonyOS 5.0中,ArkTS引入了强大的应用事件订阅机制,允许开发者订阅和处理系统或应用级别的事件,这对于监控应用行为、优化用户体验和进行性能分析至关重要。本文详细介绍了如何在ArkTS中订阅应用事件,并提供了示例代码,包括导入模块、创建观察者、设置事件参数等步骤。通过这些方法,开发者可以更智能地管理和响应应用事件。
56 11
|
9天前
|
监控 开发者 UED
鸿蒙5.0版开发:订阅卡死事件(ArkTS)
在HarmonyOS 5.0中,开发者可以通过ArkTS订阅应用的卡死事件,以便在应用卡死时进行处理。本文详细介绍如何在ArkTS中订阅卡死事件,并提供示例代码。通过导入hiAppEvent和hilog模块,设置自定义参数,添加事件观察者,开发者可以监控应用稳定性并在问题发生时快速定位原因。示例代码展示了如何创建按钮订阅卡死事件,并在事件发生时通过回调函数处理和记录日志。
31 5
|
9天前
|
监控 开发者 UED
鸿蒙5.0版开发:订阅资源泄漏事件(ArkTS)
在HarmonyOS 5.0中,资源泄漏是常见问题,尤其在多线程和复杂应用逻辑下。ArkTS提供了hiAppEvent模块来订阅和处理资源泄漏事件,帮助开发者监控和优化应用性能。本文详细介绍了如何在ArkTS中订阅资源泄漏事件,并提供了示例代码。通过导入hiAppEvent和hilog模块,添加事件观察者并实现回调函数,可以在资源泄漏事件发生时进行自定义处理,如记录日志、发送通知或执行资源清理操作。
27 4
|
23天前
|
存储 数据管理 调度
HarmonyOS架构理解:揭开鸿蒙系统的神秘面纱
【10月更文挑战第21天】华为的鸿蒙系统(HarmonyOS)以其独特的分布式架构备受关注。该架构包括分布式软总线、分布式数据管理和分布式任务调度。分布式软总线实现设备间的无缝连接;分布式数据管理支持跨设备数据共享;分布式任务调度则实现跨设备任务协同。这些特性为开发者提供了强大的工具,助力智能设备的未来发展。
74 1
|
25天前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
51 1
|
29天前
|
数据可视化 JavaScript API
HarmonyOS NEXT原生重榜发布-安利一款鸿蒙可视化代码生成器
鸿蒙低代码可视化开发平台是基于华为鸿蒙操作系统构建的创新开发环境,旨在通过简化开发流程、降低技术门槛,加速应用从设计到上线的全过程。它融合了低代码开发的核心理念与鸿蒙系统的技术优势,为开发者提供了一条高效、便捷的应用开发之路。
49 2
|
1月前
|
存储 移动开发 关系型数据库
HarmonyOS 鸿蒙面试第一弹
HarmonyOS 鸿蒙面试第一弹
|
4月前
|
存储 开发框架 安全
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一
HarmonyOS NEXT星河版的应用开发标志着华为分布式操作系统的全新篇章,它聚焦于打造原生精致、易用、流畅、安全、智能和互联的极致体验。开发者可以利用其先进的API和工具集,如DevEco Studio,构建高性能、跨设备无缝协同的应用程序,从而充分利用HarmonyOS的分布式能力,为用户带来一致且丰富的多场景数字生活体验。随着“学习强国”、岚图汽车、中国电信等知名企业和应用的加入,鸿蒙生态正迅速扩展,引领着原生应用开发的新趋势。
197 3
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一