Android官网培训课：在UI中显示位图

本节课综合前几节课的知识，向你展示如何使用后台线程和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 [code]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);
}
}
}[/code]

任何额外的图片处理（像更改尺寸，或者从网络获取图片）都可以再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 [code]BitmapWorkerTask

class[/code]

Note: 一样的代码用在 

ListView

 上也可以。
这个实现的优点在于不妨碍UI流畅的情况下对图片加载和处理的灵活度。在后台任务中你可以从网络加载图片，也可以改变图片尺寸等等。