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

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

源码下载


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

之前项目中有需求要做一个组图和视频的栏目,视频暂时先使用html5实现了,但是组图效果就得自己用代码实现了,浏览了很多优秀的新闻app比如网易新闻,腾讯新闻,等等,发现这个功能很多,但是在网上找dem...
  • Coader_under_moon
  • Coader_under_moon
  • 2016年08月09日 11:33
  • 1155

使用Android ViewPager与PhotoView实现图片滑动查看

安卓新手,最近在写一个小的个人项目,其中需要全屏查看一组网络图片。其实就是简单的图片查看功能。在网上搜了实现方法,最终在Github上找到了一个叫做Touch Gallery的项目,它不仅能够载入本地...
  • trojx2
  • trojx2
  • 2016年01月03日 17:02
  • 5645

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

Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能
  • zuiwuyuan
  • zuiwuyuan
  • 2015年10月23日 21:41
  • 8377

android ViewPager嵌套PhotoView报错的解决办法

今天做东西的时候,使用了ViewPager嵌套PhotoView查看图片,结果在切换页面之后再进行缩放,抛出java.lang.IllegalArgumentException: pointerInd...
  • yaochangliang159
  • yaochangliang159
  • 2015年11月29日 16:32
  • 1451

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

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

viewpager+photoview自带圆点支持放大缩小,仿微信朋友圈图片查看器

  • 2016年06月28日 23:11
  • 8.85MB
  • 下载

photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

  • 2016年06月04日 12:05
  • 7.37MB
  • 下载

ViewPager嵌套PhotoView实现相册效果

今天在github看开源控件,试了一把代码家的PhotoView,结合ViewPager是真的好用,看效果图: 1.配置build.gradle: //photoview compi...
  • dong_junshuai
  • dong_junshuai
  • 2017年06月13日 16:16
  • 489

android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果

转自:http://blog.csdn.net/jj120522/article/details/8467810
  • gf771115
  • gf771115
  • 2014年11月06日 23:11
  • 38097

ViewPager 循环滑动+伸缩渐变过度动画实现多图片浏览

效果图如上。 首先先实现循环: public class MyAdapter extends PagerAdapter { /** * 装ImageView数组 ...
  • tangnengwu
  • tangnengwu
  • 2014年10月11日 15:02
  • 2132
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用ViewPager和Photoview实现图片左右滑动和放大缩小
举报原因:
原因补充:

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