Android進階：實現android系統內建查看照片動畫效果 類似Gallery手勢滑動

用的Android系統內建的相機軟體，他的照片查看首先是一個Galery，點擊查看後也是類似這個效果，感覺體驗挺好，仿照效果自己做了下demo

首先看效果：

 

 

 

 

然後就是加上的滑動動畫效果

 

來看實現：FlingImageDemo

 

實現主要就是自訂View

 

import android.content.Context;<br />import android.graphics.Bitmap;<br />import android.graphics.Canvas;<br />import android.graphics.Color;<br />import android.graphics.Paint;<br />import android.graphics.Rect;<br />import android.util.AttributeSet;<br />import android.view.View;<br />import android.view.animation.Animation;<br />import android.view.animation.LinearInterpolator;<br />import android.view.animation.Transformation;<br />/**<br /> * 照片瀏覽View<br /> */<br />public class FlingView extends View{</p><p>private Bitmap bitmap;<br />private Bitmap nBitmap;<br />private Bitmap fBitmap;</p><p>public int OffsetX = 0;<br />public int OffsetY = 0;</p><p>public static int postion = 0;<br />int mLastFlingX = 0;<br />boolean OffsetRight = false;</p><p>private Bitmap[] bitmaps ;</p><p>public FlingView(Context context, AttributeSet attrs) {<br />super(context, attrs);</p><p>}</p><p>public FlingView(Context context,Bitmap[] bitmaps){<br />super(context);<br />this.bitmaps = bitmaps;<br />bitmap = getBitmap(0);<br />nBitmap = getBitmap(1);<br />}</p><p>@Override<br />public void draw(Canvas canvas) {<br />Paint p = new Paint();<br />canvas.drawColor(Color.BLACK);<br />if (OffsetX < 0) {<br />if (nBitmap != null) {<br />Rect rectTemp = new Rect(FlingImageDemo.SCREEN_WIDTH+15 + OffsetX,0,FlingImageDemo.SCREEN_WIDTH+15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT);<br />canvas.drawBitmap(nBitmap, null, rectTemp, p);<br />}<br />} else if (OffsetX > 0) {<br />if (fBitmap != null) {<br />Rect rectTemp = new Rect(-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX,0,-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT);<br />canvas.drawBitmap(fBitmap, null, rectTemp, p);<br />}<br />}<br />if(bitmap != null){<br />Rect rectTemp = new Rect(OffsetX,OffsetY,OffsetX+FlingImageDemo.SCREEN_WIDTH,OffsetY+FlingImageDemo.SCREEN_HEIGHT);<br />canvas.drawBitmap(bitmap, null, rectTemp, p);<br />}<br />}</p><p>public void handleScroll(int deltaX) {<br />if (deltaX > 0) {<br />OffsetX -= -deltaX;<br />} else {<br />OffsetX += deltaX;<br />}<br />invalidate();<br />}</p><p>//標記為可以切換到下一張<br />boolean flag = false;<br />//標記為需要向右滑動<br />boolean flag1 = false;<br />//標記為需要向左滑動<br />boolean flag2 = false;</p><p>class MyAnimation extends Animation{</p><p>private int temp;</p><p>@Override<br />public void initialize(int width, int height, int parentWidth,<br />int parentHeight) {<br />temp = OffsetX;<br />super.initialize(width, height, parentWidth, parentHeight);<br />setDuration(500);<br />setFillAfter(true);<br />setInterpolator(new LinearInterpolator());<br />}</p><p>@Override<br />protected void applyTransformation(float interpolatedTime,<br />Transformation t) {<br />//Log.i("bb", "OffsetX==>"+OffsetX);<br />//需要滑動圖片時根據方向來變換OffsetX大小<br />if(flag){<br />if(temp>0){<br />OffsetX = (int) ((FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp);<br />}else{<br />OffsetX = (int) ((-FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp);<br />}<br />//不需要變換的情況<br />}else{<br />OffsetX = (int) (temp*(1-interpolatedTime));<br />}</p><p>invalidate();<br />}<br />}<br />//動畫結束後需要做一些工作<br />@Override<br />protected void onAnimationEnd() {<br />if (flag1) {<br />nBitmap = bitmap;<br />bitmap = fBitmap;<br />fBitmap = null;<br />postion = postion - 1;<br />} else if (flag2) {<br />fBitmap = bitmap;<br />bitmap = nBitmap;<br />nBitmap = null;<br />postion = postion + 1;<br />}<br />flag1 = false;<br />flag2 = false;<br />OffsetX = 0;<br />if(fBitmap == null && OffsetX == 0){<br />if (postion > 0) {<br />fBitmap = getBitmap(postion-1);<br />}</p><p>}else if(nBitmap == null && OffsetX==0){<br />if (postion < bitmaps.length-1) {<br />nBitmap = getBitmap(postion+1);<br />}<br />}<br />clearAnimation();<br />flag = false;<br />}</p><p>public void onFling(int paramFloat1) {<br />if (OffsetX > FlingImageDemo.SCREEN_WIDTH/3) {<br />if (fBitmap != null) {<br />flag = true;<br />flag1 = true;<br />}<br />} else if (OffsetX < -FlingImageDemo.SCREEN_WIDTH/3) {<br />if (nBitmap != null) {<br />flag = true;<br />flag2 = true;<br />}<br />}<br />//開始動畫效果<br />startAnimation(new MyAnimation());<br />invalidate();</p><p>}<br />/**<br /> * 獲得當前位置的圖片<br /> * @param currentPos<br /> * @return<br /> */<br />public Bitmap getBitmap(int currentPos) {<br />if (currentPos > bitmaps.length-1) {<br />return null;<br />}<br /> Bitmap currBitmap = bitmaps[currentPos];<br />OffsetX = 0;<br />OffsetY = 0;</p><p>return currBitmap;<br />}<br />}<br />

 

中間通過 MyAnimation 來實現自訂的動畫 主要重寫applyTransformation方法

以及onAnimationEnd方法中 在動畫結束後做的一些細節操作了 很簡單 就是邏輯搞得有點亂了~~

 

然後建立Activity 建立View 傳入圖片資源就OK了

 

import android.app.Activity;<br />import android.graphics.Bitmap;<br />import android.graphics.BitmapFactory;<br />import android.os.Bundle;<br />import android.util.DisplayMetrics;<br />import android.view.GestureDetector;<br />import android.view.MotionEvent;<br />import android.view.GestureDetector.OnGestureListener;<br />public class FlingImageDemo extends Activity implements OnGestureListener{</p><p>private FlingView flingView;</p><p>private GestureDetector myGesture;</p><p>public static int SCREEN_WIDTH;<br />public static int SCREEN_HEIGHT;<br /> @Override<br /> public void onCreate(Bundle savedInstanceState) {</p><p> DisplayMetrics dm = new DisplayMetrics();<br /> getWindowManager().getDefaultDisplay().getMetrics(dm);</p><p> //獲得手機的寬頻和高度像素單位為px<br /> SCREEN_WIDTH = dm.widthPixels;<br /> SCREEN_HEIGHT = dm.heightPixels;<br /> //位元影像資源 不要小於2張<br /> Bitmap[] bitmaps = {<br /> BitmapFactory<br /> .decodeResource(getResources(), R.drawable.g1),<br /> BitmapFactory<br /> .decodeResource(getResources(), R.drawable.g3),<br /> BitmapFactory<br /> .decodeResource(getResources(), R.drawable.g4),<br />// BitmapFactory<br />// .decodeResource(getResources(), R.drawable.g7),<br /> BitmapFactory<br /> .decodeResource(getResources(), R.drawable.g8) };</p><p> super.onCreate(savedInstanceState);<br /> flingView = new FlingView(this,bitmaps);<br /> setContentView(flingView);<br /> myGesture = new GestureDetector(this);<br /> }<br /> @Override<br />public boolean onTouchEvent(MotionEvent event) {</p><p> switch (event.getAction()) {<br />case MotionEvent.ACTION_UP:<br />flingView.onFling(0);<br />break;<br />}</p><p>return myGesture.onTouchEvent(event);<br />}<br />@Override<br />public boolean onDown(MotionEvent e) {<br />// TODO Auto-generated method stub<br />return false;<br />}<br />//手勢完成後調用<br />@Override<br />public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,<br />float velocityY) {<br />flingView.onFling((int)-velocityX);<br />return true;<br />}<br />@Override<br />public void onLongPress(MotionEvent e) {<br />// TODO Auto-generated method stub</p><p>}<br />//滑動過程一直在調用<br />@Override<br />public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,<br />float distanceY) {<br />flingView.handleScroll(-1*(int)distanceX);<br />return true;<br />}<br />@Override<br />public void onShowPress(MotionEvent e) {<br />// TODO Auto-generated method stub</p><p>}<br />@Override<br />public boolean onSingleTapUp(MotionEvent e) {<br />// TODO Auto-generated method stub<br />return false;<br />}<br />

 

實現OnGestureListener介面 在方法onFling和onScroll中分別調用

 

僅僅這個功能 後面的慢慢添加吧