在 ViewPager 中显示图片
这个 左右滑动界面的模式 非常适合在图库中显示每个图片详情。您
可以使用ViewPager
控件(结合 PagerAdapter
)来实现这个设计模式。
。然而您还可以使用这个FragmentStatePagerAdapter
Adapter,该Adapter会
自动清除和保存当前不可见ViewPager中的Fragment的状态,减少了程序内存的使用量。
注意:
如果您只是显示很少的图片,并且不会超出程序的内存限制,则使用普通的 PagerAdapter
或者
FragmentPagerAdapter
更加合适。
下面是一个 ViewPager
示例,包含了子控件
ImageView
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
public class ImageDetailActivity extends FragmentActivity { public static final String EXTRA_IMAGE = "extra_image" ; private ImagePagerAdapter mAdapter; private ViewPager mPager; // A static dataset to back the ViewPager 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}; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.image_detail_pager); // Contains just a 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); } } } |
详细的 Fragment
中包含
ImageView
子控件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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]; <STRONG>mImageView.setImageResource(resId);</STRONG> // Load image into ImageView } } |
希望您能发现上面代码中的一个潜在问题;上面的图片在UI线程中从系统资源中读取,这个操作可能导致该程序ANR。使用
AsyncTask
来在另外一个线程中载入图片是比较好的习惯。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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 <A href="/?p=394#BitmapWorkerTask"><CODE>BitmapWorkerTask</CODE></A> 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]; // Call out to ImageDetailActivity to load the bitmap in a background thread ((ImageDetailActivity) getActivity()).loadBitmap(resId, mImageView); } } } |
任何其他处理 (例如 缩放图片或者从网络获取图片)都可以在 BitmapWorkerTask
中实现而不会影响UI线程的操作。
如果后台线程所做的工作不仅仅从磁盘载入图片,则使用一个内存或者磁盘缓存都可以得到一些收益。下面是一个修改后的内存缓存实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
public class ImageDetailActivity extends FragmentActivity { ... private LruCache<STRING, Bitmap> mMemoryCache; @Override public void onCreate(Bundle savedInstanceState) { ... // initialize LruCache as per <A href="/?p=395#memory-cache">Use a Memory Cache</A> 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 <A href="/?p=395#memory-cache">Use a Memory Cache</A> section } |
把这些代码组织起来,您就实现了一个最小图片加载延时的 ViewPager
实现,并且可以显示
任意数量的图片。
在 GridView 中显示图片
这个 grid list building block 适合用来显示一组图片,可以通过
GridView
控件实现,同时显示多张图片并且还缓存了另外几屏的图片用来后续显示(屏幕滚动的时候)。
当实现这种操作的时候,您要确保UI操作的流畅性、并且控制内存的使用量、还要正确的处理并发访问的情况。
下面代码演示了在Fragment中使用 GridView
来显示图片的情况。
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
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; } <STRONG>imageView.setImageResource(imageResIds[position]);</STRONG> // Load image into ImageView return imageView; } } } |
再一次强调,上面的实现还有存在这个问题:在UI线程中加载图片资源。
通过 在非 UI 线程来处理图片 中介绍的内容很容易实现一个能处理并发访问的实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
public class ImageGridFragment extends Fragment implements AdapterView.OnItemClickListener { ... private class ImageAdapter extends BaseAdapter { ... @Override public View getView( int position, View convertView, ViewGroup container) { ... <STRONG>loadBitmap(imageResIds[position], imageView)</STRONG> 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 <A href="/?p=394#BitmapWorkerTaskUpdated"><CODE>BitmapWorkerTask</CODE></A> class |
注意: 上面的代码很容易移植到 ListView
中
上面的代码可以很有弹性的处理大量图片而不会影响UI线程的流畅性。在后台线程中您可以从磁盘或者网络获取图片内容。
原文转载自 云在千峰: http://yunfeng.sinaapp.com/?p=396#ixzz20lNdKp4L