在学习触摸监听以及手势检测后,可以制作一个简单的电子相册。实际是一个ViewFlipper容器,里面放了5张图片,从右向左划动,看下一张图片,从左向右划动,看上一张图片。
目录
知识要点:
estureDetector//手势检测类
GestureDetector.OnGestureListener//监听类
ViewFlipper组件//使用动画切换多个组件的效果
showPrevious();显示以前一张照片的方法
shuowNext();//显示下一张图片
Java代码方法步骤
第一步:让MainActivity实现GestureOverlayView.OnGestureListener接口,并实现其所有方法。
第二步:定义一个全局的手势检测器
第三步:将要显示的图片加载到ViewFlipper中,并且初始化动画数组。
第四步:在onFling()方法中通过触摸事件的X坐标判断是向左滑动还是向右滑动,并且为其设置动画。
第五步:将Activity上的触摸事件交给GestureDetector处理。
位移动画可参考http://www.cnblogs.com/bavariama/archive/2013/01/29/2881225.html
left_in.xml,图片从右向左滑动时的动画,View进入屏幕时候使用的动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0"
android:duration="500"/>
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500"/>
<scale android:fromXScale="0.01"
android:toXScale="0.01"
android:toYScale="1.0"
android:duration="500"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
/>
</set>
left_out.xmll,图片从右向左滑动时的动画,View退出屏幕时候使用的动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500"/>
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500"/>
<scale android:fromXScale="0.01"
android:toXScale="0.01"
android:toYScale="1.0"
android:duration="500"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
/>
</set>
还有righ_in和right_out和left相似可参考http://www.cnblogs.com/bavariama/archive/2013/01/29/2881225.html学习,在这里就不写了。
activity_main代码
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<ViewFlipper
android:id="@+id/flipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ViewFlipper>
</LinearLayout>
MainActivity.java代码
package com.example.a13468.myapplication;
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
//第一步:让MainActivity实现GestureOverlayView.OnGestureListener接口,并实现其所有方法
public class MainActivity extends Activity implements GestureDetector.OnGestureListener {
Animation[] animations = new Animation[4];//动画切换
final int distance = 50;//用于手势记录两点之间的最小距离
//图片数组
private int[] images = new int[]{
R.mipmap.photo1, R.mipmap.photo2, R.mipmap.photo3, R.mipmap.photo4,
R.mipmap.photo5,
};
ViewFlipper flipper;//图片切换组件
//第二步:定义一个全局的手势检测器
GestureDetector detector;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//对全局手势检测器经行初始化
detector = new GestureDetector(MainActivity.this, (GestureDetector.OnGestureListener) this);
//第三步:将要显示的图片加载到ViewFlipper中,并且初始化动画数组
flipper = findViewById(R.id.flipper);
/**
* 要加载的图片显示到ViewFlipper中
*/
for (int i = 0; i < images.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(images[i]);//指定显示数组中每一张照片
flipper.addView(imageView);
}
//对图片数组初始化
//初始化Animation数组
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);
}
@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) {
//第四步:在onFling()方法中通过触摸事件的X坐标判断是向左滑动还是向右滑动,并且为其设置动画
//从右向左
if(e1.getX()-e2.getX()>distance){
flipper.setInAnimation(animations[2]);
flipper.setOutAnimation(animations[1]);
flipper.showPrevious();//显示前一张图片
return true;
}else if(e2.getX()-e1.getX()>distance){
flipper.setInAnimation(animations[0]);//进入的动画
flipper.setOutAnimation(animations[3]);//淡出的动画
flipper.showNext();//显示下一张图片
return true;
}
return false;
}
//第五步:将Activity上的触摸事件交给GestureDetector处理
@Override
public boolean onTouchEvent(MotionEvent event) {
return detector.onTouchEvent(event);
}
}