二十四、ViewPager实现图片滑动预览

拼搏现实的明天。 2022-07-18 04:09 210阅读 0赞

场景是这样的，用GridView展示了一些缩略图，当点击缩略图时，预览大图，并且可以滑动切换预览图，单击预览图则关闭预览界面，回到之前的缩略图界面。通过上述功能介绍发现，用ViewPager即可完全满足功能。

一、使用ViewPager加载预览图片

ViewPager使用和ListView、GridView差不多，不做过多介绍，主要是它的adapter稍微有些不一样。

先上adapter代码:

public class ImageViewPagerAdapter extends PagerAdapter{
    
        private Context context;
        private List<String> images;
    
        public ImageViewPagerAdapter(List<String> images, Context context) {
            this.images = images;
            this.context = context;
        }
    
        @Override
        public int getCount() {
            if (images == null)
                return 0;
            return images.size();
        }
    
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(context).inflate(R.layout.image_vp_item, container, false);
            ((SimpleDraweeView)view.findViewById(R.id.iv_image)).setImageURI(UriUtil.parseUriOrNull(images.get(position)));
            container.addView(view);
            // 这里不是返回ViewGroup，而是返回key（这里view作为key）
            return view;
        }
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

item布局很简单，就是一张图片：

<?xml version="1.0" encoding="utf-8"?>
    <com.facebook.drawee.view.SimpleDraweeView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:keng="http://schemas.android.com/apk/res-auto"
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:background="@color/black"
        android:scaleType="fitCenter"
        keng:actualImageScaleType="fitCenter"
        keng:placeholderImage="@drawable/default_head_white" />

SimpleDraweeView是Facebook的开源图片加载控件，帮助我们从网络加载图片和缓存、释放图片。就是这个scaleType都要设为“fitCenter”，这样图片就可以顶宽或者顶高全屏显示。

上述adapter中，重写4个方法即可getCount、isViewFromObject、instantiateItem、destroyItem。

1、先说instantiateItem(ViewGroup container, int position)，这个方法最重要，就是在这里构造视图的。

获取到item视图，然后添加到ViewGroup，别以为这样就完了，还要返回一个Object类型的返回值，一开始我受到误导，直接返回ViewGroup container，然后就出现问题了，ViewGroup一直显示不出来；后来才找到问题，这里不是返回ViewGroup本身，而是返回一个key，这个key可以说是ViewPager识别item的标示，它的用途在下面一个方法中有用到。

2、isViewFromObject(View view, Object object)方法用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)，这里的Object就是上述返回的key，由于我们是直接返回的view，所以直接==即可。

3、destroyItem(ViewGroup container, int position, Object object)用来移除视图。

OK，现在在主activity中实现我们的adapter就行了：

adapter = new ImageViewPagerAdapter(images, this);
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(adapter);

这样，就实现了我们的大部分功能，可以预览大图，可以滑动。

二、单击事件

现在，就差一个点击事件，我们可以直接在activity中监听点击事件么？

viewPager.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 点击关闭
            finish();
        }
    });

事实证明，是不行的，我们需要在adapter里面，单个view去进行监听。所以，instantiateItem(ViewGroup container, int position)方法的完整代码应该是：

@Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.image_vp_item, container, false);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击关闭
                ((Activity)context).finish();
            }
        });
        ((SimpleDraweeView)view.findViewById(R.id.iv_image)).setImageURI(UriUtil.parseUriOrNull(images.get(position)));
        container.addView(view);
        // 这里不是返回ViewGroup，而是返回key（这里view作为key）
        return view;
    }

缩略效果图如下：

![Center][]

预览效果图如下：

![Center 1][]

参考：

[http://blog.csdn.net/harvic880925/article/details/38453725][http_blog.csdn.net_harvic880925_article_details_38453725]

[http://blog.csdn.net/larryl2003/article/details/6919513][http_blog.csdn.net_larryl2003_article_details_6919513]

[Center]: /images/20220717/7c113437a762421ab7680d4ea153d70d.png
[Center 1]: /images/20220717/bb3e7c3ae74341a39b819abc397b977f.png
[http_blog.csdn.net_harvic880925_article_details_38453725]: http://blog.csdn.net/harvic880925/article/details/38453725
[http_blog.csdn.net_larryl2003_article_details_6919513]: http://blog.csdn.net/larryl2003/article/details/6919513