使用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实现图片滑动和放大缩小功能以及可能的注意事项。

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

源码下载


你可能感兴趣的:(技术类)