• Android学习之多点触摸并不神秘


    最近研究了一下多点触摸,写了个利用多点触摸来控制图片大小和单点触摸控制图片移动的程序,和大家分享分享。

    Android中监听触摸事件是onTouchEvent方法,它的参数为MotionEvent,下面列举MotionEvent的一些常用的方法:

    getPointerCount() 获得触屏的点数。

    getX() 获得触屏的X坐标值

    getY() 获得触屏的Y坐标值

    getAction() 获得触屏的动作

    ACTION_DOWN:按下的动作开始,比如用手指按屏幕。

    ACTION_UP:按下的动作完成,比如手指停止按屏幕,离开屏幕。

    ACTION_MOVE:在动作开始和完成之间的移动,比如手指在屏幕上滑动。

    还介绍下程序中用到的ImageView,ImageView.setFrame()的四个参数指的是left,top,right,bottom如图:

    left和top指的就是ImageView左上角的坐标x和y,right,bottom指的就是ImageView的右下角的坐标x和y了。

    接下来看程序,程序中有详细的介绍:

    1. package com.practice.imageviewpic;  
    2. import android.app.Activity;  
    3. import android.content.Context;  
    4. import android.graphics.*;  
    5. import android.graphics.drawable.BitmapDrawable;  
    6. import android.os.Bundle;  
    7. import android.view.MotionEvent;  
    8. import android.widget.ImageView;  
    9. import android.widget.ImageView.ScaleType;  
    10. public class ImageViewPic extends Activity {  
    11.       
    12.     /* 
    13.      * 利用多点触控来控制ImageView中图像的放大与缩小 
    14.      * 手指控制图片移动 
    15.      */  
    16.       
    17.     private MyImageView imageView;  
    18.     private Bitmap bitmap;  
    19.       
    20.     //两点触屏后之间的长度  
    21.     private float beforeLenght;  
    22.     private float afterLenght;  
    23.       
    24.     //单点移动的前后坐标值  
    25.     private float afterX,afterY;  
    26.     private float beforeX,beforeY;  
    27.       
    28.     /** Called when the activity is first created. */  
    29.     @Override  
    30.     public void onCreate(Bundle savedInstanceState) {  
    31.         super.onCreate(savedInstanceState);  
    32.         findView();  
    33.         setContentView(imageView);  
    34.         config();  
    35.     }  
    36.       
    37.     private void findView() {  
    38.         imageView = new MyImageView(this);  
    39.         //获得图片  
    40.         bitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.xing)).getBitmap();  
    41.     }  
    42.       
    43.     private void config() {  
    44.         //设置imageView的显示图片  
    45.         imageView.setImageBitmap(bitmap);  
    46.         //设置图片填充ImageView  
    47.         imageView.setScaleType(ScaleType.FIT_XY);  
    48.     }  
    49.       
    50.     //创建一个自己的ImageView类  
    51.     class MyImageView extends ImageView {  
    52.         private float scale = 0.1f;  
    53.           
    54.         public MyImageView(Context context) {  
    55.             super(context);  
    56.         }  
    57.         //用来设置ImageView的位置  
    58.         private void setLocation(int x,int y) {  
    59.             this.setFrame(this.getLeft()+x, this.getTop()+y, this.getRight()+x, this.getBottom()+y);  
    60.         }  
    61.           
    62.           
    63.         /* 
    64.          * 用来放大缩小ImageView 
    65.          * 因为图片是填充ImageView的,所以也就有放大缩小图片的效果 
    66.          * flag为0是放大图片,为1是小于图片 
    67.          */  
    68.         private void setScale(float temp,int flag) {  
    69.               
    70.             if(flag==0) {  
    71.                 this.setFrame(this.getLeft()-(int)(temp*this.getWidth()),   
    72.                               this.getTop()-(int)(temp*this.getHeight()),   
    73.                               this.getRight()+(int)(temp*this.getWidth()),   
    74.                               this.getBottom()+(int)(temp*this.getHeight()));     
    75.             }else {  
    76.                 this.setFrame(this.getLeft()+(int)(temp*this.getWidth()),   
    77.                               this.getTop()+(int)(temp*this.getHeight()),   
    78.                               this.getRight()-(int)(temp*this.getWidth()),   
    79.                               this.getBottom()-(int)(temp*this.getHeight()));  
    80.             }  
    81.         }  
    82.           
    83.         //绘制边框        
    84.          @Override  
    85.           protected void onDraw(Canvas canvas) {  
    86.               super.onDraw(canvas);      
    87.               Rect rec=canvas.getClipBounds();  
    88.               rec.bottom--;  
    89.               rec.right--;  
    90.               Paint paint=new Paint();  
    91.               paint.setColor(Color.RED);  
    92.               paint.setStyle(Paint.Style.STROKE);  
    93.               canvas.drawRect(rec, paint);  
    94.           }  
    95.           
    96.            
    97.         /* 让图片跟随手指触屏的位置移动 
    98.          * beforeX、Y是用来保存前一位置的坐标 
    99.          * afterX、Y是用来保存当前位置的坐标 
    100.          * 它们的差值就是ImageView各坐标的增加或减少值 
    101.          */  
    102.         public void moveWithFinger(MotionEvent event) {  
    103.               
    104.             switch(event.getAction()) {  
    105.               
    106.             case MotionEvent.ACTION_DOWN:  
    107.                 beforeX = event.getX();  
    108.                 beforeY = event.getY();  
    109.                 break;  
    110.             case MotionEvent.ACTION_MOVE:  
    111.                 afterX = event.getX();  
    112.                 afterY = event.getY();  
    113.                   
    114.                 this.setLocation((int)(afterX-beforeX),(int)(afterY-beforeY));  
    115.                   
    116.                 beforeX = afterX;  
    117.                 beforeY = afterY;  
    118.                 break;  
    119.                   
    120.             case MotionEvent.ACTION_UP:  
    121.                 break;  
    122.             }  
    123.         }  
    124.           
    125.         /* 
    126.          * 通过多点触屏放大或缩小图像 
    127.          * beforeLenght用来保存前一时间两点之间的距离 
    128.          * afterLenght用来保存当前时间两点之间的距离 
    129.          */  
    130.         public void scaleWithFinger(MotionEvent event) {  
    131.             float moveX = event.getX(1) - event.getX(0);  
    132.             float moveY = event.getY(1) - event.getY(0);  
    133.               
    134.             switch(event.getAction()) {  
    135.             case MotionEvent.ACTION_DOWN:  
    136.                 beforeLenght = (float) Math.sqrt( (moveX*moveX) + (moveY*moveY) );  
    137.                 break;  
    138.             case MotionEvent.ACTION_MOVE:  
    139.                 //得到两个点之间的长度  
    140.                 afterLenght = (float) Math.sqrt( (moveX*moveX) + (moveY*moveY) );  
    141.                   
    142.                 float gapLenght = afterLenght - beforeLenght;  
    143.                   
    144.                 if(gapLenght == 0) {  
    145.                     break;  
    146.                 }  
    147.                   
    148.                 //如果当前时间两点距离大于前一时间两点距离,则传0,否则传1  
    149.                 if(gapLenght>0) {  
    150.                     this.setScale(scale,0);  
    151.                 }else {  
    152.                     this.setScale(scale,1);  
    153.                 }  
    154.                   
    155.                 beforeLenght = afterLenght;  
    156.                 break;  
    157.             }  
    158.         }  
    159.        
    160.     }  
    161.       
    162.    //这里来监听屏幕触控时间  
    163.    @Override  
    164.     public boolean onTouchEvent(MotionEvent event) {  
    165.          
    166.        /* 
    167.         * 判定用户是否触摸到了图片 
    168.         * 如果是单点触摸则调用控制图片移动的方法 
    169.         * 如果是2点触控则调用控制图片大小的方法 
    170.         */  
    171.         if(event.getY() > imageView.getTop() && event.getY() < imageView.getBottom()  
    172.                 && event.getX() > imageView.getLeft() && event.getX() < imageView.getRight()) {  
    173.             if(event.getPointerCount() == 2) {  
    174.                 imageView.scaleWithFinger(event);  
    175.             }else if(event.getPointerCount() == 1) {  
    176.                 imageView.moveWithFinger(event);  
    177.             }             
    178.         }  
    179.         return true;  
    180.     }         
    181.       
    182. }  

    源程序的下载地址为:http://download.csdn.net/source/3281618

  • 相关阅读:
    移动端布局四: rem适配布局,em和rem介绍,媒体查询显示不同样式,媒体查询调用不同css样式
    移动端布局三: flex布局
    InnoDB存储引擎 (第4章 表)
    InnoDB存储引擎 (第3章 文件)
    《MySQL技术内幕:InnoDB存储引擎》笔记
    InnoDB存储引擎 (第2章 InnoDB存储引擎)
    InnoDB存储引擎 (第1章 MySQL体系结构和存储引擎)
    MySql 技术内幕 (第10章 分区)
    MySql 技术内幕 (第9章 索引)
    MySql 技术内幕 (第6章 聚合和旋转操作)
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4043568.html
Copyright © 2020-2023  润新知