手势Gesture
所谓手势,是指用户手指或触摸笔在触摸屏幕上的连续触碰行为。
Androi对两种手势行为都提供了支持:
1.对于第一种手势而言,android提供了手势检测,并为手势检测提供了相应的监听器
2.对于第二种手势而言,android允许开发者添加手势,并提供了相应的API识别用户手势
手势检测
android为手势检测提供了一个GestureDetector类,GestureDetector实例代表了一个手势检测器,创建GestureDetector时需要传入一个GestureDetector.OnGestureListener实例,
GestureDetector.OnGestureListener就是一个监听器、负责对用户的手势行为提供响应。
GestureDetector.OnGestureListener包含的事件处理方法如下:
boolean onDown(MotionEvent e) | 当触碰事件按下时触发该方法 |
boolean onFling(MotionEvent e1,MotionEvent e2,float velocityX,float velocityY) | 当用户在触摸屏上“拖过”时触发该方法。其中velocityX、velocityY代表“拖过”动作在横向、纵向上的速度 |
abstract onLongPress(MotionEvent e) | 当用户在屏幕上长按时触发该方法 |
boolean onScroll(MotionEvent e1,MotionEvent e2,float velocityX,float velocityY) | 当用户在屏幕上滚动时触发该方法 |
void onShowPress(MotionEvent e) | 用户在触摸屏上按下、而且还未移动和松开时触发该方法 |
boolean onSingleTapUp(MotionEvent e) | 用户在触摸屏上的轻击事件将会触发该方法 |
关于GestureDetector.OnGestureListener监听器里的各种方法的触发时机,仅从文字上表述显得还是比较抽象和不易理解,看如下实例理解触发各种事件。
使用android手势检测只需要两个步骤:
1.创建一个GestureDetector对象,创建该对象时必须实现一个GestureDetector.OnGestureLinstener监听器;
2.为应用程序的Activity(偶尔可为特定组件)的TouchEvent事件绑定监听器,在事件处理中指定把Activity/特定组件上的TouchEvent事件交给GestureDetector处理,
GestureDetector就会检测是否触发了特定的手势动作。
实例如下:
package com.example.mygesturedetector; import android.os.Bundle; import android.app.Activity; import android.view.GestureDetector; import android.view.Menu; import android.view.MotionEvent; import android.widget.Toast; public class MainActivity extends Activity implements android.view.GestureDetector.OnGestureListener { // 定义手势 GestureDetector detector; @SuppressWarnings("deprecation") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); detector = new GestureDetector(this); } @Override public boolean onTouchEvent(MotionEvent event) { // 将该Activity上的触屏事件交给GestureDetector处理 return detector.onTouchEvent(event); } @Override public boolean onDown(MotionEvent e) { Toast.makeText(this, "onDown", 5000).show(); return false; } @Override public void onShowPress(MotionEvent e) { Toast.makeText(this, "onShowPress", 5000).show(); } @Override public boolean onSingleTapUp(MotionEvent e) { Toast.makeText(this, "onSingleTapUp", 5000).show(); return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { Toast.makeText(this, "onScroll", 5000).show(); return false; } @Override public void onLongPress(MotionEvent e) { Toast.makeText(this, "onLongPress", 5000).show(); } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { Toast.makeText(this, "onFling", 5000).show(); return false; } }
实例二:通过手势缩放图片
布局文件==》 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" > <ImageView android:id="@+id/image" android:layout_gravity="center_vertical|center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 代码实现==》 package com.example.mygesturedetector2; import android.os.Bundle; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.graphics.drawable.BitmapDrawable; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.MotionEvent; import android.widget.ImageView; public class MainActivity extends Activity implements OnGestureListener { GestureDetector detector; ImageView image; Bitmap bitmap; int width, height; float currentScale = 1; Matrix matrix; @SuppressWarnings("deprecation") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 创建手势检测器 detector = new GestureDetector(this); matrix = new Matrix(); image = (ImageView) this.findViewById(R.id.image); bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.photo12); width = bitmap.getWidth(); height = bitmap.getHeight(); image.setImageBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.photo12)); } @Override public boolean onTouchEvent(MotionEvent e) { // 将Activity上的触碰事件交给GestureDetector处理 return detector.onTouchEvent(e); } @Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { velocityX = velocityX > 5000 ? 5000 : velocityX; velocityX = velocityX < -5000 ? -5000 : velocityX; // 根据手势的速度来计算缩放比,当velocityX>0,放大图片,否则缩小图片 currentScale += currentScale * velocityX / 5000.0f; // 保证currentScale不会等于0 currentScale = currentScale > 0.01 ? currentScale : 0.01f; // 重置Matrix matrix.reset(); matrix.setScale(currentScale, currentScale, 160, 200); BitmapDrawable tmp = (BitmapDrawable) image.getDrawable(); // 如果图片还没有回收,强制回收图片 if (!tmp.getBitmap().isRecycled()) tmp.getBitmap().recycle(); // 根据原始位图和Matrix创建新图片 Bitmap bitmap2 = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); image.setImageBitmap(bitmap2); return false; } }
运行效果如下:
实例三:通过手势实现翻页效果
ViewFlipper组件是一个容器组件,因此可调用addView(View v)添加多个组件,一旦向其添加了多个组件之后,ViewFlipper可使用动画控制多个组件直接的切换效果。
本程序通过GestureDetector来检测用户的手势,并根据手势动作来控制ViewFlipper包含的View组件的切换,从而实现翻页效果。
布局文件main.xml==> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ViewFlipper android:id="@+id/ViewFlipper01" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ViewFlipper> </LinearLayout>
动画文件==》 res目录添加anim文件夹,并添加对应的动画xml ==> left_in.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="100%p" android:toXDelta="0" /> </set> left_out.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p" /> </set> right_in.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="-100%p" android:toXDelta="0" /> </set> right_out.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="100%p" /> </set>
代码实现==》 package com.example.mygesturedetector3; import android.os.Bundle; import android.app.Activity; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.TextView; import android.widget.ViewFlipper; public class MainActivity extends Activity implements OnGestureListener { ViewFlipper flipper; GestureDetector detector; Animation[] animations = new Animation[4]; // 定义手势动作两点直接的最小距离 final int FLIP_DISTANCE = 50; @SuppressWarnings("deprecation") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); detector = new GestureDetector(this); flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01); // flipper.addView(addTextView("step 1"));// 将View添加到flipper队列中 // flipper.addView(addTextView("step 2")); // flipper.addView(addTextView("step 3")); // flipper.addView(addTextView("step 4")); // flipper.addView(addTextView("step 5")); flipper.addView(addImageView(R.drawable.photo8)); flipper.addView(addImageView(R.drawable.photo9)); flipper.addView(addImageView(R.drawable.photo10)); flipper.addView(addImageView(R.drawable.photo11)); flipper.addView(addImageView(R.drawable.photo12)); animations[0] = AnimationUtils.loadAnimation(this, R.anim.left_in); animations[1] = AnimationUtils.loadAnimation(this, R.anim.left_out); animations[2] = AnimationUtils.loadAnimation(this, R.anim.right_in); animations[3] = AnimationUtils.loadAnimation(this, R.anim.right_out); } private View addTextView(String text) { TextView tv = new TextView(this); tv.setText(text); tv.setGravity(1); return tv; } @Override public boolean onTouchEvent(MotionEvent event) { return detector.onTouchEvent(event); } private View addImageView(int resId) { ImageView img = new ImageView(this); img.setImageResource(resId); img.setScaleType(ImageView.ScaleType.CENTER); return img; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX() - e2.getX() > FLIP_DISTANCE) { // 如果是从右向左滑动 // 注册flipper的进出效果 flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.left_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.left_out)); flipper.showNext(); return true; } if (e1.getX() - e2.getX() < -FLIP_DISTANCE) { // 如果是从左向右滑动 flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.right_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.right_out)); flipper.showPrevious(); return true; } return false; } @Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } }
运行效果:通过左右滑动实现图片切换效果