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

这篇文章将前几篇使用的方法进行了整合,让我们能够在后台线程中加载以及缓存图片并在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. private ImagePagerAdapter mAdapter;


4. private ViewPager mPager;
5. // 静态的图片资源数组


6. public final static Integer[] imageResIds = new Integer[] {


7. R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3,


8. R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6,


9. R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9};
10. @Override


11. public void onCreate(Bundle savedInstanceState) {


12. super.onCreate(savedInstanceState);


13. setContentView(R.layout.image_detail_pager); // 布局中仅仅包含一个ViewPager
14. mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), imageResIds.length);


15. mPager = (ViewPager) findViewById(R.id.pager);


16. mPager.setAdapter(mAdapter);


17. }
18. public static class ImagePagerAdapter extends FragmentStatePagerAdapter {


19. private final int mSize;
20. public ImagePagerAdapter(FragmentManager fm, int size) {


21. super(fm);


22. mSize = size;


23. }
24. @Override


25. public int getCount() {


26. return mSize;


27. }
28. @Override


29. public Fragment getItem(int position) {


30. return ImageDetailFragment.newInstance(position);


31. }


32. }


33. }

public class ImageDetailActivity extends FragmentActivity {

    public static final String EXTRA_IMAGE = "extra_image";

private ImagePagerAdapter mAdapter;

    private ViewPager mPager;
// 静态的图片资源数组

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

        }

    }

}

以下是一个包含了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. static ImageDetailFragment newInstance(int imageNum) {


6. final ImageDetailFragment f = new ImageDetailFragment();


7. final Bundle args = new Bundle();


8. args.putInt(IMAGE_DATA_EXTRA, imageNum);


9. f.setArguments(args);


10. return f;


11. }
12. // Empty constructor, required as per Fragment docs


13. public ImageDetailFragment() {}
14. @Override


15. public void onCreate(Bundle savedInstanceState) {


16. super.onCreate(savedInstanceState);


17. mImageNum = getArguments() != null ? getArguments().getInt(IMAGE_DATA_EXTRA) : -1;


18. }
19. @Override


20. public View onCreateView(LayoutInflater inflater, ViewGroup container,


21. Bundle savedInstanceState) {


22. // image_detail_fragment.xml contains just an ImageView


23. final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);


24. mImageView = (ImageView) v.findViewById(R.id.imageView);


25. return v;


26. }
27. @Override


28. public void onActivityCreated(Bundle savedInstanceState) {


29. super.onActivityCreated(savedInstanceState);


30. final int resId = ImageDetailActivity.imageResIds[mImageNum];


31. mImageView.setImageResource(resId); // 将图片加载到ImageView中


32. }


33. }

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); // 将图片加载到ImageView中

    }

}

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

view plaincopy to clipboardprint?

1. public class ImageDetailActivity extends FragmentActivity {


2. ...
3. public void loadBitmap(int resId, ImageView imageView) {


4. mImageView.setImageResource(R.drawable.image_placeholder);


5. BitmapWorkerTask task = new BitmapWorkerTask(mImageView);


6. task.execute(resId);


7. }
8. ... // include BitmapWorkerTask class


9. }
10. public class ImageDetailFragment extends Fragment {


11. ...
12. @Override


13. public void onActivityCreated(Bundle savedInstanceState) {


14. super.onActivityCreated(savedInstanceState);


15. if (ImageDetailActivity.class.isInstance(getActivity())) {


16. final int resId = ImageDetailActivity.imageResIds[mImageNum];


17. // 在后台线程中加载图片,而不是在Activity中直接读取图片


18. ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);


19. }


20. }


21. }

public class ImageDetailActivity extends FragmentActivity {

    ...

public void loadBitmap(int resId, ImageView imageView) {

        mImageView.setImageResource(R.drawable.image_placeholder);

        BitmapWorkerTask task = new BitmapWorkerTask(mImageView);

        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())) {

            final int resId = ImageDetailActivity.imageResIds[mImageNum];

			// 在后台线程中加载图片,而不是在Activity中直接读取图片

            ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);

        }

    }

}

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

view plaincopy to clipboardprint?

1. public class ImageDetailActivity extends FragmentActivity {


2. ...


3. private LruCache<String, Bitmap> mMemoryCache;
4. @Override


5. public void onCreate(Bundle savedInstanceState) {


6. ...


7. // initialize LruCache as per Use a Memory Cache section


8. }
9. public void loadBitmap(int resId, ImageView imageView) {


10. final String imageKey = String.valueOf(resId);
11. final Bitmap bitmap = mMemoryCache.get(imageKey);


12. if (bitmap != null) {


13. mImageView.setImageBitmap(bitmap);


14. } else {


15. mImageView.setImageResource(R.drawable.image_placeholder);


16. BitmapWorkerTask task = new BitmapWorkerTask(mImageView);


17. task.execute(resId);


18. }


19. }
20. ... // include updated BitmapWorkerTask from Use a Memory Cache section


21. }

public class ImageDetailActivity extends FragmentActivity {

    ...

    private LruCache<String, Bitmap> mMemoryCache;

@Override

