手势操作原理

曾经终败给现在 2024-04-01 18:16 49阅读 0赞

#### 文件目录 ####

*  一、学习要点
 *  二、案例演示：利用手势切换图片
 *   *  1、创建安卓应用
     *  2、准备图片素材
     *  3、字符串资源文件
     *  4、主布局文件
     *  5、主界面类

--------------------

## 一、学习要点 ##

1.  能理解手势操作原理
2.  能利用手势操作实现切换功能

## 二、案例演示：利用手势切换图片 ##

### 1、创建安卓应用 ###

*  基于`Empty Activity`模板创建 - `SwtichBelleImageByGesture`  
    ![在这里插入图片描述][8b03d29764694b8db8a440a6cfac30fd.png]  
    ![在这里插入图片描述][f599ece6304545fc9ec18b7decd9686f.png]  
    ![在这里插入图片描述][d5796957b3184ac38806397fc12a4fcb.png]

### 2、准备图片素材 ###

![在这里插入图片描述][6d4f6ed472d24c0692d49676ef20e1e8.png]

*  拷贝到`drawable`目录中  
    ![在这里插入图片描述][3bd5f8139e1345209497ede3e9a611c2.png]

### 3、字符串资源文件 ###

![在这里插入图片描述][8444e48b60c847ddb79cec2b19415a2c.png]

<resources>
        <string name="app_name">通过手势切换图片</string>
    </resources>

### 4、主布局文件 ###

![在这里插入图片描述][a0d5ae3427fb4e1a98c32c70d27d191c.png]

*  修改布局方式，设置相关属性  
    ![在这里插入图片描述][c6067b427b8f4c5bae23af040bc0eb27.png]
 *  查看效果  
    ![在这里插入图片描述][ceaced91aadb4c78a950c112d6410f1c.png]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img1"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
    </LinearLayout>

### 5、主界面类 ###

*  MainActivity  
    ![在这里插入图片描述][532517bf8e8f4c28ade0d406326d7a55.png]
 *  定义常量和变量  
    ![在这里插入图片描述][c7fe40f1c0684f0f9dff14c15dd340eb.png]
 *  通过资源标识符获取控件实例  
    ![在这里插入图片描述][09f77ddfb49648339e6dc6b4684e0440.png]
 *  初始化图像资源标识符数组  
    ![在这里插入图片描述][0729280ebf0b4991b467f95756318ad6.png]
 *  实例化手势侦测器，每个事件处理方法输出一条调试信息  
    ![在这里插入图片描述][c2abc64a984e41f4af5a418e33caf83f.png]
 *  通过手势切换图片  
    ![在这里插入图片描述][e8f785f9e9754e11bd982f9d152c87c5.png]
 *  将窗口的触摸事件交给手势侦测器来处理  
    ![在这里插入图片描述][0db409e7cfa5428ba472630ab68ff549.png]

