接上两篇：

Android仿微信图片选择器（一）
Android仿微信图片选择器（二）

前两篇介绍了发表界面的界面和图片选择的功能实现，这篇主要写图片预览功能的实现。

老规矩，先上效果图：

图片预览界面

图像显示采用了开源的PhotoView，因为该开源项目在与ViewPager结合使用时存在一些bug，通过查阅资料，通过自定义ViewPager可以解决这个问题。具体代码如下：

public class PhotoViewPager extends ViewPager {    public PhotoViewPager(Context context) {        super(context);    }    public PhotoViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        try {            return super.onTouchEvent(ev);        } catch (Exception e) {            e.printStackTrace();        }        return false;    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        try {            return super.onInterceptTouchEvent(ev);        } catch (Exception e) {            e.printStackTrace();        }        return false;    }}

使用了PhotoView的PagerAdapter需要做一些变化，具体如下：

public class PhotoViewPagerAdapter extends PagerAdapter {    private Context context;    private List images;    private SparseArray cacheView;    private ViewGroup containerGroup;    private LayoutInflater inflater;    public PhotoViewPagerAdapter(Context context, List images) {        this.context = context;        this.images = images;        cacheView = new SparseArray<>(images.size());        inflater = LayoutInflater.from(context);    }    @Override    public int getCount() {        return images != null ? images.size() : 0;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        if (containerGroup == null) {            containerGroup = container;        }        View view = cacheView.get(position);        if (view == null) {            view = inflater.inflate(R.layout.layout_vp_image_item, container, false);            view.setTag(position);            final ImageView image = (ImageView) view.findViewById(R.id.id_image);            final PhotoViewAttacher photoViewAttacher = new PhotoViewAttacher(image);            if (images.get(position).startsWith("http")) {                Picasso.with(context)                        .load(images.get(position))                        .placeholder(R.drawable.ic_place_holder)                        .error(R.drawable.ic_load_error)                        .config(Bitmap.Config.RGB_565)                        .into(image, new Callback() {                            @Override                            public void onSuccess() {                                photoViewAttacher.update();                            }                            @Override                            public void onError() {                            }                        });            } else {                Picasso.with(context)                        .load(new File(images.get(position)))                        .placeholder(R.drawable.ic_place_holder)                        .error(R.drawable.ic_load_error)                        .config(Bitmap.Config.RGB_565)                        .into(image, new Callback() {                            @Override                            public void onSuccess() {                                photoViewAttacher.update();                            }                            @Override                            public void onError() {                            }                        });            }            photoViewAttacher.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {                @Override                public void onPhotoTap(View view, float v, float v1) {                    Activity activity = (Activity) context;                    activity.finish();                    activity.overridePendingTransition(R.anim.zoom_in, R.anim.zoom_out);                }                @Override                public void onOutsidePhotoTap() {                }            });        }        container.addView(view);        return view;    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        View view = (View) object;        container.removeView(view);    }}

中间一段对字符串的判断是为了区别加载本地图片和网络图片。

准备工作做好其实功能基本上就完成了，主要就是通过ViewPager来展示图片。先看布局文件：

<?xml version="1.0" encoding="utf-8"?>

布局文件采用了自定义的ViewPager，主要是为了解决与PhotoView的冲突。

在PhotoPreviewActivity中，提供一个启动预览界面的方法：

    public static void startActivity(Activity context, ArrayList images, int position) {        Intent intent = new Intent(context, PhotoPreviewActivity.class);        intent.putStringArrayListExtra("images", images);        intent.putExtra("position", position);        context.startActivity(intent);        context.overridePendingTransition(R.anim.zoom_in, R.anim.zoom_out);    }

images是要显示的图片地址，position是第一张要显示图片的位置。通过这个方法启动Activity就可以通过以下方法处理数据：

    private void initViewPager() {        Intent intent = getIntent();        if (intent != null) {            mImagesList = intent.getStringArrayListExtra("images");            mPosition = intent.getIntExtra("position", 0);            if (mImagesList == null) {                return;            }            mTotalCount = mImagesList.size();            mPhotoPosition.setText((mPosition + 1) + "/" + mTotalCount);            mPhotoAdapter = new PhotoViewPagerAdapter(this, mImagesList);            mPhotoViewPager.setAdapter(mPhotoAdapter);            mPhotoViewPager.setCurrentItem(mPosition);            mPhotoViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {                @Override                public void onPageSelected(int position) {                    super.onPageSelected(position);                    mPosition = position;                    mPhotoPosition.setText((mPosition + 1) + "/" + mTotalCount);                }            });        }    }

至此，图片预览的功能就已经实现。结合前两篇博客，一个发表动态的功能就已经实现了。

总结

通过写三篇博客，加深自己对该功能的理解，同时在编写过程中也发现程序的一些问题，这也算一种意外收获吧。在写博客的时候，才知道自己的语言是多么的贫乏，很多时候要靠代码去展示，可惜的是我的代码并没有什么注释，主要是因为功能比较简单，自己觉得不需要注释，但这终究不是一个好习惯，希望以后能改正。

代码或者是语言有不准确的地方，希望大家指出，莫要误人子弟。

Android仿微信图片选择器（三）

总结

更多相关文章

随机推荐