生活随笔
收集整理的這篇文章主要介紹了
Android的GridView和Gallery结合Demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Demo介紹：首頁是一個GridView加載圖片，豎屏時顯示3列圖片，橫屏時顯示4列圖片;并且對圖片進行大小限制和加灰色邊框處理。
點擊某一張圖片，會鏈接到Gallery頁面，由于Android自帶的Gallery控件滑動效果很不好（滑動一次會加載好多張圖片），這里對Gallery進行了擴展，滑動一次只加載一張圖片。
Demo效果如下：
?
1、首頁Activity頁面，GridViewActivity.java介紹：
?
public class GridViewActivity extends Activity {
? ?? ???private DisplayMetrics dm;
? ?? ???private GridImageAdapter ia;
? ?? ???private GridView g;
? ?? ???private int imageCol = 3;
? ?? ???@Override
? ?? ???protected void onCreate(Bundle savedInstanceState) {
? ?? ?? ?? ?? ? // TODO Auto-generated method stub
? ?? ?? ?? ?? ? super.onCreate(savedInstanceState);
? ?? ?? ?? ?? ? // requestWindowFeature(Window.FEATURE_NO_TITLE);
? ?? ?? ?? ?? ? ia = new GridImageAdapter(this);
? ?? ?? ?? ?? ? setContentView(R.layout.mygridview);
? ?? ?? ?? ?? ? g = (GridView) findViewById(R.id.myGrid);
? ?? ?? ?? ?? ? g.setAdapter(ia);
? ?? ?? ?? ?? ? g.setOnItemClickListener(new OnItemClick(this));
? ?? ?? ?? ?? ? // 得到屏幕的大小
? ?? ?? ?? ?? ? dm = new DisplayMetrics();
? ?? ?? ?? ?? ? getWindowManager().getDefaultDisplay().getMetrics(dm);
? ?? ???}
? ?? ???/**
? ?? ?? ?* 屏幕切換時進行處理 如果屏幕是豎屏，則顯示3列，如果是橫屏，則顯示4列
? ?? ?? ?*/
? ?? ???@Override
? ?? ???public void onConfigurationChanged(Configuration newConfig) {
? ?? ?? ?? ?? ? try {
? ?? ?? ?? ?? ?? ?? ?? ?super.onConfigurationChanged(newConfig);
? ?? ?? ?? ?? ?? ?? ?? ?// 如果屏幕是豎屏，則顯示3列，如果是橫屏，則顯示4列
? ?? ?? ?? ?? ?? ?? ?? ?if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageCol = 4;
? ?? ?? ?? ?? ?? ?? ?? ?} else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageCol = 3;
? ?? ?? ?? ?? ?? ?? ?? ?}
? ?? ?? ?? ?? ?? ?? ?? ?g.setNumColumns(imageCol);
? ?? ?? ?? ?? ?? ?? ?? ?g.setAdapter(new ImageAdapter(this));
? ?? ?? ?? ?? ?? ?? ?? ?// ia.notifyDataSetChanged();
? ?? ?? ?? ?? ? } catch (Exception ex) {
? ?? ?? ?? ?? ?? ?? ?? ?ex.printStackTrace();
? ?? ?? ?? ?? ? }
? ?? ???}
? ?? ???/**
? ?? ?? ?*
? ?? ?? ?* @author 空山不空 點擊具體的小圖片時，會鏈接到GridViewActivity頁面，進行加載和展示
? ?? ?? ?*/
? ?? ???public class OnItemClick implements OnItemClickListener {
? ?? ?? ?? ?? ? public OnItemClick(Context c) {
? ?? ?? ?? ?? ?? ?? ?? ?mContext = c;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? @Override
? ?? ?? ?? ?? ? public void onItemClick(AdapterView aview, View view, int position,
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???long arg3) {
? ?? ?? ?? ?? ?? ?? ?? ?Intent intent = new Intent();
? ?? ?? ?? ?? ?? ?? ?? ?intent.setClass(GridViewActivity.this, GalleryActivity.class);
? ?? ?? ?? ?? ?? ?? ?? ?intent.putExtra("position", position);
? ?? ?? ?? ?? ?? ?? ?? ?GridViewActivity.this.startActivity(intent);
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? private Context mContext;
? ?? ???}
? ?? ???/**
? ?? ?? ?*
? ?? ?? ?* @author 空山不空 設置GridView的圖片適配器
? ?? ?? ?*/
? ?? ???public class GridImageAdapter extends BaseAdapter {
? ?? ?? ?? ?? ? Drawable btnDrawable;
? ?? ?? ?? ?? ? public GridImageAdapter(Context c) {
? ?? ?? ?? ?? ?? ?? ?? ?mContext = c;
? ?? ?? ?? ?? ?? ?? ?? ?Resources resources = c.getResources();
? ?? ?? ?? ?? ?? ?? ?? ?btnDrawable = resources.getDrawable(R.drawable.bg);
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? public int getCount() {
? ?? ?? ?? ?? ?? ?? ?? ?return ImageSource.mThumbIds.length;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? public Object getItem(int position) {
? ?? ?? ?? ?? ?? ?? ?? ?return position;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? public long getItemId(int position) {
? ?? ?? ?? ?? ?? ?? ?? ?return position;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? public View getView(int position, View convertView, ViewGroup parent) {
? ?? ?? ?? ?? ?? ?? ?? ?ImageViewExt imageView;
? ?? ?? ?? ?? ?? ?? ?? ?if (convertView == null) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageView = new ImageViewExt(mContext);
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???// 如果是橫屏，GridView會展示4列圖片，需要設置圖片的大小
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???if (imageCol == 4) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? imageView.setLayoutParams(new GridView.LayoutParams(
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???dm.heightPixels / imageCol - 6, dm.heightPixels
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?/ imageCol - 6));
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???} else {// 如果是豎屏，GridView會展示3列圖片，需要設置圖片的大小
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? imageView.setLayoutParams(new GridView.LayoutParams(
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???dm.widthPixels / imageCol - 6, dm.widthPixels
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?/ imageCol - 6));
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???}
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageView.setAdjustViewBounds(true);
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
? ?? ?? ?? ?? ?? ?? ?? ?} else {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???imageView = (ImageViewExt) convertView;
? ?? ?? ?? ?? ?? ?? ?? ?}
? ?? ?? ?? ?? ?? ?? ?? ?imageView.setImageResource(ImageSource.mThumbIds[position]);
? ?? ?? ?? ?? ?? ?? ?? ?return imageView;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? private Context mContext;
? ?? ???}
} 復制代碼
加 載GridView頁面，如果屏幕是豎屏，則顯示3列，如果是橫屏，則顯示4列;并且顯示的圖片加上灰色邊框，這里在適配器 GridImageAdapter的getView方法里引用了ImageViewExt類來對圖片進行處理，這個類擴展自ImageView;點擊其中 的某一張圖片，會跳轉到GalleryActivity頁面。
2、ImageViewExt.java文件
/**
*
* @author 空山不空
* 擴展ImageView類，將圖片加上邊框，并且設置邊框為灰色
*/
public class ImageViewExt extends ImageView {
//將圖片加灰色的邊框
? ? private int color;
? ? public ImageViewExt(Context context) {
? ?? ???super(context);
? ?? ? // TODO Auto-generated constructor stub
? ?? ???color=Color.GRAY;
??}
? ?
? ?public ImageViewExt(Context context, AttributeSet attrs) {
? ?? ?? ?super(context, attrs);
? ?? ???// TODO Auto-generated constructor stub
? ?? ?? ?color=Color.GRAY;
? ?}
? ?
? ? @Override
? ???protected void onDraw(Canvas canvas) {
? ?? ?? ?// TODO Auto-generated method stub? ?
? ?? ?
? ?? ???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);
? ? }
} 復制代碼
通過重載onDraw方法來畫邊框和設置邊框顏色
3、相冊GalleryActivity.java
/**
*
* @author 空山不空
* Gallery圖片頁面，通過Intent得到GridView傳過來的圖片位置，加載圖片，再設置適配器
*/
public class GalleryActivity extends Activity {
? ?? ???public int i_position = 0;
? ?? ???private DisplayMetrics dm;
? ?? ???@Override
? ?? ???public void onCreate(Bundle savedInstanceState) {
? ?? ?? ?? ?? ? super.onCreate(savedInstanceState);
? ?? ?? ?? ?? ? requestWindowFeature(Window.FEATURE_NO_TITLE);
? ?? ?? ?? ?? ? setContentView(R.layout.mygallery);? ?? ?? ?
? ?? ?? ?? ?? ? dm = new DisplayMetrics();
? ?? ?? ?? ?? ? getWindowManager().getDefaultDisplay().getMetrics(dm);
? ?? ?? ?? ?? ? // 獲得Gallery對象? ?? ???
? ?? ?? ?? ?? ? GalleryExt??g = (GalleryExt) findViewById(R.id.ga);
? ?? ?? ?? ?? ? //通過Intent得到GridView傳過來的圖片位置
? ?? ?? ?? ?? ? Intent intent = getIntent();
? ?? ?? ?? ?? ? i_position = intent.getIntExtra("position", 0);? ?? ?? ?
? ?? ?? ?? ?? ? // 添加ImageAdapter給Gallery對象
? ?? ?? ?? ?? ? ImageAdapter ia=new ImageAdapter(this);? ?? ?? ?? ?? ?
? ?? ?? ?? ?? ? g.setAdapter(ia);
? ?? ?? ?? ?? ???g.setSelection(i_position);? ?? ?? ?
? ?? ?? ?? ?? ???
? ?? ?? ?? ?? ???//加載動畫
? ?? ?? ?? ?? ???Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );
? ?? ???g.setAnimation(an);
? ?? ???}
} 復制代碼
這里有三點：
（1）、擴展Gallery組件，即GalleryExt控件，設置滑動一次只加載一張圖片，并且， 如果是第一張圖片時，向左滑動會提示“已到第一頁”，如果是最后一張圖片時，向右滑動會提示“已到第后頁”
（2）、接收GridViewActivity頁面傳過來的參數position，通過這個參數找到具體的圖片，通過ImageAdapter適配器加載
（3）、ImageAdapter圖片適配器，用來加載圖片
4、GalleryExt.java文件
/**
*
* @author 空山不空
* 擴展Gallery組件，設置滑動一次只加載一張圖片，并且，
* 如果是第一張圖片時，向左滑動會提示“已到第一頁”
* 如果是最后一張圖片時，向右滑動會提示“已到第后頁”
*/
public class GalleryExt extends Gallery {
? ? boolean is_first=false;
? ? boolean is_last=false;
? ?? ???public GalleryExt(Context context) {
? ?? ?? ?? ?? ? super(context);
? ?? ?? ?? ?? ? // TODO Auto-generated constructor stub
? ?? ???}
? ?? ???
? ?? ???public GalleryExt(Context context,AttributeSet paramAttributeSet)
? ?? ?? ?{
? ?? ?? ?? ?? ?super(context,paramAttributeSet);
? ?? ?? ?}
? ?? ???private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)
? ?? ?? ???{? ?
? ?? ?? ?? ?return e2.getX() > e1.getX();
? ?? ?? ???}
? ?? ?? ?@Override
? ? public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX,
? ?? ?? ?? ?? ?? ???float distanceY) {
//通過重構onFling方法，使Gallery控件滑動一次只加載一張圖片
? ?? ?? ?? ?? ???//獲取適配器
? ?? ?? ?? ?? ???ImageAdapter ia=(ImageAdapter)this.getAdapter();
? ?? ?? ?? ?? ? //得到當前圖片在圖片資源中的位置
? ?? ?? ?? ?? ???int p=ia.getOwnposition();
? ?? ?? ?? ?? ???//圖片的總數量
? ?? ?? ?? ?? ???int count=ia.getCount();
? ?? ?? ?? ?? ???int kEvent;??
? ?? ?? ?? ?? ?? ?if(isScrollingLeft(e1, e2)){
? ?? ?? ?? ?? ?? ? //Check if scrolling left??
? ?? ?? ?? ?? ?? ?? ?? ???if(p==0&&is_first){
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? //在第一頁并且再往左移動的時候，提示
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? Toast.makeText(this.getContext(), "已到第一頁", Toast.LENGTH_SHORT).show();
? ?? ?? ?? ?? ?? ?? ?? ???}else if(p==0){
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? //到達第一頁時，把is_first設置為true
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? is_first=true;
? ?? ?? ?? ?? ?? ?? ?? ???}else{
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? is_last=false;
? ?? ?? ?? ?? ?? ?? ?? ???}
? ?? ?? ?? ?? ?? ?? ?? ???
? ?? ?? ?? ?? ?? ? kEvent = KeyEvent.KEYCODE_DPAD_LEFT;??
? ?? ?? ?? ?? ?? ? }??else{
? ?? ?? ?? ?? ?? ???//Otherwise scrolling right? ?
? ?? ?? ?? ?? ?? ?? ?? ?? ?if(p==count-1&&is_last){
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?Toast.makeText(this.getContext(), "已到最后一頁", Toast.LENGTH_SHORT).show();
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? }else if( p==count-1){
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?is_last=true;
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? }else{
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?is_first=false;
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?
? ?? ?? ?? ?? ?? ???kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;? ?
? ?? ?? ?? ?? ?? ???}??
? ?? ?? ?? ?? ?? ?onKeyDown(kEvent, null);??
? ?? ?? ?? ?? ?? ?return true;??
? ? } 復制代碼
5、ImageAdapter.java文件
/**
*
* @author 空山不空
*??圖片適配器，用來加載圖片
*/
public class ImageAdapter extends BaseAdapter {
//圖片適配器
? ?? ???// 定義Context
? ?? ???private int ownposition;
? ?? ?? ?
? ?? ???public int getOwnposition() {
? ?? ?? ?? ?? ? return ownposition;
? ?? ???}
? ?? ???public void setOwnposition(int ownposition) {
? ?? ?? ?? ?? ? this.ownposition = ownposition;
? ?? ???}
? ?? ???private Context mContext;
? ?? ???// 定義整型數組 即圖片源
? ?? ???// 聲明 ImageAdapter
? ?? ???public ImageAdapter(Context c) {
? ?? ?? ?? ?? ? mContext = c;
? ?? ???}
? ?? ???// 獲取圖片的個數
? ?? ???public int getCount() {
? ?? ?? ?? ?? ? return ImageSource.mThumbIds.length;
? ?? ???}
? ?? ???// 獲取圖片在庫中的位置
? ?? ???public Object getItem(int position) {
? ?? ?? ?? ?? ? ownposition=position;
? ?? ?? ?? ?? ? return position;
? ?? ???}
? ?? ???// 獲取圖片ID
? ?? ???public long getItemId(int position) {
? ?? ?? ?? ?? ? ownposition=position;
? ?? ?? ?? ?? ? return position;
? ?? ???}
? ?? ???public View getView(int position, View convertView, ViewGroup parent) {
? ?? ?? ?? ?? ???
? ?? ?? ?? ?? ? ownposition=position;
? ?? ?? ?? ?? ? ImageView imageview = new ImageView(mContext);
? ?? ?? ?? ?? ? imageview.setBackgroundColor(0xFF000000);
? ?? ?? ?? ?? ? imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
? ?? ?? ?? ?? ? imageview.setLayoutParams(new GalleryExt.LayoutParams(
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
? ?? ?? ?? ?? ? imageview.setImageResource(ImageSource.mThumbIds[position]);
? ?? ?? ?? ?? ? // imageview.setAdjustViewBounds(true);
? ?? ?? ?? ?? ? // imageview.setLayoutParams(new GridView.LayoutParams(320, 480));
? ?? ?? ?? ?? ? // imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
? ?? ?? ?? ?? ? return imageview;
? ?? ???}
} 復制代碼
6、配置文件
（1）AndroidManifest.xml ：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
? ?? ?package="com.ajie"
? ?? ?android:versionCode="1"
? ?? ?android:versionName="1.0">
? ? <application android:icon="@drawable/icon"??android:label="@string/app_name">
? ?? ?? ?<activity android:name=".GalleryActivity"??android:label="@string/title"??/>??
? ?? ???<activity android:name=".GridViewActivity"??android:label="@string/app_name"? ?android:configChanges="orientation|keyboardHidden" >? ?? ?
? ?? ?? ? <intent-filter>
? ?? ?? ?? ?? ? <action android:name="android.intent.action.MAIN" />
? ?? ?? ?? ?? ? <category android:name="android.intent.category.LAUNCHER" />
? ?? ?? ?? ?</intent-filter>??
? ? </activity>??
? ? </application>
</manifest> 復制代碼
（2）mygridview.xml,即GridView頁面
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
? ? android:id="@+id/myGrid"
? ?? ???android:layout_width="fill_parent"
? ?? ???android:layout_height="fill_parent"
? ? android:verticalSpacing="6dp"??
? ? android:numColumns="3"? ?
? ? android:paddingTop="5dp"
? ? android:stretchMode="columnWidth"??
? ? android:gravity="fill_vertical|fill_horizontal"
? ? /> 復制代碼
（3）mygallery.xml，加載圖片頁面
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
? ? android:id="@+id/myGrid"
? ?? ???android:layout_width="fill_parent"
? ?? ???android:layout_height="fill_parent"
? ? android:verticalSpacing="6dp"??
? ? android:numColumns="3"? ?
? ? android:paddingTop="5dp"
? ? android:stretchMode="columnWidth"??
? ? android:gravity="fill_vertical|fill_horizontal"
? ? /> ?
轉載于:https://www.cnblogs.com/Free-Thinker/p/3267901.html
總結
以上是生活随笔為你收集整理的Android的GridView和Gallery结合Demo的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
