使用ViewPager和Photoview实现图片左右滑动和放大缩小

为了实现图片的左右滑动以及放大缩小的功能，用到了两个组件ViewPager和PhotoView。

PhotoView是开源项目，它也是通过继承ImageView然后扩充功能，实现图片放大缩小等功能；而加载网络图片用到了ImageLoader这个开源组件。

工欲善其事必先利其器，本案例通过Android Studio开发，所以首先需要引入包：

在Module的build.gradle文件中添加如下两个依赖;第一个是引入ImageLoader这个开源组件，第二个则是PhotoView。

compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
compile 'com.github.chrisbanes.photoview:library:1.2.3'

(Eclipse的同学就需要下载对应的jar包，将其放入lib文件夹下)

1.首先我将图片加载在一个GridView中

GridAdapter关键代码：

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;
        ViewHolder holder;
        if(convertView == null){
            holder = new ViewHolder();
            view = LayoutInflater.from(mContext).inflate(mResource,null);
            holder.mImageView = (ImageView) view.findViewById(R.id.img);
            CSApplication.getInstance().imageLoader.displayImage(
                    mImgUrls.get(position),holder.mImageView, DisplayImageOptionsUtil.defaultOptions);
            view.setTag(holder);
        }else{
            view = convertView;
            holder = (ViewHolder)view.getTag();
        }
        return view;
    }


    class ViewHolder{
        ImageView mImageView;
    }

上面代码中，CSApplication类初始化了ImageLoader，并配置了参数，然后直接调用它的displayImage方法将图片放入ImageView中；mImgUrls是存放图片的url地址的列表

2.对GridView添加监听事件，点击任意位置的图片，然后显示该图片

PhotoviewActivity：显示图片的activity

private void setupData(){
    int mCurrentUrl = getIntent().getIntExtra(MainActivity.PHOTO_POSITION,0);
    mImgUrls = Arrays.asList(Images.imageThumbUrls);
    mAdapter = new PhotoViewAdapter();
    mViewPager.setAdapter(mAdapter);
    //设置当前需要显示的图片
    mViewPager.setCurrentItem(mCurrentUrl);
}

在ViewPager的适配器(PhotoViewAdapter)中:

@Override
public Object instantiateItem(ViewGroup container, int position) {
    View view = container.inflate(PhotoviewActivity.this,
            R.layout.item_photo_view,null);
    mPhotoView = (PhotoView) view.findViewById(R.id.photo);
    //使用ImageLoader加载图片
    CSApplication.getInstance().imageLoader.displayImage(
            mImgUrls.get(position),mPhotoView, DisplayImageOptionsUtil.defaultOptions);
    //给图片增加点击事件
    mAttacher = new PhotoViewAttacher(mPhotoView);
    mAttacher.setOnViewTapListener(PhotoviewActivity.this);
    container.addView(view);
    return view;
}

给Photoview这个组件增加点击事件的时候，使用OnClickListener不起作用，因此使用PhotoViewAttacher这个类来监听点击事件;当点击显示的图片的时候，回到程序启动之后的页面。

这样就可以实现图片的左右滑动和放大缩小。但是在图片放大缩小的时候，如果没有重写ViewPager的onTouchEvent和onInterceptTouchEvent这两个方法，就会报错。java.lang.IllegalArgumentException: pointerIndex out of range

以上就是使用ViewPager和PhotoView实现图片滑动和放大缩小功能以及可能的注意事项。

以上如有不正确的地方，请指正，谢谢。最后附上源码。

源码下载