本节课综合前几节课的知识，向你展示如何使用后台线程和bitmap 缓存把多张bitmap加载到ViewPager和GridView中，同时处理线程并发和配置改变。
向ViewPager中加载bitmap的实现
swipe view pattern(http://developer.android.com/design/patterns/swipe-views.html)是一种浏览图片库的细节视图的极佳方式。你可以用ViewPager绑定一个PagerAdapter的方法来实现这种模式。不过，PagerAdapter的子类FragmentStatePagerAdapter 更合适于做这个绑定适配器，当ViewPager移出屏幕时，它能自动销毁这些 Fragment ，并且保存这些Fragment的状态，保持对内存的使用比较低。
注: 如果图片数目较少，并且你能确定这些图片不会超过app内存的显示，那么用PagerAdapter或FragmentPagerAdapter可能更合适。
以下是一个包含有ImageView的ViewPager的实现。main activity中包含ViewPager及其适配器：
public class ImageDetailActivity extends FragmentActivity { public static final String EXTRA_IMAGE = "extra_image"; private ImagePagerAdapter mAdapter; private ViewPager mPager; // 静态数据集，以支持ViewPager的适配器 public final static Integer[] imageResIds = new Integer[] { R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3, R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6, R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.image_detail_pager); // 只包含一个ViewPager mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), imageResIds.length); mPager = (ViewPager) findViewById(R.id.pager); mPager.setAdapter(mAdapter); } public static class ImagePagerAdapter extends FragmentStatePagerAdapter { private final int mSize; public ImagePagerAdapter(FragmentManager fm, int size) { super(fm); mSize = size; } @Override public int getCount() { return mSize; } @Override public Fragment getItem(int position) { return ImageDetailFragment.newInstance(position); } } }
下面是包含ImagerView的details Fragment的实现。看起来比较合理了，但你能找出其中的不足吗？如何改进呢？
public class ImageDetailFragment extends Fragment { private static final String IMAGE_DATA_EXTRA = "resId"; private int mImageNum; //图片标号 private ImageView mImageView; // static ImageDetailFragment newInstance(int imageNum) { final ImageDetailFragment f = new ImageDetailFragment(); final Bundle args = new Bundle(); args.putInt(IMAGE_DATA_EXTRA, imageNum); f.setArguments(args); return f; } // Empty constructor, required as per Fragment docs public ImageDetailFragment() {} @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mImageNum = getArguments() != null ? getArguments().getInt(IMAGE_DATA_EXTRA) : -1; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // image_detail_fragment.xml contains just an ImageView final View v = inflater.inflate(R.layout.image_detail_fragment, container, false); mImageView = (ImageView) v.findViewById(R.id.imageView); return v; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); final int resId = ImageDetailActivity.imageResIds[mImageNum]; //根据图片标号加载图片 mImageView.setImageResource(resId); // 加载 } }
你应该发现了这一点：图片是在UI线程中从resourse中被读取的，这会使app被挂起或者强制关闭。用异步任务AsyncTask，很方便的把对图片的加载和处理移到后台线程。
public class ImageDetailActivity extends FragmentActivity {
...
//resId资源的id号
public void loadBitmap(int resId, ImageView imageView) {
mImageView.setImageResource(R.drawable.image_placeholder);
BitmapWorkerTask task = new BitmapWorkerTask(mImageView); //还记得我们前几节课讲过的BitmapWorkerTask吧？在后台线程中完成向ImageView设置位图的工作
task.execute(resId);
}
... // include BitmapWorkerTask class
}
public class ImageDetailFragment extends Fragment {
...
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if (ImageDetailActivity.class.isInstance(getActivity())) { //判断当前Fragment所在Activity
final int resId = ImageDetailActivity.imageResIds[mImageNum];//从开始定义好的静态资源中取照片id
// 调用ImageDetailActivity在后台线程加载位图
((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);
}
}
}
任何额外的图片处理（像更改尺寸，或者从网络获取图片）都可以再BitmapWorkerTask中做，不会影响main UI的响应性能。如果后台线程不止从磁盘加载图片，还可以访问内存cache或者磁盘cache：
public class ImageDetailActivity extends FragmentActivity { ... private LruCache<String, Bitmap> mMemoryCache; @Override public void onCreate(Bundle savedInstanceState) { ... // 初始化LruCache } public void loadBitmap(int resId, ImageView imageView) { final String imageKey = String.valueOf(resId); final Bitmap bitmap = mMemoryCache.get(imageKey); if (bitmap != null) { //若在缓存中找到了 mImageView.setImageBitmap(bitmap); } else { mImageView.setImageResource(R.drawable.image_placeholder); BitmapWorkerTask task = new BitmapWorkerTask(mImageView); task.execute(resId); } } ... // include updated BitmapWorkerTask from Use a Memory Cache section }
把上面这些综合到一起，其实现的图片加载延迟较小，而且尽可能的在后台线程做对图片的处理。
加载位图到GridView的实现
grid list building block 对于展示图片集是很有用的，用一个GridView组件就可以实现，一次显示一张图片，但还需要几张图片准备被显示，如果用户上下滑动屏幕的话。当实现了这种控制类型，你必须保证UI是保持流畅的，保证内存的使用是可控的，并且并发是正确的（取决于GridView循环使用其子view的方式）。
作为开始，这有一个标准的GridView的实现，带有ImageView孩子，位于一个Fragment中。看起来已经不错了，能不能更好一些呢？
public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener { private ImageAdapter mAdapter; // 静态的图片集，支持实现用 public final static Integer[] imageResIds = new Integer[] { R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3, R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6, R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9}; // Empty constructor as per Fragment docs public ImageGridFragment() {} @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mAdapter = new ImageAdapter(getActivity()); } @Override public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View v = inflater.inflate(R.layout.image_grid_fragment, container, false); final GridView mGridView = (GridView) v.findViewById(R.id.gridView); mGridView.setAdapter(mAdapter); //设置适配器 mGridView.setOnItemClickListener(this); //设置监听器 return v; } @Override public void onItemClick(AdapterView<?> parent, View v, int position, long id) { final Intent i = new Intent(getActivity(), ImageDetailActivity.class); i.putExtra(ImageDetailActivity.EXTRA_IMAGE, position); //传递数据 startActivity(i); } private class ImageAdapter extends BaseAdapter { private final Context mContext; public ImageAdapter(Context context) { super(); mContext = context; } @Override public int getCount() { return imageResIds.length; //图片数目 } @Override public Object getItem(int position) { return imageResIds[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup container) { ImageView imageView; if (convertView == null) { // if it's not recycled, initialize some attributes imageView = new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setLayoutParams(new GridView.LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); } else { imageView = (ImageView) convertView; } imageView.setImageResource(imageResIds[position]); // Load image into ImageView return imageView; } }//ImageAdapter结束 }
上面的实现的问题还是在于图片在UI线程中被加载。如果有额外的图片处理需要做，那么你的UI就要陷入停滞了。
上一章节的异步处理和缓存方法都能在这使用。不过你还需要小心谨慎的处理GridView循环使用其子view的同步。
public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener {
...
private class ImageAdapter extends BaseAdapter {
...
@Override
public View getView(int position, View convertView, ViewGroup container) {
...
loadBitmap(imageResIds[position], imageView)
return imageView;
}
}
//
public void loadBitmap(int resId, ImageView imageView) {
if (cancelPotentialWork(resId, imageView)) {//考虑线程并发，你所想加载到的view可能正在做一个之前启动的加载工作，所以先进行判断，如果加载图片与要加载的相同则继续，否则取消已经在加载的异步任务
final BitmapWorkerTask task = new BitmapWorkerTask(imageView);
final AsyncDrawable asyncDrawable =
new AsyncDrawable(getResources(), mPlaceHolderBitmap, task);
imageView.setImageDrawable(asyncDrawable);
task.execute(resId);
}
}
static class AsyncDrawable extends BitmapDrawable {
private final WeakReference<BitmapWorkerTask> bitmapWorkerTaskReference;
public AsyncDrawable(Resources res, Bitmap bitmap,
BitmapWorkerTask bitmapWorkerTask) {
super(res, bitmap);
bitmapWorkerTaskReference =
new WeakReference<BitmapWorkerTask>(bitmapWorkerTask);
}
public BitmapWorkerTask getBitmapWorkerTask() {
return bitmapWorkerTaskReference.get();
}
}
public static boolean cancelPotentialWork(int data, ImageView imageView) {
final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView);
if (bitmapWorkerTask != null) {
final int bitmapData = bitmapWorkerTask.data;
if (bitmapData != data) {
// 取消之前的异步任务
bitmapWorkerTask.cancel(true);
} else {
// 相同的任务正在进行中了，
return false;
}
}
// 并无相关的什么任务，或者任务已经被取消了
return true;
}
private static BitmapWorkerTask getBitmapWorkerTask(ImageView imageView) {
if (imageView != null) {
final Drawable drawable = imageView.getDrawable();
if (drawable instanceof AsyncDrawable) {
final AsyncDrawable asyncDrawable = (AsyncDrawable) drawable;
return asyncDrawable.getBitmapWorkerTask();
}
}
return null;
}
... // include updated BitmapWorkerTask class
Note: 一样的代码用在 ListView 上也可以。
这个实现的优点在于不妨碍UI流畅的情况下对图片加载和处理的灵活度。在后台任务中你可以从网络加载图片，也可以改变图片尺寸等等。
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
