Android viewpager + 可缩放的imageview
http://files.cnblogs.com/files/liaolandemengxiang/PhotoWallFallsDemo.rar
http://files.cnblogs.com/files/liaolandemengxiang/ViewPager_imageview%E7%9A%84%E7%BC%A9%E6%94%BE%E4%BC%98%E5%8C%96%E5%90%8E.rar
第一个地址是中心缩放的demo，值得注意的是，这里面的位移是相对于（0,0）位置的偏移量，每次都是画布重新画图片
第二个是优化了以后的viewpager 和zoomimageview的组合的demo，是通过imageview的回调函数还控制viewpager是否可以缩放。并对原来的bug进行修改。bug主要的问题是存在于没有考虑高度大于屏幕高度的长图片的缩放，已经中心位置的计算错误。还有就是对于最大缩放倍数的理解，初始化缩放比例是X，可是视为1，最大缩放倍数应该是X的倍数。
引自http://www.cnblogs.com/linjzong/p/4212474.html
在上一篇Android:手把手教你打造可缩放移动的ImageView最后提出了一个注意点：当自定义的MatrixImageView如ViewPager、ListView等带有滑动效果的ViewGroup中时，ImageView自定义的拖动事件会和ViewGroup的滑动事件冲突，并且指出了冲突原因是由于ViewGroup拦截了Move事件的缘故。如果对于Touch事件的分发机制不甚了解的话，可以参考下这篇Android:30分钟弄明白Touch事件分发机制。
这篇文章将会在MatrixImageView的基础上，以ViewPager作为测试容器做进一步优化。
实现功能
- 当进行缩放操作时，手势不会同时触发ViewPager的滑动切换Item事件。
- 当进行拖动操作时，除非图片已经到达左右边界，否则不触发ViewPager的滑动切换Item事件。
- 当进行拖动操作时，若图片左边缘到达左边界，则可以向左滑动触发ViewPager切换至前一个Item;当图片右边缘到达右边界，则可以向右滑动触发ViewPager的切换至后一个Item。
- 每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)，防止多重事务互相干扰。
- 将事务处理封装到MatrixImageView类内，提供状态接口给ViewPager使用，方便适配多种ViewGroup。
实现原理
当ViewPager内嵌MatrixImageView时，由于MatrixImgaeView在Down事件中返回了true，表明ViewPager将捕获本次完整的Touch事件(Move-Ponit_Down-UP等等)，其中最重要的一个事件便是Move事件，因为ViewPager自身需要捕获Move事件在onTouch中进行切换Item操作，MatrixImageView的捕获意味着它将无法响应。不过，ViewPager本身控制着Touch事件的下发操作，每个Touch事件的下发都遵从从上至下层层递归，在MatrixImageView真正获得Move事件前，Move事件必须经过ViewPager的onInterceptTouchEvent和dispatchTouchEvent事件，前者执行拦截操作后者执行下发操作。ViewPager便是在onInterceptTouchEvent中对Move事件进行了过滤，当移动距离超过一定值时，它会拦截掉Move事件，阻止MatrixImageView继续处理Touch事件的权利，转而让自身的onTouch事件处理。于是，我们要做的便是重写onInterceptTouchEvent事件，通过判断MatrixImageView的状态决定是否拦截。
具体实现
由于容器ViewPager在满足条件的时候会拦截掉子View的touch事件，因此需要自定义个ViewPager修改拦截逻辑。当MatriImageView进行缩放和拖动时，我们不希望ViewPager拦截。具体代码如下：
public class AlbumViewPager extends ViewPager implements OnChildMovingListener {
/** 当前子控件是否处理拖动状态 */
private boolean mChildIsBeingDragged=false;
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
if(mChildIsBeingDragged)
return false;
return super.onInterceptTouchEvent(arg0);
}
@Override
public void startDrag() {
// TODO Auto-generated method stub
mChildIsBeingDragged=true;
}
@Override
public void stopDrag() {
// TODO Auto-generated method stub
mChildIsBeingDragged=false;
}
}
public interface OnChildMovingListener{
public void startDrag();
public void stopDrag();
}
通过判断变量mChildIsBeingDragged的值决定是否拦截，而mChildIsBeingDragged的值通过OnChildMovingListener接口由MatriImageView进行设置。别忘了在PagerAdapter的instantiateItem中给MatriImageView设置监听接口
MatrixImageView imageView = (MatrixImageView) imageLayout.findViewById(R.id.image);
imageView.setOnMovingListener(AlbumViewPager.this);
ViewPager的改造便完成了，只需要新增一个变量和实现一个接口，之后对于事件的拦截操作都转到了MatrixImageView中。
接下去看下改造后的MatrixImageView的onTouch方法。
/** 和ViewPager交互相关，判断当前是否可以左移、右移 */
boolean mLeftDragable;
boolean mRightDragable;
/** 是否第一次移动 */
boolean mFirstMove=false;
private PointF mStartPoint = new PointF();
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
//设置拖动模式
mMode=MODE_DRAG;
mStartPoint.set(event.getX(), event.getY());
isMatrixEnable();
startMove();
checkDragable();
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
reSetMatrix();
stopMove();
break;
case MotionEvent.ACTION_MOVE:
if (mMode == MODE_ZOOM) {
setZoomMatrix(event);
}else if (mMode==MODE_DRAG) {
setDragMatrix(event);
}else {
stopMove();
}
break;
case MotionEvent.ACTION_POINTER_DOWN:
if(mMode==MODE_UNABLE) return true;
mMode=MODE_ZOOM;
mStartDis = distance(event);
break;
case MotionEvent.ACTION_POINTER_UP:
break;
default:
break;
}
return mGestureDetector.onTouchEvent(event);
}
其中加红部分的代码都是修改后的代码，逐一分析。
/**
* 子控件开始进入移动状态，令ViewPager无法拦截对子控件的Touch事件
*/
private void startDrag(){
if(moveListener!=null) moveListener.startDrag();
}
/**
* 子控件开始停止移动状态，ViewPager将拦截对子控件的Touch事件
*/
private void stopDrag(){
if(moveListener!=null) moveListener.stopDrag();
}
startDrag和stopDrag方法很简单，就是调用ViewPager传递进来的OnChildMovingListener接口进行mChildIsBeingDragged的设置。当监听到down事件时，表示开始拖动，当接收到up和cancel事件时，表示结束拖动，以这个逻辑来说，ViewGroup将永远无法拦截touch事件，所以我们还需要在其他地方设置stopDrag事件，后面说明。
接下去是在down事件中执行checkDragable方法：
/**
* 根据当前图片左右边缘设置可拖拽状态
*/
private void checkDragable() {
mLeftDragable=true;
mRightDragable=true;
mFirstMove=true;
float[] values=new float[9];
getImageMatrix().getValues(values);
//图片左边缘离开左边界，表示不可右移
if(values[Matrix.MTRANS_X]>=0)
mRightDragable=false;
//图片右边缘离开右边界，表示不可左移
if((mImageWidth)*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X]<=getWidth()){
mLeftDragable=false;
}
}
该方法将会重置mLeftDragable、mRightDragable、mFirstMove三个参数的状态。mLeftDragable表示当前状态下的Matrix可以向左拖动，mRightDragable表示当前状态下的Matrix可以向右拖动，mFirstMove为每次完整touch事件(从down到up或cancel)中的第一次拖动操作标志。其中mLeftDragable和mRightDragable都是根据Matrix矩阵的数值计算出来的。
由于前面功能需求的时候说过"每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)"，因此当进行缩放操作时，就不会再执行切换Item操作了，可以等缩放结束后执行up操作时stopDrag。而Move操作重点就是要识别是切换item还是拖动图片了。查看修改后的setDragMatrix代码
/**
* 设置拖拽状态下的Matrix
* @param event
*/
public void setDragMatrix(MotionEvent event) {
if(isZoomChanged()){
float dx = event.getX() - mStartPoint.x; // 得到x轴的移动距离
float dy = event.getY() - mStartPoint.y; // 得到x轴的移动距离
//避免和双击冲突,大于10f才算是拖动
if(Math.sqrt(dx*dx+dy*dy)>10f){
mStartPoint.set(event.getX(), event.getY());
//在当前基础上移动
mCurrentMatrix.set(getImageMatrix());
float[] values=new float[9];
mCurrentMatrix.getValues(values);
dy=checkDyBound(values,dy);
dx=checkDxBound(values,dx,dy);
mCurrentMatrix.postTranslate(dx, dy);
setImageMatrix(mCurrentMatrix);
}
}else {
stopDrag();
}
}
/**
* 和当前矩阵对比，检验dx，使图像移动后不会超出ImageView边界
* @param values
* @param dx
* @return
*/
private float checkDxBound(float[] values,float dx,float dy) {
float width=getWidth();
if(!mLeftDragable&&dx<0){
//加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item
if(Math.abs(dx)*0.4f>Math.abs(dy)&&mFirstMove){
stopDrag();
}
return 0;
}
if(!mRightDragable&&dx>0){
//加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item
if(Math.abs(dx)*0.4f>Math.abs(dy)&&mFirstMove){
stopDrag();
}
return 0;
}
mLeftDragable=true;
mRightDragable=true;
if(mFirstMove) mFirstMove=false;
if(mImageWidth*values[Matrix.MSCALE_X]<width){
return 0;
}
if(values[Matrix.MTRANS_X]+dx>0){
dx=-values[Matrix.MTRANS_X];
}
else if(values[Matrix.MTRANS_X]+dx<-(mImageWidth*values[Matrix.MSCALE_X]-width)){
dx=-(mImageWidth*values[Matrix.MSCALE_X]-width)-values[Matrix.MTRANS_X];
}
return dx;
}
处理逻辑是这样的：
1.判断当前缩放级别是否是原始缩放级别(isZoomChanged()),如果未缩放过那将可以直接切换Item，在这直接stopDrag。
2.若进行了缩放，那判断是否累移动了10f，当移动了10f之后计算出x轴和y轴的移动量，并且通过checkDyBound方法计算出y轴的真实移动量
3.进入checkDxBound方法，首先判断当前是否能够左移，如果不能左移而实际的x轴偏移量是向左的，那就返回x的偏移量为0，防止左移。同时，如果当前是第一次移动，那就表示本次不是左移操作，而是向前切换item，于是执行stopDrag方法，令ViewPager拦截掉对MatrixImageView的事件分发。另外在这里加入和Y轴偏移量的对比，是为了防止执行的是垂直方向的滑动而导致stopDrag，ViewPager自身对于X轴偏移量/2小于Y轴偏移量的情况是不当成切换Item意图的，这里设置为*0.4可以保证不冲突。
4.右移同理。
5.当第一次左移和右移判断结果都不是切换Item后，将mLeftDragable和mRightDragable都设置为true，表示可以正常移动了。之后就和单个MatrixImageView的拖动处理一样了。
到此便完成了内嵌到ViewGroup内的MatriImageView的改造。下面还有两点显示优化。
首先在reSetMatrix中加入了新的功能：当缩放后的图片高度未达到ImageView高度时，在up和cancel之后会将其Y轴居中，防止“放大图片-Y轴移动图片-缩小图片”导致图片位置不对称。异常图效果如下：
/**
* 重置Matrix
*/
private void reSetMatrix() {
if(checkRest()){
mCurrentMatrix.set(mMatrix);
setImageMatrix(mCurrentMatrix);
}else {
//判断Y轴是否需要更正
float[] values=new float[9];
getImageMatrix().getValues(values);
float height=mImageHeight*values[Matrix.MSCALE_Y];
if(height<getHeight()){
//在图片真实高度小于容器高度时，Y轴居中，Y轴理想偏移量为两者高度差/2，
float topMargin=(getHeight()-height)/2;
if(topMargin!=values[Matrix.MTRANS_Y]){
mCurrentMatrix.set(getImageMatrix());
mCurrentMatrix.postTranslate(0, topMargin-values[Matrix.MTRANS_Y]);
setImageMatrix(mCurrentMatrix);
}
}
}
}
优化了缩放操作的缩放x轴对称轴选择问题。在"图片放大-移动X轴-缩小图片"时，若直接以ImageView中心点为缩放原点，可能会导致缩放后的图片边缘离开ImageView边界。
出错图效果如下：
/**
* 设置缩放Matrix
* @param event
*/
private void setZoomMatrix(MotionEvent event) {
//只有同时触屏两个点的时候才执行
if(event.getPointerCount()<2) return;
float endDis = distance(event);// 结束距离
if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10
float scale = endDis / mStartDis;// 得到缩放倍数
mStartDis=endDis;//重置距离
mCurrentMatrix.set(getImageMatrix());//初始化Matrix
float[] values=new float[9];
mCurrentMatrix.getValues(values);
scale = checkMaxScale(scale, values);
PointF centerF=getCenter(scale,values);
mCurrentMatrix.postScale(scale, scale,centerF.x,centerF.y);
setImageMatrix(mCurrentMatrix);
}
}
/**
* 获取缩放的中心点。
* @param scale
* @param values
* @return
*/
private PointF getCenter(float scale,float[] values) {
//缩放级别小于原始缩放级别时或者为放大状态时，返回ImageView中心点作为缩放中心点
if(scale*values[Matrix.MSCALE_X]<mScale||scale>=1){
return new PointF(getWidth()/2,getHeight()/2);
}
float cx=getWidth()/2;
float cy=getHeight()/2;
//以ImageView中心点为缩放中心，判断缩放后的图片左边缘是否会离开ImageView左边缘，是的话以左边缘为X轴中心
if((getWidth()/2-values[Matrix.MTRANS_X])*scale<getWidth()/2)
cx=0;
//判断缩放后的右边缘是否会离开ImageView右边缘，是的话以右边缘为X轴中心
if((mImageWidth*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X])*scale<getWidth())
cx=getWidth();
return new PointF(cx,cy);
}
通过判断图片宽度，决定是以ImageView中点为X轴缩放原点，还是以左右边缘为缩放原点。
目前为止MatrixImageView的功能基本完善了，具体代码还是放在我的Github上的照相机Demo。该View如果有问题的可以在这篇文章下留言或私信我。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
