ViewPager 查看图片

最新推荐文章于 2021-08-07 03:47:46 发布

甜哥甜哥

最新推荐文章于 2021-08-07 03:47:46 发布

阅读量204

点赞数

原文地址：http://phenom.iteye.com/blog/2016350

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

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

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

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

Java代码收藏代码

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;  
            }  
        });