进阶5之Android UI介面之（滑动效果之Gallery + GridView）

人一生下就会哭，笑是后来才学会的。所以忧伤是一种低级的本能，而快乐是一种更高级的能力。

本讲内容：滑动效果之Gallery + GridView

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

示例效果图

下面是res/layout/activity_main.xml 布局文件：

<?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:orientation="vertical" >        <GridView         android:id="@+id/myGrid"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center_vertical|center_horizontal"        android:numColumns="3"        android:paddingTop="5dp"        android:stretchMode="columnWidth"        android:verticalSpacing="6dp"/></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="2dp" >        <com.example.gallery_01.myGallery            android:id="@+id/mygallery"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:spacing="16dp" />    </RelativeLayout></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <solid  android:color="#ff0000"/></shape>

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/decelerate_interpolator" >    <scale        android:duration="2000"        android:fromXScale="0.0"        android:fromYScale="0.0"        android:pivotX="50%p"        android:pivotY="50%p"        android:toXScale="1.0"        android:toYScale="1.0" /></set>

下面是ImageSource.java文件：

public class ImageSource {	static Integer[] mThumbIds = { R.drawable.img1, R.drawable.img2,			R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6,			R.drawable.img7, R.drawable.img8, R.drawable.img9, R.drawable.img10 };}

package com.example.gallery_01;import android.content.Context;import android.util.AttributeSet;import android.view.KeyEvent;import android.view.MotionEvent;import android.widget.Gallery;import android.widget.Toast;import com.example.gallery_01.GalleryActivity.ImageAdapter;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;	}}

public class GalleryActivity extends Activity {	public int position = 0;	// 当前显示图片的位置	@Override	public void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.gallery);	 				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); 	} 		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;		}	}}

public class MainActivity extends Activity {	private GridView gridView;		private GridImageAdapter gridImageAdapter;	private DisplayMetrics dm;	private int imageCol = 3;	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		gridView = (GridView) findViewById(R.id.myGrid);		gridImageAdapter = new GridImageAdapter(this);		gridView.setAdapter(gridImageAdapter);		gridView.setOnItemClickListener(listener); // 设置点击监听事件		checkOrientation();				dm = new DisplayMetrics();		getWindowManager().getDefaultDisplay().getMetrics(dm); 	} 	/** 检查是横屏或竖屏，横屏每行4列，竖屏每行3列 */	private void checkOrientation(){		if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {			imageCol = 5;		} else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {			imageCol = 3;		}		gridView.setNumColumns(imageCol);	}		@Override	public void onConfigurationChanged(Configuration newConfig) {	// 屏幕方向改变调用（横屏与竖屏切换）		super.onConfigurationChanged(newConfig);		try {			checkOrientation();			gridView.setAdapter(new GridImageAdapter(this));		} catch (Exception ex) {			ex.printStackTrace();		}	}	AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {		@Override		public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {			Intent intent = new Intent();			intent.setClass(MainActivity.this, GalleryActivity.class);			intent.putExtra("position", position);			startActivity(intent);		}	};	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;		}	}		public class ImageViewExt extends ImageView {		private int color;		public ImageViewExt(Context context) {			super(context);			color = Color.GRAY;		}		public ImageViewExt(Context context, AttributeSet attrs) {			super(context, attrs);			color = Color.GRAY;		}		@Override		protected void onDraw(Canvas canvas) {			super.onDraw(canvas);			Rect rec = canvas.getClipBounds();			rec.bottom--;			rec.right--;			Paint paint = new Paint();			paint.setColor(color);			paint.setStrokeWidth(5);			paint.setStyle(Paint.Style.STROKE);			canvas.drawRect(rec, paint);		}	}}