package net.hxl.switch_belle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.util.Log;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity {
        
        // 定义常量和变量
        private LinearLayout root; // 定义线性根布局
        private int[] imgIds;// 图像资源标识符数组
        private int imgIndex;// 图像索引，在图像资源标识符数组的位置
        private final int IMG_COUNT = 10;// 图像总数
        private GestureDetector detector;// 手势侦测器
        private final String TAG = "switch_belle";// 标记
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            // 通过资源标识符获取控件实例
            root = findViewById(R.id.root);
    
            // 初始化图像资源标识符数组
            imgIds = new int[IMG_COUNT];
            for (int i = 0;i < IMG_COUNT;i++){
        
                imgIds[i] = getResources().getIdentifier(
                      "img" + (i + 1),//标识符名称
                        "drawable",//定义类型
                        "net.hxl.switch_belle"//定义包名
                );
            }
    
            // 实例化手势侦测器(参数1：上下文，参数2：手势监听器对象)
            detector = new GestureDetector(this,new GestureDetector.OnGestureListener() {
        
                @Override
                public boolean onDown(MotionEvent e) {
        
                    Log.d(TAG,"onDown event invoked");
                    return false;
                }
    
                @Override
                public void onShowPress(MotionEvent e) {
        
                    Log.d(TAG,"onShowPress event invoked");
    
                }
    
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
        
                    Log.d(TAG,"onSingleTapUp event invoked");
                    return false;
                }
    
                @Override
                public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        
                    Log.d(TAG,"onScroll event invoked");
                    return false;
                }
    
                @Override
                public void onLongPress(MotionEvent e) {
        
                    Log.d(TAG,"onLongPress event invoked");
                }
    
                @Override
                public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        
                    Log.d(TAG,"onFling event invoked");
                    // 手势往左滑动20个以上像素，图片切换到下一张
                    if(e2.getX() < e1.getX() - 5){
        
                        if(imgIndex < IMG_COUNT - 1){
        
                            imgIndex++;// 切换到下一张
                        }else {
        
                            imgIndex = 0;// 回到第一张
                        }
                    }
                    // 手势往右滑动20个以上像素，图片切换到上一张
                    if(e2.getX() > e1.getX() + 5){
        
                        if(imgIndex > 0){
        
                            imgIndex--;//切换到上一张
                        }else {
        
                            imgIndex = IMG_COUNT - 1 ;// 切换到最后一张
                        }
                    }
                    // 根据新索引切换跟布局背景图片
                    root.setBackgroundResource(imgIds[imgIndex]);
                    return false;
                }
            });
        }
        // 将窗口触摸事件交给手势侦测器来处理
        @Override
        public boolean onTouchEvent(MotionEvent event) {
        
            return detector.onTouchEvent(event);
        }
    }

6、 启动应用，查看效果

*  左右滑动来切换图片  
    ![在这里插入图片描述][a4e549d116f74819a298ef4180beab5a.gif]

[8b03d29764694b8db8a440a6cfac30fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9da930e0ab5043abac4cd6746624f94e.png
[f599ece6304545fc9ec18b7decd9686f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/56c8e1a185c449959dfddc5a9bd884f5.png
[d5796957b3184ac38806397fc12a4fcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7462bd386e1642f58104340470d3a078.png
[6d4f6ed472d24c0692d49676ef20e1e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d68876c38c844677b277d177e10c8028.png
[3bd5f8139e1345209497ede3e9a611c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/66bdf4262f1a44248a4e49eb364399f9.png
[8444e48b60c847ddb79cec2b19415a2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b7a2cf200d0d4a2d8806267ea9da112b.png
[a0d5ae3427fb4e1a98c32c70d27d191c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f5c07021a56142308ce92112405c2d98.png
[c6067b427b8f4c5bae23af040bc0eb27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/40f6feb2a57d4d2291269aeec1b8984c.png
[ceaced91aadb4c78a950c112d6410f1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd8957b9e49b4102ac16c8a166abf192.png
[532517bf8e8f4c28ade0d406326d7a55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fe2325117d7c47dc9db4375595570504.png
[c7fe40f1c0684f0f9dff14c15dd340eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/833ad9210a274b97999522a77b0593d2.png
[09f77ddfb49648339e6dc6b4684e0440.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8aaca03091664ac5957e99f35675aa48.png
[0729280ebf0b4991b467f95756318ad6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d28c990df6cb4207ad89ac6d76e742eb.png
[c2abc64a984e41f4af5a418e33caf83f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1ebc1891e86d4990b5e64e0873d9ab03.png
[e8f785f9e9754e11bd982f9d152c87c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fcc57d060aac400da8d3e0e73f154edd.png
[0db409e7cfa5428ba472630ab68ff549.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9712d244edac45029d976ef7758af25c.png
[a4e549d116f74819a298ef4180beab5a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e2152d2267634c15ab2fbd2092cbea26.gif