安卓讲课笔记4.2 安卓(多点)触摸事件

最新推荐文章于 2023-02-09 11:53:48 发布

Hxiug.虚晨

最新推荐文章于 2023-02-09 11:53:48 发布

阅读量88

点赞数

文章标签： android 学习后端

本文链接：https://blog.csdn.net/weixin_69493757/article/details/127833095

版权

文件目录

一、学习要点
二、案例演示1:拖动图片
三、案例演示1:通过多点触缩放图片

一、学习要点

安卓触摸动作
触摸监听器与方法
单点触摸与多点触摸

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

1、创建安卓应用

基于Empty Activity模板创建- MoveMickeyByTouch

2、准备图片素材

3、字符串资源文件

strings.xml

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

4、主布局资源文件

activity_main.xml
约束布局改成线性布局，再添加一个图像控件

<?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>

预览效果

5、主界面类

MainActivity
声明变量和常量
通过资源标识符获取控件实例
获取焦点
获取图像控件的布局参数
给线性根布局注册触摸监听器
在模拟器屏幕上，按下鼠标，移动鼠标，放开鼠标，在LogCat里可以看到图片有三种动作及坐标
将c触点是改到图片的中央
修改前
修改后

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

2、准备图片素材

在这里插入图片描述

3、字符串资源文件

strings.xml

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

4、主布局文件

activity_main.xml
修改布局方式，并添加一个图像控件

<?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>

预览效果

5、主界面类

MainActivity
声明变量
通过资源标识符获取控件实例
让根布局获取焦点
获取图像控件的布局参数
给根布局注册触摸监听器

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;
            }
        });
    }
}