viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)

       很多朋友都可能遇到这这个问题，实现一个支持手势缩放的图片轮播功能。就像我们的手机相册一样。而且有时候还需要让图片拉伸自动充满全屏。

       图片轮播我们自然而然，想到了viewPager+imageView来实现，但是想要实现手势缩放就遇到了很大的难度，imageView根本不支持缩放。

 

       那么打造支持手势缩放的imageView那肯定就需要自定义了，网上有很多这样的自定义view我们可以直接拿来用，可以有一个问题就是，这样的自定义imageView很多的手势操作会和ViewPager的手势操作冲突，那么我们怎样来解决这个问题了？

 

答案：用开源框架photoView

 

• 支持单点/多点触摸，即时缩放图片；
• 支持平滑滚动；
• 在滑动父控件下能够运行良好；（例如：ViewPager）
• 当用户的触点改变是可以触发通知

       当和ViewPager嵌套使用的时候，放大缩小会出现一个异常：IllegalArgumentException: pointerIndex out of range.

       这是Android ViewPager的一个BUG

       这里可以更改为HackyViewPager，它是继承的ViewPaer.

 

下面我们就来一步一步教大家如何使用photoView和HackyViewPager。

 

1.创建一个类PhotoView，然后复制下面代码放到这个类中。

 

