首页 > 代码库 > 高效地加载图片(五) 将图片展示在UI中

高效地加载图片(五) 将图片展示在UI中

2024-07-03 23:43:27   226人阅读

这篇文章将前几篇使用的方法进行了整合,让我们能够在后台线程中加载以及缓存图片并在ViewPager和GridView中展示出来,并在这些过程中处理并发以及参数的设置.

将图片加载到ViewPager中

使用滑动视图来对图片详情进行导航是一种不错的方式.我们可以使用ViewPager和PagerAdapter来实现.但是,使用FragmentStatePagerAdapter可能会更好,它能够自动地保存ViewPager中Fragment的状态并控制它的创建和销毁,能够有效地利用内存.

注意:如果你仅仅需要加载少量的图片,并且能够确认这些图片不会造成内存溢出,则使用普通的PagerAdapter或者FragmenetPagerAdapter可能会更合适.

以下是使用ViewPager实现的图片展示:

view plaincopy to clipboardprint?
  1. public class ImageDetailActivity extends FragmentActivity {  
  2.     public static final String EXTRA_IMAGE = "extra_image";  
  3.   
  4.     private ImagePagerAdapter mAdapter;  
  5.     private ViewPager mPager;  
  6.   
  7.     // 静态的图片资源数组  
  8.     public final static Integer[] imageResIds = new Integer[] {  
  9.             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};  
  12.   
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.image_detail_pager); // 布局中仅仅包含一个ViewPager  
  17.   
  18.         mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), imageResIds.length);  
  19.         mPager = (ViewPager) findViewById(R.id.pager);  
  20.         mPager.setAdapter(mAdapter);  
  21.     }  
  22.   
  23.     public static class ImagePagerAdapter extends FragmentStatePagerAdapter {  
  24.         private final int mSize;  
  25.   
  26.         public ImagePagerAdapter(FragmentManager fm, int size) {  
  27.             super(fm);  
  28.             mSize = size;  
  29.         }  
  30.   
  31.         @Override  
  32.         public int getCount() {  
  33.             return mSize;  
  34.         }  
  35.   
  36.         @Override  
  37.         public Fragment getItem(int position) {  
  38.             return ImageDetailFragment.newInstance(position);  
  39.         }  
  40.     }  
  41. }  

以下是一个包含了ImageView的Fragment,用于展示图片.这部分代码看起来是一个十分理想的实现,但是你能够看出它的缺点吗?该怎么改进它?

view plaincopy to clipboardprint?
  1. public class ImageDetailFragment extends Fragment {  
  2.     private static final String IMAGE_DATA_EXTRA = "resId";  
  3.     private int mImageNum;  
  4.     private ImageView mImageView;  
  5.   
  6.     static ImageDetailFragment newInstance(int imageNum) {  
  7.         final ImageDetailFragment f = new ImageDetailFragment();  
  8.         final Bundle args = new Bundle();  
  9.         args.putInt(IMAGE_DATA_EXTRA, imageNum);  
  10.         f.setArguments(args);  
  11.         return f;  
  12.     }  
  13.   
  14.     // Empty constructor, required as per Fragment docs  
  15.     public ImageDetailFragment() {}  
  16.   
  17.     @Override  
  18.     public void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         mImageNum = getArguments() != null ? getArguments().getInt(IMAGE_DATA_EXTRA) : -1;  
  21.     }  
  22.   
  23.     @Override  
  24.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  25.             Bundle savedInstanceState) {  
  26.         // image_detail_fragment.xml contains just an ImageView  
  27.         final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);  
  28.         mImageView = (ImageView) v.findViewById(R.id.imageView);  
  29.         return v;  
  30.     }  
  31.   
  32.     @Override  
  33.     public void onActivityCreated(Bundle savedInstanceState) {  
  34.         super.onActivityCreated(savedInstanceState);  
  35.         final int resId = ImageDetailActivity.imageResIds[mImageNum];  
  36.         mImageView.setImageResource(resId); // 将图片加载到ImageView中  
  37.     }  
  38. }  

从以上代码中,你可能发现了:图片是直接从资源文件中读取并展示到UI上的,这可能会造成应用挂起或者被强制关闭.此处使用AsyncTask在后台线程中加载图片会更好:

view plaincopy to clipboardprint?
  1. public class ImageDetailActivity extends FragmentActivity {  
  2.     ...  
  3.   
  4.     public void loadBitmap(int resId, ImageView imageView) {  
  5.         mImageView.setImageResource(R.drawable.image_placeholder);  
  6.         BitmapWorkerTask task = new BitmapWorkerTask(mImageView);  
  7.         task.execute(resId);  
  8.     }  
  9.   
  10.     ... // include BitmapWorkerTask class  
  11. }  
  12.   
  13. public class ImageDetailFragment extends Fragment {  
  14.     ...  
  15.   
  16.     @Override  
  17.     public void onActivityCreated(Bundle savedInstanceState) {  
  18.         super.onActivityCreated(savedInstanceState);  
  19.         if (ImageDetailActivity.class.isInstance(getActivity())) {  
  20.             final int resId = ImageDetailActivity.imageResIds[mImageNum];  
  21.             // 在后台线程中加载图片,而不是在Activity中直接读取图片  
  22.             ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);  
  23.         }  
  24.     }  
  25. }  

这样,我们可以在BitmapWorkerTask中实现任何附加的操作(如改变尺寸或者从网络读取图片资源)而不会映像UI线程的响应速度.就算使用后台线程加载图片的效率比直接加载图片低,我们也可以将使用的图片添加到缓存中以便复用.以下是添加缓存的方式:

view plaincopy to clipboardprint?
  1. public class ImageDetailActivity extends FragmentActivity {  
  2.     ...  
  3.     private LruCache<String, Bitmap> mMemoryCache;  
  4.   
  5.     @Override  
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         ...  
  8.         // initialize LruCache as per Use a Memory Cache section  
  9.     }  
  10.   
  11.     public void loadBitmap(int resId, ImageView imageView) {  
  12.         final String imageKey = String.valueOf(resId);  
  13.   
  14.         final Bitmap bitmap = mMemoryCache.get(imageKey);  
  15.         if (bitmap != null) {  
  16.             mImageView.setImageBitmap(bitmap);  
  17.         } else {  
  18.             mImageView.setImageResource(R.drawable.image_placeholder);  
  19.             BitmapWorkerTask task = new BitmapWorkerTask(mImageView);  
  20.             task.execute(resId);  
  21.         }  
  22.     }  
  23.   
  24.     ... // include updated BitmapWorkerTask from Use a Memory Cache section  
  25. }  

将以上组合起来使用,就可以实现高效率的ViewPager展示,这样可以耗费最少的时间和资源完成更多的任务.

将图片展示在GridView中的实现

网格结构的视图有利于展示多张图片,这种结果可以通过GridView来实现.而GridView可用通过用户的滑动操作及时地将图片显示出来.要实现这种效果,我们必须保证UI线程不被阻塞,内存的使用也要处于控制之中,而且图片的并发加载也要处理好(基于GridView的子View的循环使用).

开始之前,这里有一个使用GridView和Fragment(包含ImageView)的实现:

