ViewPager 查看图片

一个图片查看器 , app到处都是 , 但那是别人的.
现在的一些app中经常会遇到这样的要求, 像gallery一样展示图片 , 其中还支持缩放等操作.
关于缩放事件的处理,可以使用github:photoview,  虽然有些情况不是很理想,已经相当不错了.

而gallery浏览的方式倒是成了一个主要的问题 . 
因为手机内存的限制,解析一张图片,rgb565的配置,大图片消耗的内存也不小,像左右滑动的,一般会有三张图片,这是主要的难点了.

viewpager可以很容易的实现这种 swipe功能.左右滑动,可以自动销毁 多余的图片资源 .

新浪官方的微博程序的图片浏览方式就很不错.今天介绍的处理方式,也可以实现类似的效果,虽然不知道它是不是这样处理的.

class SamplePagerAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener
先建立一个适配器,

mAdapter=new SamplePagerAdapter();
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOnPageChangeListener(mAdapter);

初始化.
@Override
        public View instantiateItem(ViewGroup container, int position) {
            ImagePageView photoView=new ImagePageView(container.getContext());
            photoView.setPicture(mPictureList.get(position));
            
            photoView.update();


            container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mFragmentArray.put(position, new WeakReference<View>(photoView));
            return photoView;
        }


@Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            Log.d(TAG, "destroyItem:"+object);
            container.removeView((View) object);
            final WeakReference<View> mWeakFragment=mFragmentArray.get(position);
            if (mWeakFragment!=null) {
                mWeakFragment.clear();
            }
将多余的页面销毁.减少内在的占用.
        }

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


也许有人会问, 这就是简单的方式了,没有什么特别的.在photoView.update();实现下载,显示大图片就行了.

要是这样的话,我就没有必要再写下去了.

如果只是这样,可以试试,当三张大的gif图片,在一般的机器上,同时动画.效果如何,至少我在9500上,边下载,边动画,还是非常慢的.

主要的思想就是在当前之外 的页面,显示缩略图,只加载当前的pager中的大图片,当滑过一个页面时,重新调整显示大图的页面与小图的页面.以高效地应用系统资源.所以OnPageChangeListener很重要.

@Override
        public void onPageSelected(int i) {
            Log.d(TAG, "onPageSelected."+i);

            int size=mFragmentArray.size();
            for (int k=0; k<size; k++) {
                int key=mFragmentArray.keyAt(k);
                WeakReference<View> viewWeakReference=mFragmentArray.get(key);
                if (null!=viewWeakReference&&null!=viewWeakReference.get()) {
                    Log.d(TAG, "key:"+key+" view:"+viewWeakReference.get());
                    ImagePageView imagePageView=(ImagePageView) viewWeakReference.get();
                    if (key==i) {
                        imagePageView.setResId(imagePageView.getPicture().originalId);
                        imagePageView.update();
                    } else {
                        imagePageView.setResId(imagePageView.getPicture().thumbId);
                        imagePageView.update();
                    }
                } else {
                    Log.d(TAG, "key:"+key);
                }
            }
        }

viewpager与普通的linearlayout不同,像listview一样,如果直接获取它的child,会有想不到的结果.
所以预先把一些页面用弱引用存起来.

然后读取其中的,非当前页面就加载缩略图,是当前页面就加载大图.
于是imagePageView.update();这个方法就要修改了.
示例中使用的方式:用drawable中的大图与小图区分加载效果的 . 已经集成到我的微博程序中.还有细节未完善

这就解决了资源释放的问题.

另外,进入图片查看程序不是从第一张开始,而是从某张开始的,这时不能在oncreate中设置viewpager.显示位置,
可以添加监听:
mViewPager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                Log.d(TAG, "onPreDraw:");
                mViewPager.getViewTreeObserver().removeOnPreDrawListener(this);
                if (index==0) {//显示第一张,默认进来的,我在这里的调用是因为instantiateItem中photoView.update();未加载大图,是加载小图.
                    mAdapter.onPageSelected(index);
                } else {
                    mViewPager.setCurrentItem(index);
                }
                return true;
            }
        });