import uk.co.senab.photoview.IPhotoView;
import uk.co.senab.photoview.PhotoViewAttacher;
import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedListener;
import uk.co.senab.photoview.PhotoViewAttacher.OnPhotoTapListener;
import uk.co.senab.photoview.PhotoViewAttacher.OnViewTapListener;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.util.AttributeSet;
import android.view.GestureDetector.OnDoubleTapListener;
import android.view.View.OnLongClickListener;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class PhotoView extends ImageView implements IPhotoView {

    private final PhotoViewAttacher mAttacher;
    private ScaleType mPendingScaleType;

    public PhotoView(Context context) {
        this(context, null);
    }

    public PhotoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        super.setScaleType(ScaleType.MATRIX);
        mAttacher = new PhotoViewAttacher(this);
        if (null != mPendingScaleType) {
            setScaleType(mPendingScaleType);
            mPendingScaleType = null;
        }
    }

    public PhotoView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @Override
    public boolean canZoom() {
        // TODO Auto-generated method stub
        return mAttacher.canZoom();
    }

    @Override
    public Matrix getDisplayMatrix() {
        // TODO Auto-generated method stub
        return mAttacher.getDrawMatrix();
    }

    @Override
    public RectF getDisplayRect() {
        // TODO Auto-generated method stub
        return mAttacher.getDisplayRect();
    }

    @Override
    public IPhotoView getIPhotoViewImplementation() {
        // TODO Auto-generated method stub
        return mAttacher;
    }

    @Override
    public float getMaxScale() {
        // TODO Auto-generated method stub
        return getMaximumScale();
    }

    @Override
    public float getMaximumScale() {
        // TODO Auto-generated method stub
        return mAttacher.getMaximumScale();
    }

    @Override
    public float getMediumScale() {
        // TODO Auto-generated method stub
        return mAttacher.getMediumScale();
    }

    @Override
    public float getMidScale() {
        // TODO Auto-generated method stub
        return getMediumScale();
    }

    @Override
    public float getMinScale() {
        // TODO Auto-generated method stub
        return getMinimumScale();
    }

    @Override
    public float getMinimumScale() {
        // TODO Auto-generated method stub
        return mAttacher.getMinimumScale();
    }

    @Override
    public OnPhotoTapListener getOnPhotoTapListener() {
        // TODO Auto-generated method stub
        return mAttacher.getOnPhotoTapListener();
    }

    @Override
    public OnViewTapListener getOnViewTapListener() {
        // TODO Auto-generated method stub
        return mAttacher.getOnViewTapListener();
    }

    @Override
    public float getScale() {
        // TODO Auto-generated method stub
        return mAttacher.getScale();
    }

    @Override
    public Bitmap getVisibleRectangleBitmap() {
        // TODO Auto-generated method stub
        return mAttacher.getVisibleRectangleBitmap();
    }

    @Override
    public void setAllowParentInterceptOnEdge(boolean allow) {
        // TODO Auto-generated method stub
        mAttacher.setAllowParentInterceptOnEdge(allow);
    }

    @Override
    public boolean setDisplayMatrix(Matrix finalMatrix) {
        // TODO Auto-generated method stub
        return mAttacher.setDisplayMatrix(finalMatrix);
    }

    @Override
    public void setMaxScale(float maxScale) {
        // TODO Auto-generated method stub
        mAttacher.setMaxScale(maxScale);
    }

    @Override
    public void setMaximumScale(float maximumScale) {
        // TODO Auto-generated method stub
        mAttacher.setMaximumScale(maximumScale);
    }

    @Override
    public void setMediumScale(float mediumScale) {
        // TODO Auto-generated method stub
        mAttacher.setMediumScale(mediumScale);
    }

    @Override
    public void setMidScale(float midScale) {
        // TODO Auto-generated method stub
        mAttacher.setMidScale(midScale);
    }

    @Override
    public void setMinScale(float minScale) {
        // TODO Auto-generated method stub
        mAttacher.setMinScale(minScale);
    }

    @Override
    public void setMinimumScale(float minimumScale) {
        // TODO Auto-generated method stub
        mAttacher.setMinimumScale(minimumScale);
    }

    @Override
    public void setImageResource(int resId) {
        // TODO Auto-generated method stub
        super.setImageResource(resId);
        if (null != mAttacher) {
            mAttacher.update();
        }
    }

    @Override
    public void setImageURI(Uri uri) {
        // TODO Auto-generated method stub
        super.setImageURI(uri);
        if (null != mAttacher) {
            mAttacher.update();
        }
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        // TODO Auto-generated method stub
        super.setImageDrawable(drawable);
        if(null !=mAttacher){
            mAttacher.update();
        }
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        // TODO Auto-generated method stub
        super.setImageBitmap(bm);
        if(null !=mAttacher){
            mAttacher.update();
        }
    }

    @Override
    public void setOnDoubleTapListener(
            OnDoubleTapListener newOnDoubleTapListener) {
        // TODO Auto-generated method stub
        mAttacher.setOnDoubleTapListener(newOnDoubleTapListener);
    }

    @Override
    public void setOnMatrixChangeListener(OnMatrixChangedListener listener) {
        // TODO Auto-generated method stub
        mAttacher.setOnMatrixChangeListener(listener);
    }

    @Override
    public void setOnPhotoTapListener(OnPhotoTapListener listener) {
        // TODO Auto-generated method stub
        mAttacher.setOnPhotoTapListener(listener);
    }

    @Override
    public void setOnLongClickListener(OnLongClickListener listener) {
        // TODO Auto-generated method stub
        mAttacher.setOnLongClickListener(listener);
    }

    @Override
    public void setOnViewTapListener(OnViewTapListener listener) {
        // TODO Auto-generated method stub
        mAttacher.setOnViewTapListener(listener);
    }

    @Override
    public void setPhotoViewRotation(float rotationDegrees) {
        // TODO Auto-generated method stub
        mAttacher.setRotationTo(rotationDegrees);
    }

    @Override
    public void setRotationBy(float rotationDegrees) {
        // TODO Auto-generated method stub
        mAttacher.setRotationBy(rotationDegrees);
    }

    @Override
    public void setRotationTo(float rotationDegrees) {
        // TODO Auto-generated method stub
        mAttacher.setRotationTo(rotationDegrees);
    }

    @Override
    public void setScale(float scale) {
        // TODO Auto-generated method stub
        mAttacher.setScale(scale);
    }

    @Override
    public void setScale(float scale, boolean animate) {
        // TODO Auto-generated method stub
        mAttacher.setScale(scale, animate);
    }

    @Override
    public void setScale(float scale, float focalX, float focalY,
            boolean animate) {
        // TODO Auto-generated method stub
        mAttacher.setScale(scale, focalX, focalY, animate);
    }

    @Override
    public void setZoomTransitionDuration(int milliseconds) {
        // TODO Auto-generated method stub
        mAttacher.setZoomTransitionDuration(milliseconds);
    }

    @Override
    public void setScaleType(ScaleType scaleType) {
        if (null != mAttacher) {
            mAttacher.setScaleType(scaleType);
        } else {
            mPendingScaleType = scaleType;
        }
    }

    @Override
    public void setZoomable(boolean zoomable) {
        // TODO Auto-generated method stub
        mAttacher.setZoomable(zoomable);
    }

    @Override
    protected void onDetachedFromWindow() {
        // TODO Auto-generated method stub
        mAttacher.cleanup();
        super.onDetachedFromWindow();
    }

}

 

