HarmonyOS實(shí)戰(zhàn)—滑動(dòng)事件的坐標(biāo)和返回值
作者：兮動(dòng)人
獲取的這些數(shù)據(jù)其實(shí)都被鴻蒙操作系統(tǒng)封裝到TouchEvent這個(gè)動(dòng)作對(duì)象當(dāng)中，通過動(dòng)作去調(diào)用getPointerPosition 方法，需要傳遞一個(gè)值。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
Table of Contents
1. 滑動(dòng)事件獲取手指位置
2. 獲取按下時(shí)手指的位置(坐標(biāo))
3. 實(shí)現(xiàn)案例：把按下、移動(dòng)、松開的位置分別設(shè)置到文本框當(dāng)中
4. 根據(jù)手指的位置來確定是上、下、左、右哪個(gè)滑動(dòng)
5. 滑動(dòng)事件bug處理
6. onTouchEvent方法的返回值
7. 驗(yàn)證onTouchEvent方法的返回值對(duì)滑動(dòng)事件三個(gè)動(dòng)作的影響
1. 滑動(dòng)事件獲取手指位置
- 滑動(dòng)事件的三個(gè)動(dòng)作：
- 獲取手指的位置就涉及到坐標(biāo)的概念，通過獲取到 x、y、z就可以缺任意一個(gè)點(diǎn)的位置
- 手機(jī)中的坐標(biāo)：
- 除了 x、y軸，還有z軸，在鴻蒙手機(jī)當(dāng)中，完整的坐標(biāo)如下，是一個(gè)立體的三維體系，但平時(shí)z軸用的非常少，一般情況只需考慮x、y軸就行了。
- 結(jié)合滑動(dòng)事件的三個(gè)動(dòng)作和坐標(biāo)來分析滑動(dòng)
2. 獲取按下時(shí)手指的位置(坐標(biāo))
獲取的這些數(shù)據(jù)其實(shí)都被鴻蒙操作系統(tǒng)封裝到TouchEvent這個(gè)動(dòng)作對(duì)象當(dāng)中，通過動(dòng)作去調(diào)用getPointerPosition 方法，需要傳遞一個(gè)值。鴻蒙系統(tǒng)支持多手指的操作，比如：可以用兩個(gè)手指對(duì)圖片進(jìn)行放大或縮小，所以在getPointerPosition需要傳遞一個(gè)索引，一個(gè)手指操作傳遞的值為0，表示要獲取的是第一個(gè)手指的位置，他的位置也是封裝成一個(gè)對(duì)象，再用坐標(biāo)對(duì)象分別獲取到x、y坐標(biāo)。
- //獲取按下時(shí)手指的位置（坐標(biāo)）
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- float x = point.getX();
- float y = point.getY();
- text1.setText(x + "---" + y);
3. 實(shí)現(xiàn)案例：把按下、移動(dòng)、松開的位置分別設(shè)置到文本框當(dāng)中
- 新建項(xiàng)目：ListenerApplication4
ability_main
- 采用默認(rèn)生成的Text文本內(nèi)容，在此基礎(chǔ)上給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
- 采用當(dāng)前類作為實(shí)現(xiàn)類接口的方式編寫
- 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.先找到整個(gè)布局對(duì)象
- DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
- text1 = (Text) findComponentById(ResourceTable.Id_text1);
- //2.給整個(gè)布局添加滑動(dòng)事件
- //當(dāng)我們在整個(gè)布局滑動(dòng)的時(shí)候，就會(huì)調(diào)用本類中的onTouchEvent方法
- //在按下 移動(dòng)、松開的過程，代碼會(huì)不斷去調(diào)用本類中的 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) {
- //參數(shù)1：component表示滑動(dòng)的組件（布局也是一種組件，所以也可以用component表示布局對(duì)象）
- //實(shí)際上此時(shí)代表的就是DirectionalLayout布局對(duì)象，這個(gè)布局是鋪滿整個(gè)屏幕的
- //參數(shù)2：touchEvent表示動(dòng)作對(duì)象（按下、滑動(dòng)、抬起）
- //獲取當(dāng)前手指對(duì)屏幕進(jìn)行操作（按下、滑動(dòng)、抬起）
- int action = touchEvent.getAction();
- // 1：表示按下操作
- // 2：表示松開操作
- // 3. 表示滑動(dòng)/移動(dòng)操作
- if (action == TouchEvent.PRIMARY_POINT_DOWN){
- //只要寫按下時(shí)需要運(yùn)行的代碼即可
- //獲取按下時(shí)手指的位置（坐標(biāo)）
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- float x = point.getX();
- float y = point.getY();
- text1.setText(x + "---" + y);
- }else if (action == TouchEvent.POINT_MOVE){
- //移動(dòng)或滑動(dòng)
- //獲取按下時(shí)手指的位置（坐標(biāo)）
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- float x = point.getX();
- float y = point.getY();
- text1.setText(x + "---" + y);
- }else if (action == TouchEvent.PRIMARY_POINT_UP){
- //松開或抬起
- //獲取按下時(shí)手指的位置（坐標(biāo)）
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- float x = point.getX();
- float y = point.getY();
- text1.setText(x + "---" + y);
- }
- return true;
- }
- }
- 運(yùn)行：
- 按下并且移動(dòng)鼠標(biāo)時(shí)，坐標(biāo)數(shù)值就會(huì)隨著鼠標(biāo)的移動(dòng)而變化
4. 根據(jù)手指的位置來確定是上、下、左、右哪個(gè)滑動(dòng)
首先把按下時(shí)的 x、y 移動(dòng)onTouchEvent方法外面去，因?yàn)槿绻麤]有移動(dòng)外面去，當(dāng)?shù)谝淮伟聪碌臅r(shí)候就會(huì)調(diào)用onTouchEvent方法，接著就會(huì)調(diào)用按下時(shí)的位置，獲取到x、y坐標(biāo)并設(shè)置到文本框里，設(shè)置完以后整個(gè)方法就么有了，獲取完后就從內(nèi)存中消失了，按下時(shí)的x、y的值也就消失了。
所以在方法外定義x、y，因?yàn)楂@取到的是小數(shù)，要定義為float類型
移動(dòng)的位置就不需要獲取了，只要按下和松開的位置進(jìn)行對(duì)比就可以判斷是上、下、左、右的哪個(gè)滑動(dòng)了
- 右滑
- 下滑
- 把上述代碼進(jìn)行如下修改
- 在onTouchEvent方法外定義x、y的位置
- //記錄按下手指的位置
- float startX = 0;
- float startY = 0;
- 在onTouchEvent方法里的if判斷作出如下修改
- if (action == TouchEvent.PRIMARY_POINT_DOWN){
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- startX = point.getX();
- startY = point.getY();
- }else if (action == TouchEvent.POINT_MOVE){
- //移動(dòng)的位置就不需要獲取了，只要按下和松開的位置進(jìn)行對(duì)比就可以判斷是上、下、左、右的哪個(gè)滑動(dòng)了
- }else if (action == TouchEvent.PRIMARY_POINT_UP){
- //松開或抬起
- MmiPoint point = touchEvent.getPointerPosition(0);
- //x、y表示按下時(shí)手指的位置
- float endX = point.getX();
- float endY = point.getY();
- //拿著按下時(shí)的位置跟松開時(shí)手指的位置進(jìn)行比對(duì)
- if (endX > startX){
- text1.setText("右滑");
- }else if (endX < startX){
- text1.setText("左滑");
- }else if (endY > startY){
- text1.setText("下滑");
- }else if (endY < startY) {
- text1.setText("上滑");
- }
- 運(yùn)行：
- 按下后鼠標(biāo)從左往右移動(dòng)，然后松開
- 按下后鼠標(biāo)從右往左移動(dòng)，然后松開
- 按下后鼠標(biāo)從上往下移動(dòng)，然后松開
- 按下后鼠標(biāo)從下往上移動(dòng)，然后松開
- 此時(shí)還有一個(gè)明顯的bug，那就是當(dāng)鼠標(biāo)從最最左邊上面的點(diǎn)到最右邊下面的點(diǎn)，既有下滑也有右滑
5. 滑動(dòng)事件bug處理
- 當(dāng)我們滑動(dòng)的時(shí)候，滑的不直，滑的有點(diǎn)斜
- 斜著滑，可以對(duì)Y變化的范圍(斜的幅度)做一個(gè)規(guī)定，假設(shè)變化為100，如果你滑的時(shí)候變化了超過了100，那就認(rèn)為這是一個(gè)無效的滑動(dòng)，如果沒有超過，才認(rèn)為這是一個(gè)有效的滑動(dòng)
- 解決bug：
添加個(gè)絕對(duì)值，防止兩者大小相減出現(xiàn)復(fù)數(shù)
- 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("上滑");
- }
- 運(yùn)行，當(dāng)斜的幅度超過100時(shí)，就會(huì)認(rèn)為這是個(gè)無效的滑動(dòng)，就不會(huì)顯示這個(gè)滑動(dòng)的動(dòng)作
- 但運(yùn)行斜的幅度不超過100，就會(huì)顯示正確的滑動(dòng)效果
6. onTouchEvent方法的返回值
- 如果為true，表示所有的動(dòng)作都會(huì)觸發(fā)當(dāng)前方法并執(zhí)行對(duì)應(yīng)的代碼
- 如果為false，表示只有一個(gè)動(dòng)作會(huì)觸發(fā)當(dāng)前方法并執(zhí)行對(duì)應(yīng)的代碼，后續(xù)的動(dòng)作就不會(huì)觸發(fā)當(dāng)前方法
- 滑動(dòng)事件的三個(gè)動(dòng)作：按下——>移動(dòng)——>松開，當(dāng)為true時(shí)，這三個(gè)動(dòng)作都會(huì)執(zhí)行onTouchEvent方法并執(zhí)行下面對(duì)應(yīng)的代碼。為false時(shí)，只有按下這個(gè)動(dòng)作會(huì)觸發(fā) onTouchEvent方法并執(zhí)行下面對(duì)應(yīng)的代碼
7. 驗(yàn)證onTouchEvent方法的返回值對(duì)滑動(dòng)事件三個(gè)動(dòng)作的影響
上述代碼不變，onTouchEvent方法改動(dòng)如下：
- 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("移動(dòng)");
- }else if (action == TouchEvent.PRIMARY_POINT_UP){
- text1.setText("松開");
- }
- //如果為true，表示所有的動(dòng)作都會(huì)觸發(fā)當(dāng)前方法并執(zhí)行對(duì)應(yīng)的代碼
- //如果為false，表示只有一個(gè)動(dòng)作會(huì)觸發(fā)當(dāng)前方法并執(zhí)行對(duì)應(yīng)的代碼，后續(xù)的動(dòng)作就不會(huì)觸發(fā)當(dāng)前方法了
- return false;
- }
運(yùn)行后，當(dāng)按下后再移動(dòng)、松開。顯示的文本依賴不變，說明返回值為false，只有按下這個(gè)動(dòng)作會(huì)觸發(fā) onTouchEvent方法并執(zhí)行下面對(duì)應(yīng)的代碼，移動(dòng)、松開都不會(huì)執(zhí)行onTouchEvent方法。
把上面的返回值改為true，運(yùn)行后。發(fā)現(xiàn)文本顯示的值都會(huì)隨著按下、移動(dòng)、松開的動(dòng)作進(jìn)行變化。
所以滑動(dòng)事件一般都寫true。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
責(zé)任編輯：jianghua
來源：
鴻蒙社區(qū)
