进阶三之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);
		}
	}
}

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

标签：

原文地址：http://blog.csdn.net/liguojin1230/article/details/44245527