    public void onCreate(Bundle savedInstanceState) {

        ...

        // initialize LruCache as per Use a Memory Cache section

    }
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

}

将以上组合起来使用,就可以实现高效率的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. // A static dataset to back the GridView adapter


4. public final static Integer[] imageResIds = new Integer[] {


5. R.drawable.sample_image_1, R.drawable.sample_image_2, R.drawable.sample_image_3,


6. R.drawable.sample_image_4, R.drawable.sample_image_5, R.drawable.sample_image_6,


7. R.drawable.sample_image_7, R.drawable.sample_image_8, R.drawable.sample_image_9};
8. // Empty constructor as per Fragment docs


9. public ImageGridFragment() {}
10. @Override


11. public void onCreate(Bundle savedInstanceState) {


12. super.onCreate(savedInstanceState);


13. mAdapter = new ImageAdapter(getActivity());


14. }
15. @Override


16. public View onCreateView(


17. LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


18. final View v = inflater.inflate(R.layout.image_grid_fragment, container, false);


19. final GridView mGridView = (GridView) v.findViewById(R.id.gridView);


20. mGridView.setAdapter(mAdapter);


21. mGridView.setOnItemClickListener(this);


22. return v;


23. }
24. @Override


25. public void onItemClick(AdapterView<?> parent, View v, int position, long id) {


26. final Intent i = new Intent(getActivity(), ImageDetailActivity.class);


27. i.putExtra(ImageDetailActivity.EXTRA_IMAGE, position);


28. startActivity(i);


29. }
30. private class ImageAdapter extends BaseAdapter {


31. private final Context mContext;
32. public ImageAdapter(Context context) {


33. super();


34. mContext = context;


35. }
36. @Override


37. public int getCount() {


38. return imageResIds.length;


39. }
40. @Override


41. public Object getItem(int position) {


42. return imageResIds[position];


43. }
44. @Override


45. public long getItemId(int position) {


46. return position;


47. }
48. @Override


49. public View getView(int position, View convertView, ViewGroup container) {


50. ImageView imageView;


51. if (convertView == null) { // if it‘s not recycled, initialize some attributes


52. imageView = new ImageView(mContext);


53. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);


54. imageView.setLayoutParams(new GridView.LayoutParams(


55. LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));


56. } else {


57. imageView = (ImageView) convertView;


58. }


59. imageView.setImageResource(imageResIds[position]); // Load image into ImageView


60. return imageView;


61. }


62. }


63. }

public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener {

    private ImageAdapter mAdapter;

// A static dataset to back the GridView adapter

    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;

        }

    }

}

此处同样在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. private class ImageAdapter extends BaseAdapter {


4. ...
5. @Override


6. public View getView(int position, View convertView, ViewGroup container) {


7. ...


8. loadBitmap(imageResIds[position], imageView)


9. return imageView;


10. }


11. }
12. public void loadBitmap(int resId, ImageView imageView) {


13. if (cancelPotentialWork(resId, imageView)) {


14. final BitmapWorkerTask task = new BitmapWorkerTask(imageView);


15. final AsyncDrawable asyncDrawable =


16. new AsyncDrawable(getResources(), mPlaceHolderBitmap, task);


17. imageView.setImageDrawable(asyncDrawable);


18. task.execute(resId);


19. }


20. }
21. static class AsyncDrawable extends BitmapDrawable {


22. private final WeakReference<BitmapWorkerTask> bitmapWorkerTaskReference;
23. public AsyncDrawable(Resources res, Bitmap bitmap,


24. BitmapWorkerTask bitmapWorkerTask) {


25. super(res, bitmap);


26. bitmapWorkerTaskReference =


27. new WeakReference<BitmapWorkerTask>(bitmapWorkerTask);


28. }
29. public BitmapWorkerTask getBitmapWorkerTask() {


30. return bitmapWorkerTaskReference.get();


31. }


32. }
33. public static boolean cancelPotentialWork(int data, ImageView imageView) {


34. final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView);
35. if (bitmapWorkerTask != null) {


36. final int bitmapData = bitmapWorkerTask.data;


37. if (bitmapData != data) {


38. // Cancel previous task


39. bitmapWorkerTask.cancel(true);


40. } else {


41. // The same work is already in progress


42. return false;


43. }


44. }


45. // No task associated with the ImageView, or an existing task was cancelled


46. return true;


47. }
48. private static BitmapWorkerTask getBitmapWorkerTask(ImageView imageView) {


49. if (imageView != null) {


50. final Drawable drawable = imageView.getDrawable();


51. if (drawable instanceof AsyncDrawable) {


52. final AsyncDrawable asyncDrawable = (AsyncDrawable) drawable;


53. return asyncDrawable.getBitmapWorkerTask();


54. }


55. }


56. return null;


57. }
58. ... // include updated BitmapWorkerTask class

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)) {

            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) {

                // Cancel previous task

                bitmapWorkerTask.cancel(true);

            } else {

                // The same work is already in progress

                return false;

            }

        }

        // No task associated with the ImageView, or an existing task was cancelled

        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

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

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