Android图片处理系列：Viewpager+PhotoView查看大量图片不oom，附有文字弹幕效果

62 阅读 0 评论 41 点赞

我是靠谱客的博主专一河马，最近开发中收集的这篇文章主要介绍Android图片处理系列：Viewpager+PhotoView查看大量图片不oom，附有文字弹幕效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近需要做一个类似一个系统查看照片那种效果的，支持手势缩放，左右滑动查看图片，还需要有弹幕效果的，首先我就想到了viewPager+photoView。
photoView是一个非常不错的开源库，有兴趣的可以下载它的demo，支持很多功能，特别是对viewPager滑动冲突做了处理，支持第三方加载图片库，详见 https://github.com/chrisbanes/PhotoView，可以看看它的效果和源码。
而viewpager就不多说了，主要是解决查看大量图片出现的oom问题，这就涉及到它自身的一个复用问题，不知道这样说对不对，感觉说复用好一点。

一、 ViewPager的使用
一开始是有个坑，本来是说要求查看的图片不多，我想的是ViewPager自身destroyItem方法做了bitmap资源的回收，再加上这些图片本身是经过我的压缩的，本身不大，就采用有几个view加载几个，后来需求要加载很多图片，一下子就崩了，再强的回收也挡不过一下加载六七十张甚至更多的图片。于是采用了复用的方式，只用几个view当载体，相当于每次只加载这几个view很好的避免了oom。具体上代码：

//加载数据具体根据自己来更换
private void initViewPage() {
        // TODO Auto-generated method stub
        ArrayList<EventgalleryItem> eventgallery = mActivity.getGalleryArray();
        mGalleryViewPage = (FixedViewPager) mActivity.findViewById(R.id.gallery_view_pager);
        mTravelsGalleryAdapter = new TravelPagerAdapter(getViewArray(),eventgallery);
        mGalleryViewPage.setAdapter(mTravelsGalleryAdapter);
        mGalleryViewPage.setCurrentItem(mActivity.getIndex());
    }

//相当于每次只加载4个
private ArrayList<View> getViewArray() {
        mViewArray = new ArrayList<View>();
        for (int i = 0; i < 4; i++) {
            View view = View.inflate(mActivity, R.layout.view_travelgallery_image_item, null);
            setViewContent(view);
            mViewArray.add(view);
        }
        return mViewArray;
    }

这里的ViewPager是自定义的：
至于为什么，你看了PhotoView就知道，在使用PhotoView在ViewGroup中时，可能会产生IllegalArgumentException 这个异常，也没有特别好的解决办法，PhotoView推荐的解决办法就是比较暴力的try catch，避免挂掉。

public class FixedViewPager extends ViewPager {
    public FixedViewPager(Context context) {
        super(context);
    }

    public FixedViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        try {
            return super.onInterceptTouchEvent(ev);
        } catch (IllegalArgumentException e) {
            return false;
        } 
    }
}

adapter的代码

public class TravelPagerAdapter extends PagerAdapter {

    private ArrayList<View> mViews;
    private ArrayList<EventgalleryItem> mDatas;

    public TravelPagerAdapter(ArrayList<View> viewArray, ArrayList<EventgalleryItem> eventgallery) {
        mViews = viewArray;
        mDatas = eventgallery;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
    //这里就达到了很好的复用
        int i = position % 4;
        View view = mViews.get(i);
        String url = mDatas.get(position).url;
        PhotoView photoView = (PhotoView) view.findViewById(R.id.gallery_imageview);
        ImageLoader.getInstance().displayImage(url, photoView);
        container.addView(view);
        return view;

    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        int i = position % 4;
        View view = mViews.get(i);
        container.removeView(view);
    }
}

二、 PhotoView的使用
这个就很简单了，因为没有用到特殊的功能，所以直接放上去就好了

<xx.ui.photoview.PhotoView
        android:id="@+id/gallery_imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

只做了对PhotoView的单次点击的监听，达到点击一次，上面的文字和功能按钮显现，再次点击隐藏的效果。

mPhotoView.setOnPhotoTapListener(new OnPhotoTapListener() {
            @Override
            public void onPhotoTap(ImageView view, float x, float y) {
                if (isFirst){//第一次点击
                    mTitleView.setVisibility(View.VISIBLE);
                    mDanmuView.setVisibility(View.VISIBLE);
                    isFirst = false;
                }else {//再次点击
                    mTitleView.setVisibility(View.GONE);
                    mDanmuView.setVisibility(View.GONE);
                    isFirst = true;
                }
            }
        });

还做了viewPager在滑动时同时需要隐藏文字和功能按钮。

mGalleryViewPage.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                mTitleView.setVisibility(View.GONE);
                mDanmuView.setVisibility(View.GONE);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });

三、文字弹幕的呈现
本来自己写了一个，效果不好，发送的功能做的不行，老板催的紧就用了个别人写的：比较老
效果还行，可以增添弹幕：https://github.com/linsea/OpenDanmaku。可以根据具体需要在它基础上改，或直接改它的源码，或者用别人写的更好的，自己写都行。它有中文介绍具体使用就不说了。
效果图和具体项目demo会过两天贴出：