Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android進階：實現android系統自帶查看照片動畫效果 類似Gallery手勢滑動

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

編輯：Android開發實例

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


首先看效果：

 

 

 

 

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

 

來看實現：FlingImageDemo

 

實現主要就是自定義View

 

 

  1. import android.content.Context;  
  2. import android.graphics.Bitmap;  
  3. import android.graphics.Canvas;  
  4. import android.graphics.Color;  
  5. import android.graphics.Paint;  
  6. import android.graphics.Rect;  
  7. import android.util.AttributeSet;  
  8. import android.view.View;  
  9. import android.view.animation.Animation;  
  10. import android.view.animation.LinearInterpolator;  
  11. import android.view.animation.Transformation;  
  12. /**  
  13.  * 照片浏覽View  
  14.  */ 
  15. public class FlingView extends View{  
  16.       
  17.     private Bitmap bitmap;  
  18.     private Bitmap nBitmap;  
  19.     private Bitmap fBitmap;  
  20.       
  21.     public int OffsetX = 0;  
  22.     public int OffsetY = 0;  
  23.       
  24.     public static int postion = 0;  
  25.     int mLastFlingX = 0;  
  26.     boolean OffsetRight = false;  
  27.       
  28.     private Bitmap[] bitmaps ;  
  29.       
  30.     public FlingView(Context context, AttributeSet attrs) {  
  31.         super(context, attrs);  
  32.           
  33.     }  
  34.       
  35.     public FlingView(Context context,Bitmap[] bitmaps){  
  36.         super(context);  
  37.         this.bitmaps = bitmaps;  
  38.         bitmap = getBitmap(0);  
  39.         nBitmap = getBitmap(1);  
  40.     }  
  41.       
  42.     @Override 
  43.     public void draw(Canvas canvas) {  
  44.         Paint p = new Paint();  
  45.         canvas.drawColor(Color.BLACK);  
  46.         if (OffsetX < 0) {  
  47.             if (nBitmap != null) {  
  48.                 Rect rectTemp = new Rect(FlingImageDemo.SCREEN_WIDTH+15 + OffsetX,0,FlingImageDemo.SCREEN_WIDTH+15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT);  
  49.                 canvas.drawBitmap(nBitmap, null, rectTemp, p);  
  50.             }  
  51.         } else if (OffsetX > 0) {  
  52.             if (fBitmap != null) {  
  53.                 Rect rectTemp = new Rect(-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX,0,-FlingImageDemo.SCREEN_WIDTH-15 + OffsetX+FlingImageDemo.SCREEN_WIDTH,FlingImageDemo.SCREEN_HEIGHT);  
  54.                 canvas.drawBitmap(fBitmap, null, rectTemp, p);  
  55.             }  
  56.         }  
  57.         if(bitmap != null){  
  58.             Rect rectTemp = new Rect(OffsetX,OffsetY,OffsetX+FlingImageDemo.SCREEN_WIDTH,OffsetY+FlingImageDemo.SCREEN_HEIGHT);  
  59.             canvas.drawBitmap(bitmap, null, rectTemp, p);  
  60.         }  
  61.     }  
  62.       
  63.       
  64.       
  65.     public void handleScroll(int deltaX) {  
  66.         if (deltaX > 0) {  
  67.             OffsetX -= -deltaX;  
  68.         } else {  
  69.             OffsetX += deltaX;  
  70.         }  
  71.         invalidate();  
  72.     }  
  73.       
  74.     //標記為可以切換到下一張  
  75.     boolean flag = false;  
  76.     //標記為需要向右滑動  
  77.     boolean flag1 = false;  
  78.     //標記為需要向左滑動  
  79.     boolean flag2 = false;  
  80.       
  81.       
  82.     class MyAnimation extends Animation{  
  83.           
  84.         private int temp;  
  85.           
  86.         @Override 
  87.         public void initialize(int width, int height, int parentWidth,  
  88.                 int parentHeight) {  
  89.             temp = OffsetX;  
  90.             super.initialize(width, height, parentWidth, parentHeight);  
  91.             setDuration(500);  
  92.             setFillAfter(true);  
  93.             setInterpolator(new LinearInterpolator());  
  94.         }  
  95.           
  96.         @Override 
  97.         protected void applyTransformation(float interpolatedTime,  
  98.                 Transformation t) {  
  99. //          Log.i("bb", "OffsetX==>"+OffsetX);  
  100.             //需要滑動圖片時根據方向來變換OffsetX大小  
  101.             if(flag){  
  102.                 if(temp>0){  
  103.                     OffsetX = (int) ((FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp);  
  104.                 }else{  
  105.                     OffsetX = (int) ((-FlingImageDemo.SCREEN_WIDTH-temp)*interpolatedTime+temp);  
  106.                 }  
  107.             //不需要變換的情況  
  108.             }else{  
  109.                 OffsetX = (int) (temp*(1-interpolatedTime));  
  110.             }  
  111.               
  112.             invalidate();  
  113.         }  
  114.     }  
  115.     //動畫結束後需要做一些工作  
  116.     @Override 
  117.     protected void onAnimationEnd() {  
  118.         if (flag1) {  
  119.             nBitmap = bitmap;  
  120.             bitmap = fBitmap;  
  121.             fBitmap = null;  
  122.             postion = postion - 1;  
  123.         } else if (flag2) {  
  124.             fBitmap = bitmap;  
  125.             bitmap = nBitmap;  
  126.             nBitmap = null;  
  127.             postion = postion + 1;  
  128.         }  
  129.         flag1 = false;  
  130.         flag2 = false;  
  131.         OffsetX = 0;  
  132.         if(fBitmap == null && OffsetX == 0){  
  133.             if (postion > 0) {  
  134.                 fBitmap = getBitmap(postion-1);  
  135.             }  
  136.               
  137.         }else if(nBitmap == null && OffsetX==0){  
  138.             if (postion < bitmaps.length-1) {  
  139.                 nBitmap = getBitmap(postion+1);  
  140.             }  
  141.         }  
  142.         clearAnimation();  
  143.         flag = false;  
  144.     }  
  145.       
  146.     public void onFling(int paramFloat1) {  
  147.         if (OffsetX > FlingImageDemo.SCREEN_WIDTH/3) {  
  148.             if (fBitmap != null) {  
  149.                 flag = true;  
  150.                 flag1 = true;  
  151.             }  
  152.         } else if (OffsetX < -FlingImageDemo.SCREEN_WIDTH/3) {  
  153.             if (nBitmap != null) {  
  154.                 flag = true;  
  155.                 flag2 = true;  
  156.             }  
  157.         }  
  158.         //開始動畫效果  
  159.         startAnimation(new MyAnimation());  
  160.         invalidate();  
  161.           
  162.     }  
  163.     /**  
  164.      * 獲得當前位置的圖片  
  165.      * @param currentPos  
  166.      * @return  
  167.      */ 
  168.     public Bitmap getBitmap(int currentPos) {  
  169.         if (currentPos > bitmaps.length-1) {  
  170.             return null;  
  171.         }  
  172.         Bitmap currBitmap = bitmaps[currentPos];  
  173.         OffsetX = 0;  
  174.         OffsetY = 0;  
  175.            
  176.         return currBitmap;  
  177.     }  
  178. }  

 

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


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

 

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

 

 

  1. import android.app.Activity;  
  2. import android.graphics.Bitmap;  
  3. import android.graphics.BitmapFactory;  
  4. import android.os.Bundle;  
  5. import android.util.DisplayMetrics;  
  6. import android.view.GestureDetector;  
  7. import android.view.MotionEvent;  
  8. import android.view.GestureDetector.OnGestureListener;  
  9. public class FlingImageDemo extends Activity  implements OnGestureListener{  
  10.       
  11.     private FlingView flingView;  
  12.       
  13.     private  GestureDetector myGesture;  
  14.       
  15.       
  16.       
  17.     public static int SCREEN_WIDTH;  
  18.     public static int SCREEN_HEIGHT;  
  19.     @Override 
  20.     public void onCreate(Bundle savedInstanceState) {  
  21.           
  22.         DisplayMetrics  dm = new DisplayMetrics();  
  23.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
  24.           
  25.         //獲得手機的寬帶和高度像素單位為px  
  26.         SCREEN_WIDTH = dm.widthPixels;  
  27.         SCREEN_HEIGHT = dm.heightPixels;   
  28.         //位圖資源  不要小於2張  
  29.         Bitmap[] bitmaps = {  
  30.                 BitmapFactory  
  31.                         .decodeResource(getResources(), R.drawable.g1),  
  32.                 BitmapFactory  
  33.                         .decodeResource(getResources(), R.drawable.g3),  
  34.                 BitmapFactory  
  35.                         .decodeResource(getResources(), R.drawable.g4),  
  36. //              BitmapFactory  
  37. //                      .decodeResource(getResources(), R.drawable.g7),  
  38.                 BitmapFactory  
  39.                         .decodeResource(getResources(), R.drawable.g8) };  
  40.           
  41.         super.onCreate(savedInstanceState);  
  42.         flingView = new FlingView(this,bitmaps);  
  43.         setContentView(flingView);  
  44.         myGesture = new GestureDetector(this);  
  45.     }  
  46.     @Override 
  47.     public boolean onTouchEvent(MotionEvent event) {  
  48.           
  49.         switch (event.getAction()) {  
  50.         case MotionEvent.ACTION_UP:  
  51.             flingView.onFling(0);  
  52.             break;  
  53.         }  
  54.           
  55.         return myGesture.onTouchEvent(event);  
  56.     }  
  57.     @Override 
  58.     public boolean onDown(MotionEvent e) {  
  59.         // TODO Auto-generated method stub  
  60.         return false;  
  61.     }  
  62.     //手勢完成後調用  
  63.     @Override 
  64.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  65.             float velocityY) {  
  66.         flingView.onFling((int)-velocityX);  
  67.         return true;  
  68.     }  
  69.     @Override 
  70.     public void onLongPress(MotionEvent e) {  
  71.         // TODO Auto-generated method stub  
  72.           
  73.     }  
  74.     //滑動過程一直在調用  
  75.     @Override 
  76.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  77.             float distanceY) {  
  78.         flingView.handleScroll(-1*(int)distanceX);  
  79.         return true;  
  80.     }  
  81.     @Override 
  82.     public void onShowPress(MotionEvent e) {  
  83.         // TODO Auto-generated method stub  
  84.           
  85.     }  
  86.     @Override 
  87.     public boolean onSingleTapUp(MotionEvent e) {  
  88.         // TODO Auto-generated method stub  
  89.         return false;  
  90.     }  

 

實現OnGestureListener接口 在方法onFling和onScroll中分別調用

 

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

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android JSON解析器 Android Launcher研究(四)——桌面應用快捷方式的開發 Android源碼學習之觀察者模式應用及優點介紹 Android本地化 Android用simpleAdapter來直接顯示BMP圖片 Android本地化
android中使用SharedPreferences進行數據存儲的操作方法

很多時候我們開發的軟件需要向用戶提供軟件參數設置功能，例如我們常
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
android的編譯和運行過程深入分析

首先來看一下使用Java語言編寫的Android應用程序從源碼到
閱讀排行版
Copyright © Android教程網 All Rights Reserved