編輯:Android開發教程
在上一篇文章中我帶著大家一起實現了Android瀑布流照片牆的效果,雖然這種效果很炫很酷,但其實還 只能算是一個半成品,因為照片牆中所有的圖片都是只能看不能點的。因此本篇文章中,我們就來對這一功 能進行完善,加入點擊圖片就能浏覽大圖的功能,並且在浏覽大圖的時候還可以通過多點觸控的方式對圖片 進行縮放。
如果你還沒有看過 Android瀑布流照片牆實現,體驗不規則排列的美感 這篇文章,請盡 量先去閱讀完再來看本篇文章,因為這次的代碼完全是在上次的基礎上進行開發的。
那我們現在就開 始動手吧,首先打開上次的PhotoWallFallsDemo項目,在裡面加入一個ZoomImageView類,這個類就是用於進 行大圖展示和多點觸控縮放的,代碼如下所示:
public class ZoomImageView extends View { /** * 初始化狀態常量 */ public static final int STATUS_INIT = 1; /** * 圖片放大狀態常量 */ public static final int STATUS_ZOOM_OUT = 2; /** * 圖片縮小狀態常量 */ public static final int STATUS_ZOOM_IN = 3; /** * 圖片拖動狀態常量 */ public static final int STATUS_MOVE = 4; /** * 用於對圖片進行移動和縮放變換的矩陣 */ private Matrix matrix = new Matrix(); /** * 待展示的Bitmap對象 */ private Bitmap sourceBitmap; /** * 記錄當前操作的狀態,可選值為STATUS_INIT、STATUS_ZOOM_OUT、STATUS_ZOOM_IN和STATUS_MOVE */ private int currentStatus; /** * ZoomImageView控件的寬度 */ private int width; /** * ZoomImageView控件的高度 */ private int height; /** * 記錄兩指同時放在屏幕上時,中心點的橫坐標值 */ private float centerPointX; /** * 記錄兩指同時放在屏幕上時,中心點的縱坐標值 */ private float centerPointY; /** * 記錄當前圖片的寬度,圖片被縮放時,這個值會一起變動 */ private float currentBitmapWidth; /** * 記錄當前圖片的高度,圖片被縮放時,這個值會一起變動 */ private float currentBitmapHeight; /** * 記錄上次手指移動時的橫坐標 */ private float lastXMove = -1; /** * 記錄上次手指移動時的縱坐標 */ private float lastYMove = -1; /** * 記錄手指在橫坐標方向上的移動距離 */ private float movedDistanceX; /** * 記錄手指在縱坐標方向上的移動距離 */ private float movedDistanceY; /** * 記錄圖片在矩陣上的橫向偏移值 */ private float totalTranslateX; /** * 記錄圖片在矩陣上的縱向偏移值 */ private float totalTranslateY; /** * 記錄圖片在矩陣上的總縮放比例 */ private float totalRatio; /** * 記錄手指移動的距離所造成的縮放比例 */ private float scaledRatio; /** * 記錄圖片初始化時的縮放比例 */ private float initRatio; /** * 記錄上次兩指之間的距離 */ private double lastFingerDis; /** * ZoomImageView構造函數,將當前操作狀態設為STATUS_INIT。 * * @param context * @param attrs */ public ZoomImageView(Context context, AttributeSet attrs) { super(context, attrs); currentStatus = STATUS_INIT; } /** * 將待展示的圖片設置進來。 * * @param bitmap * 待展示的Bitmap對象 */ public void setImageBitmap(Bitmap bitmap) { sourceBitmap = bitmap; invalidate(); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (changed) { // 分別獲取到ZoomImageView的寬度和高度 width = getWidth(); height = getHeight(); } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getActionMasked()) { case MotionEvent.ACTION_POINTER_DOWN: if (event.getPointerCount() == 2) { // 當有兩個手指按在屏幕上時,計算兩指之間的距離 lastFingerDis = distanceBetweenFingers(event); } break; case MotionEvent.ACTION_MOVE: if (event.getPointerCount() == 1) { // 只有單指按在屏幕上移動時,為拖動狀態 float xMove = event.getX(); float yMove = event.getY(); if (lastXMove == -1 && lastYMove == -1) { lastXMove = xMove; lastYMove = yMove; } currentStatus = STATUS_MOVE; movedDistanceX = xMove - lastXMove; movedDistanceY = yMove - lastYMove; // 進行邊界檢查,不允許將圖片拖出邊界 if (totalTranslateX + movedDistanceX > 0) { movedDistanceX = 0; } else if (width - (totalTranslateX + movedDistanceX) > currentBitmapWidth) { movedDistanceX = 0; } if (totalTranslateY + movedDistanceY > 0) { movedDistanceY = 0; } else if (height - (totalTranslateY + movedDistanceY) > currentBitmapHeight) { movedDistanceY = 0; } // 調用onDraw()方法繪制圖片 invalidate(); lastXMove = xMove; lastYMove = yMove; } else if (event.getPointerCount() == 2) { // 有兩個手指按在屏幕上移動時,為縮放狀態 centerPointBetweenFingers(event); double fingerDis = distanceBetweenFingers(event); if (fingerDis > lastFingerDis) { currentStatus = STATUS_ZOOM_OUT; } else { currentStatus = STATUS_ZOOM_IN; } // 進行縮放倍數檢查,最大只允許將圖片放大4倍,最小可以縮小到初始化比例 if ((currentStatus == STATUS_ZOOM_OUT && totalRatio < 4 * initRatio) || (currentStatus == STATUS_ZOOM_IN && totalRatio > initRatio)) { scaledRatio = (float) (fingerDis / lastFingerDis); totalRatio = totalRatio * scaledRatio; if (totalRatio > 4 * initRatio) { totalRatio = 4 * initRatio; } else if (totalRatio < initRatio) { totalRatio = initRatio; } // 調用onDraw()方法繪制圖片 invalidate(); lastFingerDis = fingerDis; } } break; case MotionEvent.ACTION_POINTER_UP: if (event.getPointerCount() == 2) { // 手指離開屏幕時將臨時值還原 lastXMove = -1; lastYMove = -1; } break; case MotionEvent.ACTION_UP: // 手指離開屏幕時將臨時值還原 lastXMove = -1; lastYMove = -1; break; default: break; } return true; } /** * 根據currentStatus的值來決定對圖片進行什麼樣的繪制操作。 */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (currentStatus) { case STATUS_ZOOM_OUT: case STATUS_ZOOM_IN: zoom(canvas); break; case STATUS_MOVE: move(canvas); break; case STATUS_INIT: initBitmap(canvas); default: canvas.drawBitmap(sourceBitmap, matrix, null); break; } } /** * 對圖片進行縮放處理。 * * @param canvas */ private void zoom(Canvas canvas) { matrix.reset(); // 將圖片按總縮放比例進行縮放 matrix.postScale(totalRatio, totalRatio); float scaledWidth = sourceBitmap.getWidth() * totalRatio; float scaledHeight = sourceBitmap.getHeight() * totalRatio; float translateX = 0f; float translateY = 0f; // 如果當前圖片寬度小於屏幕寬度,則按屏幕中心的橫坐標進行水平縮放。否則按兩指的中心點的 橫坐標進行水平縮放 if (currentBitmapWidth < width) { translateX = (width - scaledWidth) / 2f; } else { translateX = totalTranslateX * scaledRatio + centerPointX * (1 - scaledRatio); // 進行邊界檢查,保證圖片縮放後在水平方向上不會偏移出屏幕 if (translateX > 0) { translateX = 0; } else if (width - translateX > scaledWidth) { translateX = width - scaledWidth; } } // 如果當前圖片高度小於屏幕高度,則按屏幕中心的縱坐標進行垂直縮放。否則按兩指的中心點的 縱坐標進行垂直縮放 if (currentBitmapHeight < height) { translateY = (height - scaledHeight) / 2f; } else { translateY = totalTranslateY * scaledRatio + centerPointY * (1 - scaledRatio); // 進行邊界檢查,保證圖片縮放後在垂直方向上不會偏移出屏幕 if (translateY > 0) { translateY = 0; } else if (height - translateY > scaledHeight) { translateY = height - scaledHeight; } } // 縮放後對圖片進行偏移,以保證縮放後中心點位置不變 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; currentBitmapWidth = scaledWidth; currentBitmapHeight = scaledHeight; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進行平移處理 * * @param canvas */ private void move(Canvas canvas) { matrix.reset(); // 根據手指移動的距離計算出總偏移值 float translateX = totalTranslateX + movedDistanceX; float translateY = totalTranslateY + movedDistanceY; // 先按照已有的縮放比例對圖片進行縮放 matrix.postScale(totalRatio, totalRatio); // 再根據移動距離進行偏移 matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; canvas.drawBitmap(sourceBitmap, matrix, null); } /** * 對圖片進行初始化操作,包括讓圖片居中,以及當圖片大於屏幕寬高時對圖片進行壓縮。 * * @param canvas */ private void initBitmap(Canvas canvas) { if (sourceBitmap != null) { matrix.reset(); int bitmapWidth = sourceBitmap.getWidth(); int bitmapHeight = sourceBitmap.getHeight(); if (bitmapWidth > width || bitmapHeight > height) { if (bitmapWidth - width > bitmapHeight - height) { // 當圖片寬度大於屏幕寬度時,將圖片等比例壓縮,使它可以完全顯示出來 float ratio = width / (bitmapWidth * 1.0f); matrix.postScale(ratio, ratio); float translateY = (height - (bitmapHeight * ratio)) / 2f; // 在縱坐標方向上進行偏移,以保證圖片居中顯示 matrix.postTranslate(0, translateY); totalTranslateY = translateY; totalRatio = initRatio = ratio; } else { // 當圖片高度大於屏幕高度時,將圖片等比例壓縮,使它可以完全顯示出來 float ratio = height / (bitmapHeight * 1.0f); matrix.postScale(ratio, ratio); float translateX = (width - (bitmapWidth * ratio)) / 2f; // 在橫坐標方向上進行偏移,以保證圖片居中顯示 matrix.postTranslate(translateX, 0); totalTranslateX = translateX; totalRatio = initRatio = ratio; } currentBitmapWidth = bitmapWidth * initRatio; currentBitmapHeight = bitmapHeight * initRatio; } else { // 當圖片的寬高都小於屏幕寬高時,直接讓圖片居中顯示 float translateX = (width - sourceBitmap.getWidth()) / 2f; float translateY = (height - sourceBitmap.getHeight()) / 2f; matrix.postTranslate(translateX, translateY); totalTranslateX = translateX; totalTranslateY = translateY; totalRatio = initRatio = 1f; currentBitmapWidth = bitmapWidth; currentBitmapHeight = bitmapHeight; } canvas.drawBitmap(sourceBitmap, matrix, null); } } /** * 計算兩個手指之間的距離。 * * @param event * @return 兩個手指之間的距離 */ private double distanceBetweenFingers(MotionEvent event) { float disX = Math.abs(event.getX(0) - event.getX(1)); float disY = Math.abs(event.getY(0) - event.getY(1)); return Math.sqrt(disX * disX + disY * disY); } /** * 計算兩個手指之間中心點的坐標。 * * @param event */ private void centerPointBetweenFingers(MotionEvent event) { float xPoint0 = event.getX(0); float yPoint0 = event.getY(0); float xPoint1 = event.getX(1); float yPoint1 = event.getY(1); centerPointX = (xPoint0 + xPoint1) / 2; centerPointY = (yPoint0 + yPoint1) / 2; } }
本例介紹創建一個測試項目的一般步驟和編寫測試用例的基本方法。為簡單起見,創建一個HelloWorld應用,帶有一 個Greeting類,其定義如下:public clas
如果想要添加OpenCV的依賴庫, 則需要把OpenCV的"D:\OpenCV-2.4.9-android-sdk\sdk\java"文件夾復制到An
概述隨著移動互聯網的發展,更多的內容需要從傳統互聯網延伸到移動終端呈現。一般的做法有三 種:1. Web APP:利用 HTML5 技術,例如 JQuery mobil
年前研究了一下Android如何實現無線互傳的功能,寫了個小demo,最近無事,遂整理一下,與各位共享。前期調研發現,Android想要實現無線互傳有以下幾種技術:1,B