Android进阶：实现android系统自带查看照片动画效果 类似Gallery手势滑动

用的Android系统自带的相机软件，他的照片查看首先是一个Galery，点击查看后也是类似这个效果，感觉体验挺好，仿照效果自己做了下demo

首先看效果：

然后就是加上的滑动动画效果

来看实现：FlingImageDemo

实现主要就是自定义View

import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.view.View; import android.view.animation.Animation; import android.view.animation.LinearInterpolator; import android.view.animation.Transformation; /** * 照片浏览View */ public class FlingView extends View{ private Bitmap bitmap; private Bitmap nBitmap; private Bitmap fBitmap; public int OffsetX = 0; public int OffsetY = 0; public static int postion = 0; int mLastFlingX = 0; boolean OffsetRight = false; private Bitmap[] bitmaps ; public FlingView(Context context, AttributeSet attrs) { super(context, attrs); } public FlingView(Context context,Bitmap[] bitmaps){ super(context); this.bitmaps = bitmaps; bitmap = getBitmap(0); nBitmap = getBitmap(1); } @Override public void draw(Canvas canvas) { Paint p = new Paint(); canvas.drawColor(Color.BLACK); if (OffsetX < 0) { if (nBitmap != null) { Rect rectTemp = new Rect(FlingImageDemo.SCREEN_WIDTH+15 + OffsetX,0,FlingImageDemo.SCREEN_WIDTH+15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT); canvas.drawBitmap(nBitmap, null, rectTemp, p); } } else if (OffsetX > 0) { if (fBitmap != null) { Rect rectTemp = new Rect(-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX,0,-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT); canvas.drawBitmap(fBitmap, null, rectTemp, p); } } if(bitmap != null){ Rect rectTemp = new Rect(OffsetX,OffsetY,OffsetX+FlingImageDemo.SCREEN_WIDTH,OffsetY+FlingImageDemo.SCREEN_HEIGHT); canvas.drawBitmap(bitmap, null, rectTemp, p); } } public void handleScroll(int deltaX) { if (deltaX > 0) { OffsetX -= -deltaX; } else { OffsetX += deltaX; } invalidate(); } //标记为可以切换到下一张 boolean flag = false; //标记为需要向右滑动 boolean flag1 = false; //标记为需要向左滑动 boolean flag2 = false; class MyAnimation extends Animation{ private int temp; @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { temp = OffsetX; super.initialize(width, height, parentWidth, parentHeight); setDuration(500); setFillAfter(true); setInterpolator(new LinearInterpolator()); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { // Log.i("bb", "OffsetX==>"+OffsetX); //需要滑动图片时根据方向来变换OffsetX大小 if(flag){ if(temp>0){ OffsetX = (int) ((FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp); }else{ OffsetX = (int) ((-FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp); } //不需要变换的情况 }else{ OffsetX = (int) (temp*(1-interpolatedTime)); } invalidate(); } } //动画结束后需要做一些工作 @Override protected void onAnimationEnd() { if (flag1) { nBitmap = bitmap; bitmap = fBitmap; fBitmap = null; postion = postion - 1; } else if (flag2) { fBitmap = bitmap; bitmap = nBitmap; nBitmap = null; postion = postion + 1; } flag1 = false; flag2 = false; OffsetX = 0; if(fBitmap == null && OffsetX == 0){ if (postion > 0) { fBitmap = getBitmap(postion-1); } }else if(nBitmap == null && OffsetX==0){ if (postion < bitmaps.length-1) { nBitmap = getBitmap(postion+1); } } clearAnimation(); flag = false; } public void onFling(int paramFloat1) { if (OffsetX > FlingImageDemo.SCREEN_WIDTH/3) { if (fBitmap != null) { flag = true; flag1 = true; } } else if (OffsetX < -FlingImageDemo.SCREEN_WIDTH/3) { if (nBitmap != null) { flag = true; flag2 = true; } } //开始动画效果 startAnimation(new MyAnimation()); invalidate(); } /** * 获得当前位置的图片 * @param currentPos * @return */ public Bitmap getBitmap(int currentPos) { if (currentPos > bitmaps.length-1) { return null; } Bitmap currBitmap = bitmaps[currentPos]; OffsetX = 0; OffsetY = 0; return currBitmap; } }

中间通过 MyAnimation 来实现自定义的动画 主要重写applyTransformation方法

以及onAnimationEnd方法中 在动画结束后做的一些细节操作了 很简单 就是逻辑搞得有点乱了~~

然后创建Activity 创建View 传入图片资源就OK了

import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.GestureDetector.OnGestureListener; public class FlingImageDemo extends Activity implements OnGestureListener{ private FlingView flingView; private GestureDetector myGesture; public static int SCREEN_WIDTH; public static int SCREEN_HEIGHT; @Override public void onCreate(Bundle savedInstanceState) { DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //获得手机的宽带和高度像素单位为px SCREEN_WIDTH = dm.widthPixels; SCREEN_HEIGHT = dm.heightPixels; //位图资源 不要小于2张 Bitmap[] bitmaps = { BitmapFactory .decodeResource(getResources(), R.drawable.g1), BitmapFactory .decodeResource(getResources(), R.drawable.g3), BitmapFactory .decodeResource(getResources(), R.drawable.g4), // BitmapFactory // .decodeResource(getResources(), R.drawable.g7), BitmapFactory .decodeResource(getResources(), R.drawable.g8) }; super.onCreate(savedInstanceState); flingView = new FlingView(this,bitmaps); setContentView(flingView); myGesture = new GestureDetector(this); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_UP: flingView.onFling(0); break; } return myGesture.onTouchEvent(event); } @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub return false; } //手势完成后调用 @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { flingView.onFling((int)-velocityX); return true; } @Override public void onLongPress(MotionEvent e) { // TODO Auto-generated method stub } //滑动过程一直在调用 @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { flingView.handleScroll(-1*(int)distanceX); return true; } @Override public void onShowPress(MotionEvent e) { // TODO Auto-generated method stub } @Override public boolean onSingleTapUp(MotionEvent e) { // TODO Auto-generated method stub return false; }

实现OnGestureListener接口 在方法onFling和onScroll中分别调用

仅仅这个功能 后面的慢慢添加吧