Android 手勢檢測實戰 打造支援縮放平移的圖片預覽效果(下)
上一篇已經帶大家實現了自由的放大縮小圖片,簡單介紹了下Matrix;具體請參考:Android 手勢檢測實戰 打造支援縮放平移的圖片預覽效果(上);本篇繼續完善我們的ImageView~~
首先加入放大後的移動~~
1、自由的進行移動
我們在onTouchEvent裡面,加上移動的程式碼,當然了,必須長或寬大於螢幕才可以移動~~~
@Override public boolean onTouch(View v, MotionEvent event) { mScaleGestureDetector.onTouchEvent(event); float x = 0, y = 0; // 拿到觸控點的個數 final int pointerCount = event.getPointerCount(); // 得到多個觸控點的x與y均值 for (int i = 0; i < pointerCount; i++) { x += event.getX(i); y += event.getY(i); } x = x / pointerCount; y = y / pointerCount; /** * 每當觸控點發生變化時,重置mLasX , mLastY */ if (pointerCount != lastPointerCount) { isCanDrag = false; mLastX = x; mLastY = y; } lastPointerCount = pointerCount; switch (event.getAction()) { case MotionEvent.ACTION_MOVE: Log.e(TAG, "ACTION_MOVE"); float dx = x - mLastX; float dy = y - mLastY; if (!isCanDrag) { isCanDrag = isCanDrag(dx, dy); } if (isCanDrag) { RectF rectF = getMatrixRectF(); if (getDrawable() != null) { isCheckLeftAndRight = isCheckTopAndBottom = true; // 如果寬度小於螢幕寬度,則禁止左右移動 if (rectF.width() < getWidth()) { dx = 0; isCheckLeftAndRight = false; } // 如果高度小雨螢幕高度,則禁止上下移動 if (rectF.height() < getHeight()) { dy = 0; isCheckTopAndBottom = false; } mScaleMatrix.postTranslate(dx, dy); checkMatrixBounds(); setImageMatrix(mScaleMatrix); } } mLastX = x; mLastY = y; break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: Log.e(TAG, "ACTION_UP"); lastPointerCount = 0; break; } return true; }
首先我們拿到觸控點的數量,然後求出多個觸控點的平均值,設定給我們的mLastX , mLastY , 然後在移動的時候,得到dx ,dy 進行範圍檢查以後,呼叫mScaleMatrix.postTranslate進行設定偏移量,當然了,設定完成以後,還需要再次校驗一下,不能把圖片移動的與螢幕邊界出現白邊,校驗完成後,呼叫setImageMatrix.
這裡:需要注意一下,我們沒有複寫ACTION_DOWM,是因為,ACTION_DOWN在多點觸控的情況下,只要有一個手指按下狀態,其他手指按下不會再次觸發ACTION_DOWN,但是多個手指以後,觸控點的平均值會發生很大變化,所以我們沒有用到ACTION_DOWN。每當觸控點的數量變化,我們就會跟新當前的mLastX,mLastY.
下面是上面用到的兩個私有方法,一個用於檢查邊界,一個用於判斷是否是拖動的操作:
/** * 移動時,進行邊界判斷,主要判斷寬或高大於螢幕的 */ private void checkMatrixBounds() { RectF rect = getMatrixRectF(); float deltaX = 0, deltaY = 0; final float viewWidth = getWidth(); final float viewHeight = getHeight(); // 判斷移動或縮放後,圖片顯示是否超出螢幕邊界 if (rect.top > 0 && isCheckTopAndBottom) { deltaY = -rect.top; } if (rect.bottom < viewHeight && isCheckTopAndBottom) { deltaY = viewHeight - rect.bottom; } if (rect.left > 0 && isCheckLeftAndRight) { deltaX = -rect.left; } if (rect.right < viewWidth && isCheckLeftAndRight) { deltaX = viewWidth - rect.right; } mScaleMatrix.postTranslate(deltaX, deltaY); } /** * 是否是推動行為 * * @param dx * @param dy * @return */ private boolean isCanDrag(float dx, float dy) { return Math.sqrt((dx * dx) + (dy * dy)) >= mTouchSlop; }
這樣,我們就可以快樂的放大、縮小加移動了~~~
效果圖:這次換個男人的圖片,我們越獄的主角之一,TBug~
我們的縮放+移動搞定~~
2、雙擊放大與縮小
談到雙擊事件,我們的GestureDetector終於要登場了,這哥們可以捕獲雙擊事件~~
1、GestureDetector的使用
因為GestureDetector設定監聽器的話,方法一大串,而我們只需要onDoubleTap這個回撥,所以我們準備使用它的一個內部類SimpleOnGestureListener,對介面的其他方法實現了空實現。
不過還有幾個問題需要討論下,才能開始我們的程式碼:
1、我們雙擊尺寸如何變化?
我是這樣的,根據當前的縮放值,如果是小於2的,我們雙擊直接到變為原圖的2倍;如果是2,4之間的,我們雙擊直接為原圖的4倍;其他狀態也就是4倍,雙擊後還原到最初的尺寸。
如果你覺得這樣不合適,可以根據自己的愛好調整。
2、我們雙擊變化,需要一個動畫~~比如我們上例的演示圖,圖片很大,全屏顯示的時候initScale=0.5左後,如果雙擊後變為2,也就是瞬間大了四倍,沒有一個過渡的效果的話,給使用者的感覺會特別差。所以,我們準備使用postDelay執行一個Runnable,Runnable中再次根據的當然的縮放值繼續執行。
首先我們在構造方法中,完成對GestureDetector的初始化,以及設定onDoubleTap監聽
public ZoomImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
mScaleGestureDetector = new ScaleGestureDetector(context, this);
mGestureDetector = new GestureDetector(context,
new SimpleOnGestureListener()
{
@Override
public boolean onDoubleTap(MotionEvent e)
{
if (isAutoScale == true)
return true;
float x = e.getX();
float y = e.getY();
Log.e("DoubleTap", getScale() + " , " + initScale);
if (getScale() < SCALE_MID)
{
ZoomImageView.this.postDelayed(
new AutoScaleRunnable(SCALE_MID, x, y), 16);
isAutoScale = true;
} else if (getScale() >= SCALE_MID
&& getScale() < SCALE_MAX)
{
ZoomImageView.this.postDelayed(
new AutoScaleRunnable(SCALE_MAX, x, y), 16);
isAutoScale = true;
} else
{
ZoomImageView.this.postDelayed(
new AutoScaleRunnable(initScale, x, y), 16);
isAutoScale = true;
}
return true;
}
});
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
super.setScaleType(ScaleType.MATRIX);
this.setOnTouchListener(this);
}
1、當雙擊的時候,首先判斷是否正在自動縮放,如果在,直接retrun ;
2、然後就進入了我們的if,如果當然是scale小於2,則通過view.傳送一個Runnable進行執行;其他類似;
下面看我們的Runnable的程式碼:
/**
* 自動縮放的任務
*
* @author zhy
*
*/
private class AutoScaleRunnable implements Runnable
{
static final float BIGGER = 1.07f;
static final float SMALLER = 0.93f;
private float mTargetScale;
private float tmpScale;
/**
* 縮放的中心
*/
private float x;
private float y;
/**
* 傳入目標縮放值,根據目標值與當前值,判斷應該放大還是縮小
*
* @param targetScale
*/
public AutoScaleRunnable(float targetScale, float x, float y)
{
this.mTargetScale = targetScale;
this.x = x;
this.y = y;
if (getScale() < mTargetScale)
{
tmpScale = BIGGER;
} else
{
tmpScale = SMALLER;
}
}
@Override
public void run()
{
// 進行縮放
mScaleMatrix.postScale(tmpScale, tmpScale, x, y);
checkBorderAndCenterWhenScale();
setImageMatrix(mScaleMatrix);
final float currentScale = getScale();
//如果值在合法範圍內,繼續縮放
if (((tmpScale > 1f) && (currentScale < mTargetScale))
|| ((tmpScale < 1f) && (mTargetScale < currentScale)))
{
ZoomImageView.this.postDelayed(this, 16);
} else//設定為目標的縮放比例
{
final float deltaScale = mTargetScale / currentScale;
mScaleMatrix.postScale(deltaScale, deltaScale, x, y);
checkBorderAndCenterWhenScale();
setImageMatrix(mScaleMatrix);
isAutoScale = false;
}
}
}
程式碼寫完了,我們依然需要把我們的event傳給它,依然是在onTouch方法:
@Override
public boolean onTouch(View v, MotionEvent event)
{
if (mGestureDetector.onTouchEvent(event))
return true;
好了,雙擊放大與縮小的功能就搞定了,下面測試下~~~
效果圖,終於可以用模擬器了~~:
3、處理與ViewPager的衝突
直接把我們的圖片作為ViewPager的Item,可想而知,肯定有衝突~~
1、佈局檔案
<RelativeLayout 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.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
2、Activity程式碼
package com.zhy.zhy_scalegesturedetector02;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.zhy.view.ZoomImageView;
public class MainActivity extends Activity
{
private ViewPager mViewPager;
private int[] mImgs = new int[] { R.drawable.tbug, R.drawable.a,
R.drawable.xx };
private ImageView[] mImageViews = new ImageView[mImgs.length];
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.vp);
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
mViewPager.setAdapter(new PagerAdapter()
{
@Override
public Object instantiateItem(ViewGroup container, int position)
{
ZoomImageView imageView = new ZoomImageView(
getApplicationContext());
imageView.setImageResource(mImgs[position]);
container.addView(imageView);
mImageViews[position] = imageView;
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object)
{
container.removeView(mImageViews[position]);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1)
{
return arg0 == arg1;
}
@Override
public int getCount()
{
return mImgs.length;
}
});
}
}
現在直接執行,發現ViewPager好著呢,但是我們的圖片放大以後,移動和ViewPager衝突了,又不能移動了~。。。擦擦擦。。。
3、處理衝突
現在我們迅速的想一想,記得之前學習過事件分發機制,我們的ZoomImageView在ViewPager中,如果我們不想被攔截,那麼如何做呢?
首先不想被攔截的條件是:我們的寬或高大於螢幕寬或高時,因為此時可以移動,我們不想被攔截。接下來,不想被攔截:
getParent().requestDisallowInterceptTouchEvent(true);
一行程式碼足以,如果你對事件分發中,不被攔截不清晰,可以參考:如何不被攔截 。
放在一起我們的程式碼就是:
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
if (rectF.width() > getWidth() || rectF.height() > getHeight())
{
getParent().requestDisallowInterceptTouchEvent(true);
}
break;
case MotionEvent.ACTION_MOVE:
if (rectF.width() > getWidth() || rectF.height() > getHeight())
{
getParent().requestDisallowInterceptTouchEvent(true);
}
~當寬或高大於螢幕寬或高時,拖動效果認為是移動圖片,反之則讓ViewPager去處理
此時的效果:
ok,現在已經解決了和ViewPager的衝突,ps:尼瑪不應該雙擊還能放大兩次到4倍,,,,,好惡心。。。
4、到達邊界事件交給ViewPager處理
可能有些使用者還希望,當圖片到達邊界時,不能再拖動的時候,能夠把事件給ViewPager
那就在ACTION_MOVE中,判斷當前已經到達邊界,且還在拉的時候,事件交給ViewPager
if (isCanDrag)
{
if (getDrawable() != null)
{
if (getMatrixRectF().left == 0 && dx > 0)
{
getParent().requestDisallowInterceptTouchEvent(false);
}
if (getMatrixRectF().right == getWidth() && dx < 0)
{
getParent().requestDisallowInterceptTouchEvent(false);
}
此時的效果:
好了,其實添加了這個之後,體驗一般哈~~~
終於寫完了,程式碼中可能存在BUG,發現問題,或者解決了發現的BUG時,希望可以直接在部落格下面留言,也能夠方便他人~~
到此,我們的Android 手勢檢測實戰 打造支援縮放平移的圖片預覽效果 結束~~!
建議把雙擊放大到4倍的地方,註釋掉一個If
// else if (getScale() >= SCALE_MID
// && getScale() < SCALE_MAX)
// {
// ZoomImageView.this.postDelayed(
// new AutoScaleRunnable(SCALE_MAX, x, y), 16);
// isAutoScale = true;
// }
連續雙擊放大,感覺不爽,程式碼已經上傳,我就不重傳了,如果你也覺得不爽,可以自行註釋。
----------------------------------------------------------------------------------------------------------
博主部分視訊已經上線,如果你不喜歡枯燥的文字,請猛戳(初錄,期待您的支援):