閱讀875 返回首頁    go 外匯

高效地顯示Bitmap圖片 4 - 使用ViewPager與GridView顯示圖片

Displaying Bitmaps in Your UI [在UI上呈現Bitmap]

  • 這一課會演示如何運用前麵三節課的內容，使用後台線程與Cache機製來加載圖片到 ViewPager 與 GridView 組件，並且學習處理並發與配置改變問題。
  • [並發問題的處理確實需要好好考慮，大多數App都沒有仔細考慮到這個問題，會導致浪費更多的資源，效率不夠]。

Load Bitmaps into a ViewPager Implementation [實現加載圖片到ViewPager]

  •  swipe view pattern 是一個用來切換顯示不同詳情界麵的很好的方法。[關於這種效果請先參看Android Design: Swipe Views ，這是一個很好的設計，在很多App裏麵都可以看到這種設計，例如網易閱讀，在閱讀文章時可以左右滑動來切換文章，在Google Reader裏麵文章的切換也是這樣，不過最終網易還是做的稍微好些，因為GReader對手勢的判斷有點過了，一不小心左右碰到就可能文章被切換掉，這點讓我很苦惱，而網易閱讀避免了這樣的問題，需要用戶動作稍大才會出現切換的效果] . 
  • 你可以通過 PagerAdapter 與 ViewPager 組件來實現這個效果. 然而，一個更加合適的Adapter是PagerAdapter 的子類 FragmentStatePagerAdapter：它可以在某個ViewPager中的子視圖切換出屏幕時自動銷毀與保存 Fragments 的狀態。這樣能夠保持消耗更少的內存。
    • Note: 如果你隻有為數不多的圖片並且確保不會超出程序內存限製，那麼使用 PagerAdapter 或 FragmentPagerAdapter 會更加合適。
  • 下麵是一個使用ViewPager與ImageView作為子視圖的示例。
  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.     // A static dataset to back the ViewPager adapter  
  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); // Contains just a 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. }  
  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); // Load image into ImageView  
  37.     }  
  38. }  

  • 希望你有發現上麵示例存在的問題：在UI Thread中讀取圖片可能會導致程序ANR。使用在Lesson 2中學習的 AsyncTask 會比較好。
  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.             // Call out to ImageDetailActivity to load the bitmap in a background thread  
  22.             ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView);  
  23.         }  
  24.     }  
  25. }  
  • 在 BitmapWorkerTask 中做一些例如resizing or fetching images from the network，不會卡到UI Thread。如果後台線程不僅僅是做個簡單的直接加載動作，增加一個內存Cache或者磁盤Cache會比較好[參考Lesson 3] ,下麵是一些為了內存Cache而附加的內容:
  1. public class ImageDetailActivity extends FragmentActivity {  
  2.     ...  
  3.     private LruCache 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. }  

Load Bitmaps into a GridView Implementation [實現加載圖片到GridView]

  •  grid list building block 是一種有效顯示大量圖片的方式。這樣能夠一次顯示許多圖片，而且那些即將被顯示的圖片也處於準備顯示狀態。如果你想要實現這種效果，你必須確保UI是流暢的，能夠控製內存使用，並且正確的處理並發問題（因為 GridView 會循環使用子視圖)。
  • 下麵是一個在Fragment裏麵內置了ImageView作為GridView子視圖的示例：
  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.     // Empty constructor as per Fragment docs  
  11.     public ImageGridFragment() {}  
  12.   
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         mAdapter = new ImageAdapter(getActivity());  
  17.     }  
  18.   
  19.     @Override  
  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);  
  26.         return v;  
  27.     }  
  28.   
  29.     @Override  
  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);  
  33.         startActivity(i);  
  34.     }  
  35.   
  36.     private class ImageAdapter extends BaseAdapter {  
  37.         private final Context mContext;  
  38.   
  39.         public ImageAdapter(Context context) {  
  40.             super();  
  41.             mContext = context;  
  42.         }  
  43.   
  44.         @Override  
  45.         public int getCount() {  
  46.             return imageResIds.length;  
  47.         }  
  48.   
  49.         @Override  
  50.         public Object getItem(int position) {  
  51.             return imageResIds[position];  
  52.         }  
  53.   
  54.         @Override  
  55.         public long getItemId(int position) {  
  56.             return position;  
  57.         }  
  58.   
  59.         @Override  
  60.         public View getView(int position, View convertView, ViewGroup container) {  
  61.             ImageView imageView;  
  62.             if (convertView == null) { // if it's not recycled, initialize some attributes  
  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));  
  67.             } else {  
  68.                 imageView = (ImageView) convertView;  
  69.             }  
  1.         //請注意下麵的代碼  
  2.         imageView.setImageResource(imageResIds[position]); // Load image into ImageView  
  3.         return imageView;  
  4.     }  
  5. }  

  • 與前麵加載到圖片到ViewPager一樣，如果setImageResource的操作會比較耗時，有可能會卡到UI Thread。
  • 可以使用類似前麵異步處理圖片與增加緩存的方法來解決那個問題。然而，我們還需要考慮GridView的循環機製所帶來的並發問題。為了處理這個問題，請參考前麵Lesson 2: Processing Bitmaps Off the UI Thread 。下麵是一個更新的解決方案：
  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 bitmapWorkerTaskReference;  
  27.   
  28.         public AsyncDrawable(Resources res, Bitmap bitmap,  
  29.                 BitmapWorkerTask bitmapWorkerTask) {  
  30.             super(res, bitmap);  
  31.             bitmapWorkerTaskReference =  
  32.                 new WeakReference(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  

Note: 對於 ListView 同樣可以套用上麵的方法。

  • 上麵的方法提供了足夠的彈性，使得你可以做從網絡加載與Resize大的數碼照片等操作而不至於卡到UI Thread。
  • 對於完整的代碼示例，下載鏈接：https://developer.android.com/shareables/training/BitmapFun.zip

最後更新：2017-04-04 07:03:06

  上一篇：go 提高顯示布局文件的性能 1 - 優化布局層級
  下一篇：go 高效地顯示Bitmap圖片 3 - 兩種緩存Bitmap的方式