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

场景是这样的，用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)方法的完整代码应该是：

@Overridepublic 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;}

缩略效果图如下：

预览效果图如下：

参考：

http://blog.csdn.net/harvic880925/article/details/38453725

http://blog.csdn.net/larryl2003/article/details/6919513