安卓触摸动作

àì夳堔傛蜴生んèń 2024-04-01 18:16 113阅读 0赞

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

*  一、学习要点
 *  二、案例演示1:拖动图片
 *   *  1、创建安卓应用
     *  2、准备图片素材
     *  3、字符串资源文件
     *  4、主布局资源文件
     *  5、主界面类
 *  三、案例演示1:通过多点触缩放图片
 *   *  1、创建安卓应用
     *  2、准备图片素材
     *  3、字符串资源文件
     *  4、主布局文件
     *  5、主界面类
     *  6、运行程序，查看结果

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

## 一、学习要点 ##

1.  安卓触摸动作
2.  触摸监听器与方法
3.  单点触摸与多点触摸

## 二、案例演示1:拖动图片 ##

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

*  基于`Empty Activity`模板创建- `MoveMickeyByTouch`  
    ![在这里插入图片描述][65812fe53dee4595a3663c82a1eb803a.png]  
    ![在这里插入图片描述][ecf6b58bf4344b99bcd2430848f4faee.png]  
    ![在这里插入图片描述][b619990eb41d44a18982e729c134b91d.png]

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

*  拷贝到`drawable`目录里  
    ![在这里插入图片描述][9fdff07e594147f0835a5cd8b2e1bb7e.png]  
    ![在这里插入图片描述][745c7106ef704b979a2ff9e9dbba2584.png]

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

*  `strings.xml`  
    ![在这里插入图片描述][688e785bda8d4257895cd9e453ab44be.png]

<resources>
        <string name="app_name">通过触摸移动图片</string>
    </resources>

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

*  `activity_main.xml`  
    ![在这里插入图片描述][bd8fb0f44123489f88d8ab395e7db075.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/background"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/iv_mickey"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:background="@drawable/mickey"/>
    
    
    </LinearLayout>

*  预览效果  
    ![在这里插入图片描述][cb9f1161dc874418a9de20e618db0ae7.png]

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

*  `MainActivity`  
    ![在这里插入图片描述][b24068542fa941b7a9485d5671d22ce4.png]
 *  声明变量和常量  
    ![在这里插入图片描述][f63ce4bf3c894dcda5a08ed41c84ce40.png]
 *  通过资源标识符获取控件实例  
    ![在这里插入图片描述][c9a56180af7847e39cc8f721a27d82ae.png]
 *  获取焦点  
    ![在这里插入图片描述][143fdbb9b317455fb9b5ebb766ad93fa.png]
 *  获取图像控件的布局参数  
    ![在这里插入图片描述][9b9fc90572554a39a6b6a0cd782e8294.png]
 *  给线性根布局注册触摸监听器  
    ![在这里插入图片描述][fcb874aa2c7c41f1a46ded983d6cca7a.png]
 *  在模拟器屏幕上，按下鼠标，移动鼠标，放开鼠标，在LogCat里可以看到图片有三种动作及坐标  
    ![在这里插入图片描述][c8b3fda0e6b34871ab2853f9ddb3f1f0.png]
 *  将c触点是改到图片的中央  
    ![在这里插入图片描述][a345b2eaf6f24c1f855a6b9b52bd805c.png]
 *  修改前  
    ![在这里插入图片描述][f300084357cd4c06b95e973f0c73bdf9.gif]
 *  修改后  
    ![在这里插入图片描述][7d8a4d71fa2248608c3258b9d79bde39.gif]

package net.hxl.move_mickey_by_touch;
    
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.media.Image;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity {
        
        // 声明变量
        private ImageView ivMickey;//米老鼠图像控件
        private LinearLayout root;//线性根布局
        private LinearLayout.LayoutParams layoutParams;//布局参数
        private static final String TAG = "move_mickey_by_touch";//标记常量
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            // 通过资源标识符获取控件实例
            root = findViewById(R.id.root);
            ivMickey = findViewById(R.id.iv_mickey);
    
            // 让跟布局获取焦点
            root.setFocusable(true);
            root.requestFocus();//请求获取焦点
    
            // 获取米老鼠图像控件的布局参数
            layoutParams = (LinearLayout.LayoutParams) ivMickey.getLayoutParams();
    
            // 给线性根布局注册触摸监听器，实现触摸监听器接口，编写触摸事件代码
            root.setOnTouchListener(new View.OnTouchListener() {
        
                @Override
                public boolean onTouch(View v, MotionEvent event) {
        
                    // 根据不同的触摸动作执行不同的操作
                    switch (event.getAction()){
        
                        case MotionEvent.ACTION_DOWN: // 0，触点按下
                            //调试信息输出触点坐标
                            Log.d(TAG,"ACTION_DOWN(" + event.getX() + "," + event.getY() + ")");
                            break;
                        case MotionEvent.ACTION_MOVE: // 2，触点移动
                            //调试信息输出触点坐标
                            Log.d(TAG,"ACTION_MOUE(" + event.getX() + "," + event.getY() + ")");
                            break;
                        case MotionEvent.ACTION_UP:   // 1，放开
                            //调试信息输出触点坐标
                            Log.d(TAG,"ACTION_UP(" + event.getX() + "," + event.getY() + ")");
                            break;
                    }
                    // 根据变化的触点坐标来更新米老鼠图像控件的布局参数
                    layoutParams.leftMargin = (int) event.getX() - ivMickey.getWidth() / 2;
                    layoutParams.topMargin = (int) event.getY() - ivMickey.getHeight() / 2;
    
                    //设置米老鼠图像控件的坐标(不用图像控件的布局参数)
    //                ivMickey.setX(event.getX() - ivMickey.getWidth() / 2) ;
    //                ivMickey.setY(event.getY() - ivMickey.getHeight() / 2) ;
    
                    //重新设置米老鼠图像控件的布局参数
                    ivMickey.setLayoutParams(layoutParams);
    
                    return true;//设置为true，三个事件：down-->move-->up才会依次执行
                }
            });
        }
    }

