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

原创 2015年11月19日 22:32:31


为了实现图片的左右滑动以及放大缩小的功能,用到了两个组件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实现图片滑动和放大缩小功能以及可能的注意事项。

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

源码下载


相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ViewPager嵌套PhotoView实现相册效果

今天在github看开源控件,试了一把代码家的PhotoView,结合ViewPager是真的好用,看效果图: 1.配置build.gradle: //photoview compi...

Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能

Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

PhotoView的简单使用(在ViewPager里面的触摸处理)

前言 当对图片进行缩放操作时,会用这个第三方的PhotoView使用之前我们必须添加仓库管理和依赖 Add this in your root build.gradle file (not you...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

viewpager与缩放效果的photoview的联合使用

最近用到点击查看图片详情,要求图片可以缩放且旋转。 主要代码如下,gridview的onItemClick点击事件, @Override public void onItemClick(Adapter...

自定义ViewPager,用来解决PhotoView和ViewPager的滑动冲突

转自:仿微信朋友圈图片查看-glide加载网络图片,photoview 实现缩放这里实现的效果就和微信朋友圈点击图片后查看大图一样,如果你不清楚是什么效果,可以拿出手机,打开朋友圈,找到一条有很多图片...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

android使用viewpager+photoview实现新闻组图功能

之前项目中有需求要做一个组图和视频的栏目,视频暂时先使用html5实现了,但是组图效果就得自己用代码实现了,浏览了很多优秀的新闻app比如网易新闻,腾讯新闻,等等,发现这个功能很多,但是在网上找dem...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用ViewPager和Photoview实现图片左右滑动和放大缩小
举报原因:
原因补充:

(最多只允许输入30个字)