http://my.oschina.net/ryanhoo/blog/88484
译者:Ryan Hoo
来源:https://developer.android.com/develop/index.html
译者按: 在Google最新的文档中,提供了一系列含金量相当高的教程。因为种种原因而鲜为人知,真是可惜!Ryan将会细心整理,将之翻译成中文,希望对开发者有所帮助。
本系列是Google关于展示大Bitmap(位图)的官方演示,可以有效的解决内存限制,更加有效的加载并显示图片,同时避免让人头疼的OOM(Out Of Memory)。
-------------------------------------------------------------------------------------
译文:
这节课将我们前面几节课学习的东西都整合起来,向你展示如何使用后台线程和Bitmap缓存加载多个Bitmap(位图)到ViewPager和GridView组件中,并学习如何处理并发和配置变化问题。
实现加载Bitmap到ViewPager
滑动浏览模式(Swipe View Pattern)是一种很好的浏览详细图片的方式。你可以使用ViewPager组件配合PagerAdapter(适配器)来实现这种模式。然而,更加合适的适配器是FragmentStatePagerAdapter,它可以在ViewPager退出屏幕的时候自动销毁并存储Fragments的状态,使得内存依然保留下来。
注意:如果你只有少量的图片,并且确信它们不会超出程序的内存限制,使用常规的PagerAdapter或者FragmentPagerAdapter或许更加合适。
这里有一个包含ImageView的ViewPager的实现类,Main Activity(主活动)持有这个ViewPager和Adapter。
01 | public class ImageDetailActivity extends FragmentActivity { |
02 | public static final String EXTRA_IMAGE = "extra_image" ; |
04 | private ImagePagerAdapter mAdapter; |
05 | private ViewPager mPager; |
08 | public final static Integer[] imageResIds = new Integer[] { |
09 | R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3, |
10 | R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6, |
11 | R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9}; |
14 | public void onCreate(Bundle savedInstanceState) { |
15 | super .onCreate(savedInstanceState); |
16 | setContentView(R.layout.image_detail_pager); |
18 | mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), imageResIds.length); |
19 | mPager = (ViewPager) findViewById(R.id.pager); |
20 | mPager.setAdapter(mAdapter); |
23 | public static class ImagePagerAdapter extends FragmentStatePagerAdapter { |
24 | private final int mSize; |
26 | public ImagePagerAdapter(FragmentManager fm, int size) { |
32 | public int getCount() { |
37 | public Fragment getItem( int position) { |
38 | return ImageDetailFragment.newInstance(position); |
这里有一个用来持有ImageView并显示详细信息的Fragment的实现类。看起来这似乎是非常合理的方法,但是你能否看到这个方案的缺点呢?应该如何改善它呢?
01 | public class ImageDetailFragment extends Fragment { |
02 | private static final String IMAGE_DATA_EXTRA = "resId" ; |
03 | private int mImageNum; |
04 | private ImageView mImageView; |
06 | static ImageDetailFragment newInstance( int imageNum) { |
07 | final ImageDetailFragment f = new ImageDetailFragment(); |
08 | final Bundle args = new Bundle(); |
09 | args.putInt(IMAGE_DATA_EXTRA, imageNum); |
15 | public ImageDetailFragment() {} |
18 | public void onCreate(Bundle savedInstanceState) { |
19 | super .onCreate(savedInstanceState); |
20 | mImageNum = getArguments() != null ? getArguments().getInt(IMAGE_DATA_EXTRA) : - 1 ; |
24 | public View onCreateView(LayoutInflater inflater, ViewGroup container, |
25 | Bundle savedInstanceState) { |
27 | final View v = inflater.inflate(R.layout.image_detail_fragment, container, false ); |
28 | mImageView = (ImageView) v.findViewById(R.id.imageView); |
33 | public void onActivityCreated(Bundle savedInstanceState) { |
34 | super .onActivityCreated(savedInstanceState); |
35 | final int resId = ImageDetailActivity.imageResIds[mImageNum]; |
36 | mImageView.setImageResource(resId); |
希望你能注意到:这些图片是在UI线程从资源中读取过来的,而这极有可能导致应用挂起甚至被强制关闭。使用在“非UI线程处理Bitmap”一课中提到的AsyncTask,直接将图片加载和处理移到后台线程中。
任何额外的处理(例如调整大小或者从网络获取图片)可以放在BitmapWorkerTask中而不会影响到主UI线程的响应性。如果后台线程做的不仅仅是直接从硬盘直接加载图片,那么如“缓存Bitmap”一课中说的,将图片缓存到内存或者硬盘是有利于程序优化的。这里是对内存缓存的一些额外修改:
01 | public class ImageDetailActivity extends FragmentActivity { |
03 | private LruCache<String, Bitmap> mMemoryCache; |
06 | public void onCreate(Bundle savedInstanceState) { |
11 | public void loadBitmap( int resId, ImageView imageView) { |
12 | final String imageKey = String.valueOf(resId); |
14 | final Bitmap bitmap = mMemoryCache.get(imageKey); |
16 | mImageView.setImageBitmap(bitmap); |
18 | mImageView.setImageResource(R.drawable.image_placeholder); |
19 | BitmapWorkerTask task = new BitmapWorkerTask(mImageView); |
将上面的代码片段整合在一起会让你的ViewPager具备优良的响应性能,可以实现最小的加载延迟,根据你的图片加载需要或多或少的进行后台处理。
实现加载Bitmap到GridView
网格列表控件(Grid List Building Block)对于显示图片数据集非常有用,也可以使用GridView组件来实现,如果用户上下滚动的话,有很多图片处于就绪状态,随时可以显示在屏幕上。如果要实现这种类型的控制,你必须确保UI保持流畅性,内存使用处于控制之中而且并发也要被正确地处理(取决于GridView回收子视图的方式)。
首先,这里有一个标准的GridView实现,将ImageView子控件存放在Fragment中。我们再一次思考这个问题,这个方法看起来似乎非常完美且合乎情理,但是有没有办法让它便得更好呢?
01 | public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener { |
02 | private ImageAdapter mAdapter; |
05 | public final static Integer[] imageResIds = new Integer[] { |
06 | R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3, |
07 | R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6, |
08 | R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9}; |
11 | public ImageGridFragment() {} |
14 | public void onCreate(Bundle savedInstanceState) { |
15 | super .onCreate(savedInstanceState); |
16 | mAdapter = new ImageAdapter(getActivity()); |
20 | public View onCreateView( |
21 | LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { |
22 | final View v = inflater.inflate(R.layout.image_grid_fragment, container, false ); |
23 | final GridView mGridView = (GridView) v.findViewById(R.id.gridView); |
24 | mGridView.setAdapter(mAdapter); |
25 | mGridView.setOnItemClickListener( this ); |
30 | public void onItemClick(AdapterView<?> parent, View v, int position, long id) { |
31 | final Intent i = new Intent(getActivity(), ImageDetailActivity. class ); |
32 | i.putExtra(ImageDetailActivity.EXTRA_IMAGE, position); |
36 | private class ImageAdapter extends BaseAdapter { |
37 | private final Context mContext; |
39 | public ImageAdapter(Context context) { |
45 | public int getCount() { |
46 | return imageResIds.length; |
50 | public Object getItem( int position) { |
51 | return imageResIds[position]; |
55 | public long getItemId( int position) { |
60 | public View getView( int position, View convertView, ViewGroup container) { |
62 | if (convertView == null ) { |
63 | imageView = new ImageView(mContext); |
64 | imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); |
65 | imageView.setLayoutParams( new GridView.LayoutParams( |
66 | LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); |
68 | imageView = (ImageView) convertView; |
70 | imageView.setImageResource(imageResIds[position]); |
当然,问题还是这个方法在UI线程中处理图片。这种方式或许是和处理小而简单的图片(系统资源的加载和缓存),如果需要做任何的处理,UI就会被阻塞(甚至引起ANR(Application Not Responding))。
和前一节相同的处理方式,我们在异步线程中进行处理和缓存。然而,考虑到GridView回收子视图的方式,你需要谨慎处理并发问题。可以使用“在非UI线程中处理Bitmap”一课中提到的技巧。这里是更新的解决方案:
01 | public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener { |
04 | private class ImageAdapter extends BaseAdapter { |
08 | public View getView( int position, View convertView, ViewGroup container) { |
10 | loadBitmap(imageResIds[position], imageView) |
15 | public void loadBitmap( int resId, ImageView imageView) { |
16 | if (cancelPotentialWork(resId, imageView)) { |
17 | final BitmapWorkerTask task = new BitmapWorkerTask(imageView); |
18 | final AsyncDrawable asyncDrawable = |
19 | new AsyncDrawable(getResources(), mPlaceHolderBitmap, task); |
20 | imageView.setImageDrawable(asyncDrawable); |
25 | static class AsyncDrawable extends BitmapDrawable { |
26 | private final WeakReference<BitmapWorkerTask> bitmapWorkerTaskReference; |
28 | public AsyncDrawable(Resources res, Bitmap bitmap, |
29 | BitmapWorkerTask bitmapWorkerTask) { |
31 | bitmapWorkerTaskReference = |
32 | new WeakReference<BitmapWorkerTask>(bitmapWorkerTask); |
35 | public BitmapWorkerTask getBitmapWorkerTask() { |
36 | return bitmapWorkerTaskReference.get(); |
40 | public static boolean cancelPotentialWork( int data, ImageView imageView) { |
41 | final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView); |
43 | if (bitmapWorkerTask != null ) { |
44 | final int bitmapData = bitmapWorkerTask.data; |
45 | if (bitmapData != data) { |
47 | bitmapWorkerTask.cancel( true ); |
57 | private static BitmapWorkerTask getBitmapWorkerTask(ImageView imageView) { |
58 | if (imageView != null ) { |
59 | final Drawable drawable = imageView.getDrawable(); |
60 | if (drawable instanceof AsyncDrawable) { |
61 | final AsyncDrawable asyncDrawable = (AsyncDrawable) drawable; |
62 | return asyncDrawable.getBitmapWorkerTask(); |
注意:相同的代码也可以很好的适配ListView。
这里的实现方法允许灵活地处理和加载图片,并且不会影响UI的流畅性。在后台线程中,你可以从网络加载图片,调整大幅的数码相机照片的大小,并在处理任务结束的时候将图片显示在UI界面中。
要了解在本节课中讨论到的概念和完整代码,请参阅示例程序。
BitmapFun:http://vdisk.weibo.com/s/hNgFB