## 三、案例演示1:通过多点触缩放图片 ##

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

*  基于`Empty Activity`模板创建 - `ZoomMickeyByTouch`  
    ![在这里插入图片描述][73119cd955fb46d688a72ce08fdee98d.png]  
    ![在这里插入图片描述][6423e46559c44af2b1cddf97dfd3b021.png]  
    ![在这里插入图片描述][53f7ffe108284fa6afa918de7b2f1b9f.png]

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

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

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

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

*  `strings.xml`  
    ![在这里插入图片描述][e6e05e945db64090b575e89bf2596a73.png]

<resources>
        <string name="app_name">通过多点触摸缩放米老鼠</string>
    </resources>

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

*  `activity_main.xml`  
    ![在这里插入图片描述][34f960c9a1324018ab011057e6e04ee0.png]
 *  修改布局方式，并添加一个图像控件  
    ![在这里插入图片描述][bf12ca8dbc664ec68814514bb08e6805.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/backgroud"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/iv_mickey"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:background="@drawable/mickey"
            android:scaleType="fitXY" />
    
    
    </LinearLayout>

*  预览效果  
    ![在这里插入图片描述][095417d695b44a899787e9eb90718af9.png]

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

*  `MainActivity`  
    ![在这里插入图片描述][017c90bc16774dbd907861ed0f238fcc.png]
 *  声明变量  
    ![在这里插入图片描述][871fae2a8f0b4504baa13595789d4aac.png]
 *  通过资源标识符获取控件实例  
    ![在这里插入图片描述][c0a39fada6df487a8b19adc5aadef57d.png]
 *  让根布局获取焦点  
    ![在这里插入图片描述][ab006261c4514777a5dab2a369be3130.png]
 *  获取图像控件的布局参数  
    ![在这里插入图片描述][c4e8293f1bcf4c9d89b1f11e8d648f08.png]
 *  给根布局注册触摸监听器  
    ![在这里插入图片描述][f23cc060074f4e8a9d40f503dad1090b.png]

package net.hxl.zoom_mickey_by_touch;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity {
        
        //声明变量
        private LinearLayout root;//线性根布局
        private ImageView ivMickey;//米老鼠图片控件
        private float x1,y1;//第一个触点的坐标
        private float x2,y2;//第二个触点的坐标
        private float nextX1,nextY1;//第一个触点的下一个的坐标
        private float nextX2,nextY2;//第二个触点的下一个的坐标
        private float distance;//两个触点之间的距离
        private float nextDistance;//两个触点下一次的距离
        private LinearLayout.LayoutParams layoutParams;//布局参数
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 通过布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            //通过资源标识符获取控件实例
            root = findViewById(R.id.root);
            ivMickey = findViewById(R.id.iv_mickey);
    
            // 让根布局获取焦点
            root.setFocusable(true);
            root.requestFocus();
    
            //获取米老鼠图像控件的布局参数
            layoutParams = (LinearLayout.LayoutParams) ivMickey.getLayoutParams();
    
            // 给跟布局注册触摸监听器，实现触摸监听器接口，编写触摸事件方法
            root.setOnTouchListener(new View.OnTouchListener() {
        
                @Override
                public boolean onTouch(View v, MotionEvent event) {
        
                    // 判断触点个数，决定缩放还是移动
                    if(event.getPointerCount() == 1){
        //单点触摸
                        if(event.getAction() == MotionEvent.ACTION_MOVE){
        
                            // 根据变化的触点坐标再更新米老鼠图像控件的布局参数
                            layoutParams.leftMargin = (int) (event.getX() - ivMickey.getWidth() / 2);
                            layoutParams.topMargin = (int) (event.getY() - ivMickey.getHeight() / 2);
                        }
                    }else if (event.getPointerCount() == 2){
        //两点触摸
                        // 判断触点动作
                        switch (event.getAction()){
        
                            case MotionEvent.ACTION_DOWN:  // 触点摁下
                                // 获取第一个触点的坐标
                                x1 = event.getX(0);
                                y1 = event.getY(0);
                                // 获取第二个触点的坐标
                                x2 = event.getX(1);
                                y2 = event.getY(1);
                                // 获取两个出点之间的距离
                                distance = (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2)*(y1 - y2));
                                break;
                            case MotionEvent.ACTION_MOVE: // 触点移动
                                // 获取第一个触点下一次的坐标
                                nextX1 = event.getX(0);
                                nextY1 = event.getY(0);
                                // 获取第二个触点下一次的坐标
                                nextX2 = event.getX(1);
                                nextY2 = event.getY(1);
                                // 计算两个触点之间下一次的距离
                                nextDistance = (float) Math.sqrt((nextX1 - nextX2) *(nextX1 - nextX2) + (nextY1 - nextY2)*(nextY1 - nextY2) );
                                break;
                            case MotionEvent.ACTION_UP:   // 触点放开
                                break;
                        }
                        // 修改米老鼠图像控件的布局参数
                        if(nextDistance > distance){
        // 放大图片
                            if(layoutParams.width < 1000) {
        
                                layoutParams.width = (int) (layoutParams.width * 1.05);
                                layoutParams.height = (int) (layoutParams.height * 1.05);
                            }
                        }else {
        // 缩小图片
                            if(layoutParams.width > 10) {
         //控制最小尺寸
                                layoutParams.width = (int) (layoutParams.width / 1.05);
                                layoutParams.height = (int) (layoutParams.height / 1.05);
                            }
                        }
                        // 坐标进行迭代(原来的终点变成现在的起点)
                        // 第一个坐标进行迭代
                        x1 = nextX1;
                        y1 = nextY2;
                        // 第二个坐标进行迭代
                        x2 = nextX1;
                        y2 = nextY2;
                        // 重新两个触点之间的距离
                        distance = (float) Math.sqrt((nextX1 - nextX2) *(nextX1 - nextX2) + (nextY1 - nextY2)*(nextY1 - nextY2) );
    
                    }
                    // 重新设置米老鼠图像控件的布局参数
                    ivMickey.setLayoutParams(layoutParams);
                    return true;
                }
            });
        }
    }