2.创建类HackyViewPager，将下面代码复制进去

 

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * Hacky fix for Issue #4 and
 * http://code.google.com/p/android/issues/detail?id=18990
 * 
 * ScaleGestureDetector seems to mess up the touch events, which means that
 * ViewGroups which make use of onInterceptTouchEvent throw a lot of
 * IllegalArgumentException: pointerIndex out of range.
 * 
 * There's not much I can do in my code for now, but we can mask the result by
 * just catching the problem and ignoring it.
 * 
 * @author Chris Banes
 */
/**
 * 自定义viewPager解决和photoView滑动的冲突事件
 * @author Administrator
 *
 */
public class HackyViewPager extends ViewPager {

	public HackyViewPager(Context context) {
		super(context);
	}

	public HackyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    @Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		try {
			return super.onInterceptTouchEvent(ev);
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
			return false;
		}
	}

}

   3.在显示界面的布局文件中添加一个自定义的HackyViewPager

 

 

 

 

  <com.xixiangfu.photoview.HackyViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

4.在activity中写代码，创建一个数据源，我这里用的是本地图片，放在drawable文件夹，建立了一个数组，将图片Id添加进去。

private int[] photoId = { R.drawable.kejiqianyan_02, R.drawable.chezai_01,R.drawable.shumadianzi_02 }

 

5.初始化自定义的HackyViewPager，然后给其设置PagerAdapter适配器。在onCreate中给viewPager设置adapter.如下

   viewPager = (ViewPager) findViewById(R.id.viewPager);

 

   这个适配器需要自定义，所有photoView的创建和图片设置都在这里完成操作，具体见代码。

   而且要特别注意是，一定要重写1.  instantiateItem（）方法，2.  destroyItem（）方法 3. isViewFromObject（）方法。

   其中方法2和3的写法一般是固定的，按照下面代码中的写就可以了，方法1的话可以按照下面代码里的写，就可以实现图片的正常展示了。    如果还需要设置图片的属性的话，可以在这里直接设置，和imageView的属性是一样的。

 

     例如需要让图片拉伸充满全屏，photoView.setScaleType(ScaleType.FIT_XY);  //设置充满全屏

 

<pre name="code" class="java">/**
	 * 自定义pagerAdapter
	 */
	public class MyAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return photoId.length;
		}
		  @Override
	        public View instantiateItem(ViewGroup container, int position) {
	            PhotoView photoView = new PhotoView(container.getContext());
	            container.addView(photoView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
	            photoView.setImageResource(photoId[position]);
	            photoView.setScaleType(ScaleType.FIT_XY);//设置图片显示为充满全屏
	            return photoView;
	        }

	        @Override
	        public void destroyItem(ViewGroup container, int position, Object object) {
	            container.removeView((View) object);
	        }

	        @Override
	        public boolean isViewFromObject(View view, Object object) {
	            return view == object;
	        }
	}

 

然后就可以运行这个程序了，效果很不错，但是还有一个问题，当前图片放大后，滑动到下一页，滑回来之后，当前页面的图片还是处于放大状态，没有恢复默认大小，这样用户体验非常不好，下一篇文章我会给出解决方法。
https://blog.csdn.net/beibaokongming/article/details/51583351

这里是eclipse使用的photoView的jar包下载地址
http://download.csdn.net/detail/beibaokongming/9540545