Android 滑动效果基础篇（四）—— Gallery + GridView

Android系统自带一个GridView和Gallery两个控件，GridView网格显示，Gallery单个浏览，两者结合起来可以真正实现Gallery浏览图片效果。

本示例通过GridView和Gallery两个控件，模仿实现一个完整的仿Gallery图像集的图片浏览效果。效果图如下：

1、GridView

首先，自定义一个GridImageAdapter图片适配器，用于填充GridView控件的图片

1. public class GridImageAdapter extends BaseAdapter {
2. private Context mContext;
3. Drawable btnDrawable;
4. public GridImageAdapter(Context context) {
5. mContext = context;
6. Resources resources = context.getResources();
7. btnDrawable = resources.getDrawable(R.drawable.bg);
8. }
9. @Override
10. public int getCount() {
11. return ImageSource.mThumbIds.length;
12. }
13. @Override
14. public Object getItem(int position) {
15. return position;
16. }
17. @Override
18. public long getItemId(int position) {
19. return position;
20. }
21. @Override
22. public View getView(int position, View convertView, ViewGroup parent) {
23. ImageViewExt imageView;
24. int space;
25. if (convertView == null) {
26. imageView = new ImageViewExt(mContext);
27. if (imageCol == 5) {
28. space = dm.heightPixels / imageCol - 6;
29. imageView.setLayoutParams(new GridView.LayoutParams(space, space));
30. } else {
31. space = dm.widthPixels / imageCol - 6;
32. imageView.setLayoutParams(new GridView.LayoutParams( space, space));
33. }
34. imageView.setAdjustViewBounds(true);
35. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);    // 缩放图片使其长和宽一样
36. imageView.setPadding(3, 3, 3, 3);
37. } else {
38. imageView = (ImageViewExt) convertView;
39. }
40. imageView.setImageResource(ImageSource.mThumbIds[position]);
41. return imageView;
42. }
43. }

然后，用GridImageAdapter填充GridView

1. gridView = (GridView) findViewById(R.id.myGrid);
2. gridImageAdapter = new GridImageAdapter(this);
3. gridView.setAdapter(gridImageAdapter);
4. gridView.setOnItemClickListener(listener); // 设置点击监听事件

最后，设置GridView控件的点击监听事件

1. AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
2. @Override
3. public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
4. Intent intent = new Intent();
5. intent.setClass(GridViewActivity.this, GalleryActivity.class);
6. intent.putExtra("position", position);
7. startActivity(intent);
8. }
9. };

2、Gallery

完成了GridView的图片显示、监听事件后，现在点击图片，会启动一个Activity来显示当前点击的图片，此时显示图片的控件便是Gallery

首先，同GridView一样，自定义一个ImageAdapter图片适配器，用来填充Gallery

1. public class ImageAdapter extends BaseAdapter {
2. private Context mContext;
3. private int mPos;
4. public ImageAdapter(Context context) {
5. mContext = context;
6. }
7. public void setOwnposition(int ownposition) {
8. this.mPos = ownposition;
9. }
10. public int getOwnposition() {
11. return mPos;
12. }
13. @Override
14. public int getCount() {
15. return ImageSource.mThumbIds.length;
16. }
17. @Override
18. public Object getItem(int position) {
19. mPos=position;
20. return position;
21. }
22. @Override
23. public long getItemId(int position) {
24. mPos=position;
25. return position;
26. }
27. @Override
28. public View getView(int position, View convertView, ViewGroup parent) {
29. mPos=position;
30. ImageView imageview = new ImageView(mContext);
31. imageview.setBackgroundColor(0xFF000000);
32. imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
33. imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
34. imageview.setImageResource(ImageSource.mThumbIds[position]);
35. return imageview;
36. }
37. }

然后，用ImageAdapter填充Gallery

1. myGallery  galllery = (myGallery) findViewById(R.id.mygallery);
2. Intent intent = getIntent();
3. position = intent.getIntExtra("position", 0);   // 获取GridViewActivity传来的图片位置position
4. ImageAdapter imgAdapter=new ImageAdapter(this);
5. galllery.setAdapter(imgAdapter);        // 设置图片ImageAdapter
6. galllery.setSelection(position);        // 设置当前显示图片
7. Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画
8. galllery.setAnimation(an);

此时，如果细心可以注意到，我们的Gallery也是自己定义的myGallery，具体定义如下：

1. public class myGallery extends Gallery {
2. boolean isFirst = false;
3. boolean isLast = false;
4. public myGallery(Context context) {
5. super(context);
6. }
7. public myGallery(Context context, AttributeSet paramAttributeSet) {
8. super(context, paramAttributeSet);
9. }
10. /** 是否向左滑动（true - 向左滑动； false - 向右滑动） */
11. private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
12. return e2.getX() > e1.getX();
13. }
14. @Override
15. public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
16. ImageAdapter ia = (ImageAdapter) this.getAdapter();
17. int p = ia.getOwnposition();    // 获取当前图片的position
18. int count = ia.getCount();      // 获取全部图片的总数count
19. int kEvent;
20. if (isScrollingLeft(e1, e2)) {
21. if (p == 0 && isFirst) {
22. Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show();
23. } else if (p == 0) {
24. isFirst = true;
25. } else {
26. isLast = false;
27. }
28. kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
29. } else {
30. if (p == count - 1 && isLast) {
31. Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
32. } else if (p == count - 1) {
33. isLast = true;
34. } else {
35. isFirst = false;
36. }
37. kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
38. }
39. onKeyDown(kEvent, null);
40. return true;
41. }
42. }

GalleryActivity的布局文件gallery.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:gravity="center"
6. android:orientation="horizontal"
7. android:padding="10dip" >
8. <RelativeLayout
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:background="#000000"
12. android:padding="2dip" >
13. <com.homer.gridgallery.myGallery
14. android:id="@+id/mygallery"
15. android:layout_width="fill_parent"
16. android:layout_height="fill_parent"
17. android:spacing="16dp" />
18. </RelativeLayout>
19. </LinearLayout>