### 6、运行程序，查看结果 ###

![在这里插入图片描述][a3b3d563d9934477a5e252b0a45c2582.gif]

[65812fe53dee4595a3663c82a1eb803a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1766cafee9324c8582ce23a74470b42f.png
[ecf6b58bf4344b99bcd2430848f4faee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/10f91dcbd4bc4f729c6d8de22493598b.png
[b619990eb41d44a18982e729c134b91d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25c8266c6ab7446b9c65365f4b68f81d.png
[9fdff07e594147f0835a5cd8b2e1bb7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/99b2989f01d14dfda10703b2ab344033.png
[745c7106ef704b979a2ff9e9dbba2584.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3a635ff96b70417e821403afaa467e35.png
[688e785bda8d4257895cd9e453ab44be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/33c1c3d02a01462e979735cd98bf7c13.png
[bd8fb0f44123489f88d8ab395e7db075.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d94e275b8c2f4a53b5577b3524d1b5d8.png
[cb9f1161dc874418a9de20e618db0ae7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d0cee26b37834cc7a49ebfd6b32c4c8a.png
[b24068542fa941b7a9485d5671d22ce4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ebc5b1ef9fba446c9f781b6ecf83739f.png
[f63ce4bf3c894dcda5a08ed41c84ce40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/847c56d386ed484aa62ecb4c26742c5f.png
[c9a56180af7847e39cc8f721a27d82ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b691e03eff4d40b0816a0428ff6e32da.png
[143fdbb9b317455fb9b5ebb766ad93fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c78a8919a299469cbedeeabac5778781.png
[9b9fc90572554a39a6b6a0cd782e8294.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/57ca539f94064aaf9b1c9a359d37c655.png
[fcb874aa2c7c41f1a46ded983d6cca7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5635a61c9ae044ba8bd4ecf76c3bef79.png
[c8b3fda0e6b34871ab2853f9ddb3f1f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00b53e88bd944c32af749fcd42d24ab5.png
[a345b2eaf6f24c1f855a6b9b52bd805c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7e90a4e1bb2744968df6bc5492fe7749.png
[f300084357cd4c06b95e973f0c73bdf9.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6315469ea6b7412a86ce86b55c32f76d.gif
[7d8a4d71fa2248608c3258b9d79bde39.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0b24637f05a44c38a316ba47ba62f2b5.gif
[73119cd955fb46d688a72ce08fdee98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9c50ebf6c89044a989330d785fce3cfa.png
[6423e46559c44af2b1cddf97dfd3b021.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fde4e5999eb24e7db23e5a9c601c583f.png
[53f7ffe108284fa6afa918de7b2f1b9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a700841c11a44ddeb53313cf30cab4b4.png
[01bb34f32ba94ff3a01d9bc16f6bce0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/37c9360ff2d64f229b02174234be459d.png
[c08d411e714c4544a13bf19582e18731.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/05722a5cf1ee40fa84d14db7fe0f41f6.png
[e6e05e945db64090b575e89bf2596a73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b193647f487044688ce6e436aeaeac20.png
[34f960c9a1324018ab011057e6e04ee0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79c53ffbca6f4af595e85c26f9d9282e.png
[bf12ca8dbc664ec68814514bb08e6805.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bfce6818fcd644f39a2b9de1a15695cf.png
[095417d695b44a899787e9eb90718af9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/15389d483929419daa0f0e314a20f7af.png
[017c90bc16774dbd907861ed0f238fcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/04fa3c69938942c3b9c00d6fa9ce8628.png
[871fae2a8f0b4504baa13595789d4aac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b955300b9e61419793cec5ef8407a27d.png
[c0a39fada6df487a8b19adc5aadef57d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/73ec859711284b0787952da7dbf4bd50.png
[ab006261c4514777a5dab2a369be3130.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/894a0b3770814c068330fbba6e93b386.png
[c4e8293f1bcf4c9d89b1f11e8d648f08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ef60210c70b54a91b258e9f9e07027b1.png
[f23cc060074f4e8a9d40f503dad1090b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f5962aef32614c70b3698e3bf01d6b31.png
[a3b3d563d9934477a5e252b0a45c2582.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5dae885055ea403bbd8401234feb4d80.gif