view plaincopy to clipboardprint?
  1. public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener {  
  2.     private ImageAdapter mAdapter;  
  3.   
  4.     // A static dataset to back the GridView adapter  
  5.     public final static Integer[] imageResIds = new Integer[] {  
  6.             R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3,  
  7.             R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6,  
  8.             R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9};  
  9.   
  10.   
  11.     // Empty constructor as per Fragment docs  
  12.     public ImageGridFragment() {}  
  13.   
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         mAdapter = new ImageAdapter(getActivity());  
  18.     }  
  19.   
  20.     @Override  
  21.     public View onCreateView(  
  22.             LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  23.         final View v = inflater.inflate(R.layout.image_grid_fragment, container, false);  
  24.         final GridView mGridView = (GridView) v.findViewById(R.id.gridView);  
  25.         mGridView.setAdapter(mAdapter);  
  26.         mGridView.setOnItemClickListener(this);  
  27.         return v;  
  28.     }  
  29.   
  30.     @Override  
  31.     public void onItemClick(AdapterView<?> parent, View v, int position, long id) {  
  32.         final Intent i = new Intent(getActivity(), ImageDetailActivity.class);  
  33.         i.putExtra(ImageDetailActivity.EXTRA_IMAGE, position);  
  34.         startActivity(i);  
  35.     }  
  36.   
  37.     private class ImageAdapter extends BaseAdapter {  
  38.         private final Context mContext;  
  39.   
  40.         public ImageAdapter(Context context) {  
  41.             super();  
  42.             mContext = context;  
  43.         }  
  44.   
  45.         @Override  
  46.         public int getCount() {  
  47.             return imageResIds.length;  
  48.         }  
  49.   
  50.         @Override  
  51.         public Object getItem(int position) {  
  52.             return imageResIds[position];  
  53.         }  
  54.   
  55.         @Override  
  56.         public long getItemId(int position) {  
  57.             return position;  
  58.         }  
  59.   
  60.         @Override  
  61.         public View getView(int position, View convertView, ViewGroup container) {  
  62.             ImageView imageView;  
  63.             if (convertView == null) { // if it‘s not recycled, initialize some attributes  
  64.                 imageView = new ImageView(mContext);  
  65.                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);  
  66.                 imageView.setLayoutParams(new GridView.LayoutParams(  
  67.                         LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  
  68.             } else {  
  69.                 imageView = (ImageView) convertView;  
  70.             }  
  71.             imageView.setImageResource(imageResIds[position]); // Load image into ImageView  
  72.             return imageView;  
  73.         }  
  74.     }  
  75. }  

此处同样在UI线程中读取了图片.这种方式在图片较少并且尺寸规律时并无不妥(基于系统资源的加载和缓存方式),但是如果需要任何其他的附加处理,我们的UI线程就可能被阻塞.

同样,前述的异步加载图片并且缓存的方式也适用于这里.同时,我们也必须谨慎地处理并发操作,因为在GridView中,子View是可以被复用的.具体处理方式,可以参考Processing Bitmaps Off the UI Thread.如下是此处的处理:

view plaincopy to clipboardprint?
  1. public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener {  
  2.     ...  
  3.   
  4.     private class ImageAdapter extends BaseAdapter {  
  5.         ...  
  6.   
  7.         @Override  
  8.         public View getView(int position, View convertView, ViewGroup container) {  
  9.             ...  
  10.             loadBitmap(imageResIds[position], imageView)  
  11.             return imageView;  
  12.         }  
  13.     }  
  14.   
  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);  
  21.             task.execute(resId);  
  22.         }  
  23.     }  
  24.   
  25.     static class AsyncDrawable extends BitmapDrawable {  
  26.         private final WeakReference<BitmapWorkerTask> bitmapWorkerTaskReference;  
  27.   
  28.         public AsyncDrawable(Resources res, Bitmap bitmap,  
  29.                 BitmapWorkerTask bitmapWorkerTask) {  
  30.             super(res, bitmap);  
  31.             bitmapWorkerTaskReference =  
  32.                 new WeakReference<BitmapWorkerTask>(bitmapWorkerTask);  
  33.         }  
  34.   
  35.         public BitmapWorkerTask getBitmapWorkerTask() {  
  36.             return bitmapWorkerTaskReference.get();  
  37.         }  
  38.     }  
  39.   
  40.     public static boolean cancelPotentialWork(int data, ImageView imageView) {  
  41.         final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView);  
  42.   
  43.         if (bitmapWorkerTask != null) {  
  44.             final int bitmapData = bitmapWorkerTask.data;  
  45.             if (bitmapData != data) {  
  46.                 // Cancel previous task  
  47.                 bitmapWorkerTask.cancel(true);  
  48.             } else {  
  49.                 // The same work is already in progress  
  50.                 return false;  
  51.             }  
  52.         }  
  53.         // No task associated with the ImageView, or an existing task was cancelled  
  54.         return true;  
  55.     }  
  56.   
  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();  
  63.            }  
  64.         }  
  65.         return null;  
  66.     }  
  67.   
  68.     ... // include updated BitmapWorkerTask class  

注意:此处的处理同样适用于ListView.

在此处的处理中,我们实现了对图片的灵活加载以及处理,并且保证了UI线程的流畅性.在后台线程中我们能够加载网络图片或者对大图片进行处理.


联系
我们