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

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

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

1、GridView

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

[java] view plain copy print ?

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

	public class GridImageAdapter extends BaseAdapter {
		private Context mContext;
		Drawable btnDrawable;

		public GridImageAdapter(Context context) {
			mContext = context;
			Resources resources = context.getResources();
			btnDrawable = resources.getDrawable(R.drawable.bg);
		}

		@Override
		public int getCount() {
			return ImageSource.mThumbIds.length;
		}

		@Override
		public Object getItem(int position) {
			return position;
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ImageViewExt imageView;
			int space;

			if (convertView == null) {
				imageView = new ImageViewExt(mContext);
				if (imageCol == 5) {
					space = dm.heightPixels / imageCol - 6;
					imageView.setLayoutParams(new GridView.LayoutParams(space, space));
				} else {
					space = dm.widthPixels / imageCol - 6;
					imageView.setLayoutParams(new GridView.LayoutParams( space, space));
				}
				imageView.setAdjustViewBounds(true);
				imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);	// 缩放图片使其长和宽一样

				 imageView.setPadding(3, 3, 3, 3);
			} else {
				imageView = (ImageViewExt) convertView;
			}
			imageView.setImageResource(ImageSource.mThumbIds[position]);

			return imageView;
		}
	}

然后，用 GridImageAdapter填充GridView

[java] view plain copy print ?

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

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

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

[java] view plain copy print ?

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. };  

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

2、Gallery

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

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

[java] view plain copy print ?

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

	public class ImageAdapter extends BaseAdapter {
		private Context mContext; 
		private int mPos;

		public ImageAdapter(Context context) {
			mContext = context;
		}

		public void setOwnposition(int ownposition) {
			this.mPos = ownposition;
		}

		public int getOwnposition() {
			return mPos;
		}

		@Override
		public int getCount() {
			return ImageSource.mThumbIds.length;
		}

		@Override
		public Object getItem(int position) { 
			mPos=position;
			return position;
		}

		@Override
		public long getItemId(int position) {
			mPos=position; 
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			mPos=position;
			ImageView imageview = new ImageView(mContext);
			imageview.setBackgroundColor(0xFF000000);
			imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
			imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
			imageview.setImageResource(ImageSource.mThumbIds[position]);
			
			return imageview;
		}
	}

然后， 用 ImageAdapter填充Gallery

[java] view plain copy print ?

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.       
8.     Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画   
9.     galllery.setAnimation(an);   

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

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

[java] view plain copy print ?

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

public class myGallery extends Gallery {
	boolean isFirst = false;
	boolean isLast = false;

	public myGallery(Context context) {
		super(context);
	}

	public myGallery(Context context, AttributeSet paramAttributeSet) {
		super(context, paramAttributeSet);
	}

	/** 是否向左滑动（true - 向左滑动； false - 向右滑动） */
	private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {	
		return e2.getX() > e1.getX();
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
		ImageAdapter ia = (ImageAdapter) this.getAdapter();
		int p = ia.getOwnposition();	// 获取当前图片的position
		int count = ia.getCount();		// 获取全部图片的总数count
		int kEvent;
		if (isScrollingLeft(e1, e2)) {
			if (p == 0 && isFirst) {
				Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show();
			} else if (p == 0) {
				isFirst = true;
			} else {
				isLast = false;
			}

			kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
		} else {
			if (p == count - 1 && isLast) {
				Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
			} else if (p == count - 1) {
				isLast = true;
			} else {
				isFirst = false;
			}

			kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
		}
		onKeyDown(kEvent, null);
		return true;
	}
}

GalleryActivity的布局文件gallery.xml

[html] view plain copy print ?

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>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dip" >
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="2dip" >
        <com.homer.gridgallery.myGallery
            android:id="@+id/mygallery"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:spacing="16dp" />
    </RelativeLayout>
</LinearLayout>

源码下载

参考推荐：

GridView

Grid View tutorial

Gallery

Gallery tutorial

ViewGroup