Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果(二)
上一篇已經(jīng)帶大家實現(xiàn)了自由的放大縮小圖片，簡單介紹了下Matrix；具體請參考：Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果，本篇繼續(xù)完善我們的ImageView。
首先加入放大后的移動。
1、自由的進(jìn)行移動
我們在onTouchEvent里面，加上移動的代碼，當(dāng)然了，必須長或?qū)挻笥谄聊徊趴梢砸苿觺~~
@Override
public boolean onTouch(View v, MotionEvent event)
{
mScaleGestureDetector.onTouchEvent(event);
float x = 0, y = 0;
// 拿到觸摸點的個數(shù)
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;
/**
* 每當(dāng)觸摸點發(fā)生變化時，重置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;
}
首先我們拿到觸摸點的數(shù)量，然后求出多個觸摸點的平均值，設(shè)置給我們的mLastX , mLastY ， 然后在移動的時候，得到dx ,dy 進(jìn)行范圍檢查以后，調(diào)用mScaleMatrix.postTranslate進(jìn)行設(shè)置偏移量，當(dāng)然了，設(shè)置完成以后，還需要再次校驗一下，不能把圖片移動的與屏幕邊界出現(xiàn)白邊，校驗完成后，調(diào)用setImageMatrix.
這里：需要注意一下，我們沒有復(fù)寫ACTION_DOWM，是因為，ACTION_DOWN在多點觸控的情況下，只要有一個手指按下狀態(tài)，其他手指按下不會再次觸發(fā)ACTION_DOWN，但是多個手指以后，觸摸點的平均值會發(fā)生很大變化，所以我們沒有用到ACTION_DOWN。每當(dāng)觸摸點的數(shù)量變化，我們就會跟新當(dāng)前的mLastX,mLastY.
下面是上面用到的兩個私有方法，一個用于檢查邊界，一個用于判斷是否是拖動的操作：
/**
* 移動時，進(jìn)行邊界判斷，主要判斷寬或高大于屏幕的
*/
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設(shè)置監(jiān)聽器的話，方法一大串，而我們只需要onDoubleTap這個回調(diào)，所以我們準(zhǔn)備使用它的一個內(nèi)部類SimpleOnGestureListener，對接口的其他方法實現(xiàn)了空實現(xiàn)。
不過還有幾個問題需要討論下，才能開始我們的代碼：
我們雙擊尺寸如何變化？
我是這樣的，根據(jù)當(dāng)前的縮放值，如果是小于2的，我們雙擊直接到變?yōu)樵瓐D的2倍；如果是2,4之間的，我們雙擊直接為原圖的4倍；其他狀態(tài)也就是4倍，雙擊后還原到最初的尺寸。
如果你覺得這樣不合適，可以根據(jù)自己的愛好調(diào)整。
我們雙擊變化，需要一個動畫，比如我們上例的演示圖，圖片很大，全屏顯示的時候initScale=0.5左后，如果雙擊后變?yōu)?，也就是瞬間大了四倍，沒有一個過渡的效果的話，給用戶的感覺會特別差。所以，我們準(zhǔn)備使用postDelay執(zhí)行一個Runnable，Runnable中再次根據(jù)的當(dāng)然的縮放值繼續(xù)執(zhí)行。
首先我們在構(gòu)造方法中，完成對GestureDetector的初始化，以及設(shè)置onDoubleTap監(jiān)聽
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、當(dāng)雙擊的時候，首先判斷是否正在自動縮放，如果在，直接retrun ;
- 2、然后就進(jìn)入了我們的if，如果當(dāng)然是scale小于2，則通過view.發(fā)送一個Runnable進(jìn)行執(zhí)行；其他類似；
下面看我們的Runnable的代碼：
/**
* 自動縮放的任務(wù)
*
* @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;
/**
* 傳入目標(biāo)縮放值，根據(jù)目標(biāo)值與當(dāng)前值，判斷應(yīng)該放大還是縮小
*
* @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()
{
// 進(jìn)行縮放
mScaleMatrix.postScale(tmpScale, tmpScale, x, y);
checkBorderAndCenterWhenScale();
setImageMatrix(mScaleMatrix);
final float currentScale = getScale();
//如果值在合法范圍內(nèi)，繼續(xù)縮放
if (((tmpScale > 1f) && (currentScale < mTargetScale))
|| ((tmpScale < 1f) && (mTargetScale < currentScale)))
{
ZoomImageView.this.postDelayed(this, 16);
} else//設(shè)置為目標(biāo)的縮放比例
{
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> </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;
}
});
}
}
現(xiàn)在直接運行，發(fā)現(xiàn)ViewPager好著呢，但是我們的圖片放大以后，移動和ViewPager沖突了，又不能移動了~。。。擦擦擦。。。
3）、處理沖突
現(xiàn)在我們迅速的想一想，記得之前學(xué)習(xí)過事件分發(fā)機(jī)制，我們的ZoomImageView在ViewPager中，如果我們不想被攔截，那么如何做呢？
首先不想被攔截的條件是：我們的寬或高大于屏幕寬或高時，因為此時可以移動，我們不想被攔截。接下來，不想被攔截：
getParent().requestDisallowInterceptTouchEvent(true);
一行代碼足以，如果你對事件分發(fā)中，不被攔截不清晰，可以參考：如何不被攔截 。
放在一起我們的代碼就是：
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);
}
當(dāng)寬或高大于屏幕寬或高時，拖動效果認(rèn)為是移動圖片，反之則讓ViewPager去處理。
此時的效果：
ok，現(xiàn)在已經(jīng)解決了和ViewPager的沖突。
4、到達(dá)邊界事件交給ViewPager處理
可能有些用戶還希望，當(dāng)圖片到達(dá)邊界時，不能再拖動的時候，能夠把事件給ViewPager
那就在ACTION_MOVE中，判斷當(dāng)前已經(jīng)到達(dá)邊界，且還在拉的時候，事件交給ViewPager
if (isCanDrag)
{
if (getDrawable() != null)
{
if (getMatrixRectF().left == 0 && dx > 0)
{
getParent().requestDisallowInterceptTouchEvent(false);
}
if (getMatrixRectF().right == getWidth() && dx < 0)
{
getParent().requestDisallowInterceptTouchEvent(false);
}
此時的效果：
到此，我們的Android 手勢檢測實戰(zhàn) 打造支持縮放平移的圖片預(yù)覽效果 結(jié)束~~！
建議把雙擊放大到4倍的地方，注釋掉一個If
// else if (getScale() >= SCALE_MID
// && getScale() < SCALE_MAX)
// {
// ZoomImageView.this.postDelayed(
// new AutoScaleRunnable(SCALE_MAX, x, y), 16);
// isAutoScale = true;
// }
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，大家也可以動手實踐一下Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果。
相關(guān)文章
Android指紋識別功能深入淺出分析到實戰(zhàn)（6.0以下系統(tǒng)解決方案）
指紋識別在現(xiàn)實應(yīng)用中已經(jīng)很多了，本篇文章主要介紹了Android指紋識別功能，具有一定的參考價值，有需要的可以了解一下。2016-11-11
本文介紹怎樣利用RxJava來實現(xiàn)Android的啟動頁，啟動頁的效果非?？?，有需要的朋友們可以參考。2016-07-07
Android用Scroller實現(xiàn)一個可向上滑動的底部導(dǎo)航欄
本篇文章主要介紹了Android用Scroller實現(xiàn)一個可上滑的底部導(dǎo)航欄，具有一定的參考價值，有興趣的小伙伴們可以參考一下2017-07-07
Android多線程斷點續(xù)傳下載實現(xiàn)代碼
這篇文章主要介紹了Android多線程斷點續(xù)傳下載實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Android Sqlite命令詳解(基本命令)的相關(guān)資料,需要的朋友可以參考下2015-12-12
Android RecyclerView 實現(xiàn)快速滾動的示例代碼
本篇文章主要介紹了Android RecyclerView 實現(xiàn)快速滾動的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Android仿微信圖片點擊瀏覽的效果，Android 2D平滑放大顯示ImageView,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
強(qiáng)制去除Unity自動添加的Android隱私權(quán)限
大家好，本篇文章主要講的是強(qiáng)制去除Unity自動添加的Android隱私權(quán)限，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
這篇文章主要介紹了Android編程常用技巧實例總結(jié),包括Android對話框、分辨率、資源、字體等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
本篇文章主要介紹了android教你打造獨一無二的下拉刷新加載框架，具有一定的參考價值，有興趣的可以了解一下。2017-03-03