Android的GridView和Gallery结合Demo

Demo介绍：首页是一个GridView加载图片，竖屏时显示3列图片，横屏时显示4列图片;并且对图片进行大小限制和加灰色边框处理。

点击某一张图片，会链接到Gallery页面，由于Android自带的Gallery控件滑动效果很不好（滑动一次会加载好多张图片），这里对Gallery进行了扩展，滑动一次只加载一张图片。

Demo效果如下：

 

1、首页Activity页面，GridViewActivity.java介绍：

 

  1. public class GridViewActivity extends Activity {
  2.         private DisplayMetrics dm;
  3.         private GridImageAdapter ia;
  4.         private GridView g;
  5.         private int imageCol = 3;

  7.         @Override
  8.         protected void onCreate(Bundle savedInstanceState) {
  9.                 // TODO Auto-generated method stub
  10.                 super.onCreate(savedInstanceState);
  11.                 // requestWindowFeature(Window.FEATURE_NO_TITLE);
  12.                 ia = new GridImageAdapter(this);
  13.                 setContentView(R.layout.mygridview);
  14.                 g = (GridView) findViewById(R.id.myGrid);
  15.                 g.setAdapter(ia);
  16.                 g.setOnItemClickListener(new OnItemClick(this));
  17.                 // 得到屏幕的大小
  18.                 dm = new DisplayMetrics();
  19.                 getWindowManager().getDefaultDisplay().getMetrics(dm);

  21.         }

  23.         /**
  24.          * 屏幕切换时进行处理 如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列
  25.          */
  26.         @Override
  27.         public void onConfigurationChanged(Configuration newConfig) {
  28.                 try {

  30.                         super.onConfigurationChanged(newConfig);
  31.                         // 如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列
  32.                         if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
  33.                                 imageCol = 4;
  34.                         } else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
  35.                                 imageCol = 3;
  36.                         }
  37.                         g.setNumColumns(imageCol);
  38.                         g.setAdapter(new ImageAdapter(this));
  39.                         // ia.notifyDataSetChanged();
  40.                 } catch (Exception ex) {
  41.                         ex.printStackTrace();
  42.                 }
  43.         }

  45.         /**
  46.          *
  47.          * @author 空山不空 点击具体的小图片时，会链接到GridViewActivity页面，进行加载和展示
  48.          */
  49.         public class OnItemClick implements OnItemClickListener {
  50.                 public OnItemClick(Context c) {
  51.                         mContext = c;
  52.                 }

  54.                 @Override
  55.                 public void onItemClick(AdapterView aview, View view, int position,
  56.                                 long arg3) {
  57.                         Intent intent = new Intent();
  58.                         intent.setClass(GridViewActivity.this, GalleryActivity.class);
  59.                         intent.putExtra("position", position);
  60.                         GridViewActivity.this.startActivity(intent);
  61.                 }

  63.                 private Context mContext;
  64.         }

  66.         /**
  67.          *
  68.          * @author 空山不空 设置GridView的图片适配器
  69.          */
  70.         public class GridImageAdapter extends BaseAdapter {

  72.                 Drawable btnDrawable;

  74.                 public GridImageAdapter(Context c) {
  75.                         mContext = c;
  76.                         Resources resources = c.getResources();
  77.                         btnDrawable = resources.getDrawable(R.drawable.bg);
  78.                 }

  80.                 public int getCount() {
  81.                         return ImageSource.mThumbIds.length;
  82.                 }

  84.                 public Object getItem(int position) {
  85.                         return position;
  86.                 }

  88.                 public long getItemId(int position) {
  89.                         return position;
  90.                 }

  92.                 public View getView(int position, View convertView, ViewGroup parent) {
  93.                         ImageViewExt imageView;

  95.                         if (convertView == null) {
  96.                                 imageView = new ImageViewExt(mContext);
  97.                                 // 如果是横屏，GridView会展示4列图片，需要设置图片的大小
  98.                                 if (imageCol == 4) {
  99.                                         imageView.setLayoutParams(new GridView.LayoutParams(
  100.                                                         dm.heightPixels / imageCol - 6, dm.heightPixels
  101.                                                                         / imageCol - 6));
  102.                                 } else {// 如果是竖屏，GridView会展示3列图片，需要设置图片的大小
  103.                                         imageView.setLayoutParams(new GridView.LayoutParams(
  104.                                                         dm.widthPixels / imageCol - 6, dm.widthPixels
  105.                                                                         / imageCol - 6));
  106.                                 }
  107.                                 imageView.setAdjustViewBounds(true);
  108.                                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  109.                         } else {
  110.                                 imageView = (ImageViewExt) convertView;
  111.                         }
  112.                         imageView.setImageResource(ImageSource.mThumbIds[position]);

  114.                         return imageView;
  115.                 }

  117.                 private Context mContext;
  118.         }
  119. }
复制代码


加 载GridView页面，如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列;并且显示的图片加上灰色边框，这里在适配器 GridImageAdapter的getView方法里引用了ImageViewExt类来对图片进行处理，这个类扩展自ImageView;点击其中 的某一张图片，会跳转到GalleryActivity页面。

2、ImageViewExt.java文件


  1. /**
  2. *
  3. * @author 空山不空
  4. * 扩展ImageView类，将图片加上边框，并且设置边框为灰色
  5. */
  6. public class ImageViewExt extends ImageView {
  7. //将图片加灰色的边框
  8.     private int color;

  10.     public ImageViewExt(Context context) {
  11.         super(context);
  12.        // TODO Auto-generated constructor stub
  13.         color=Color.GRAY;
  14.   }
  15.    
  16.    public ImageViewExt(Context context, AttributeSet attrs) {
  17.          super(context, attrs);
  18.         // TODO Auto-generated constructor stub
  19.          color=Color.GRAY;
  20.    }

  22.    
  23.     @Override
  24.      protected void onDraw(Canvas canvas) {
  25.          // TODO Auto-generated method stub   
  26.       
  27.         super.onDraw(canvas);   
  28.         //画边框
  29.          Rect rec=canvas.getClipBounds();
  30.         rec.bottom--;
  31.         rec.right--;
  32.         Paint paint=new Paint();
  33.         paint.setColor(color);
  34.         paint.setStrokeWidth(5);
  35.         paint.setStyle(Paint.Style.STROKE);
  36.         canvas.drawRect(rec, paint);
  37.     }
  38. }
复制代码


通过重载onDraw方法来画边框和设置边框颜色

3、相册GalleryActivity.java


  1. /**
  2. *
  3. * @author 空山不空
  4. * Gallery图片页面，通过Intent得到GridView传过来的图片位置，加载图片，再设置适配器
  5. */
  6. public class GalleryActivity extends Activity {
  7.         public int i_position = 0;
  8.         private DisplayMetrics dm;

  10.         @Override
  11.         public void onCreate(Bundle savedInstanceState) {
  12.                 super.onCreate(savedInstanceState);
  13.                 requestWindowFeature(Window.FEATURE_NO_TITLE);
  14.                 setContentView(R.layout.mygallery);         
  15.                 dm = new DisplayMetrics();
  16.                 getWindowManager().getDefaultDisplay().getMetrics(dm);
  17.                 // 获得Gallery对象        
  18.                 GalleryExt  g = (GalleryExt) findViewById(R.id.ga);
  19.                 //通过Intent得到GridView传过来的图片位置
  20.                 Intent intent = getIntent();
  21.                 i_position = intent.getIntExtra("position", 0);         
  22.                 // 添加ImageAdapter给Gallery对象
  23.                 ImageAdapter ia=new ImageAdapter(this);               
  24.                 g.setAdapter(ia);
  25.                  g.setSelection(i_position);         
  26.                  
  27.                  //加载动画
  28.                  Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );
  29.         g.setAnimation(an);

  31.         }
  32. }
复制代码


这里有三点：

（1）、扩展Gallery组件，即GalleryExt控件，设置滑动一次只加载一张图片，并且， 如果是第一张图片时，向左滑动会提示“已到第一页”，如果是最后一张图片时，向右滑动会提示“已到第后页”

（2）、接收GridViewActivity页面传过来的参数position，通过这个参数找到具体的图片，通过ImageAdapter适配器加载

（3）、ImageAdapter图片适配器，用来加载图片

4、GalleryExt.java文件


  1. /**
  2. *
  3. * @author 空山不空
  4. * 扩展Gallery组件，设置滑动一次只加载一张图片，并且，
  5. * 如果是第一张图片时，向左滑动会提示“已到第一页”
  6. * 如果是最后一张图片时，向右滑动会提示“已到第后页”
  7. */
  8. public class GalleryExt extends Gallery {
  9.     boolean is_first=false;
  10.     boolean is_last=false;
  11.         public GalleryExt(Context context) {
  12.                 super(context);
  13.                 // TODO Auto-generated constructor stub
  14.         }
  15.         
  16.         public GalleryExt(Context context,AttributeSet paramAttributeSet)
  17.          {
  18.                super(context,paramAttributeSet);

  20.          }

  22.         private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)
  23.            {   
  24.             return e2.getX() > e1.getX();
  25.            }

  27.          @Override
  28.     public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX,
  29.                     float distanceY) {
  30. //通过重构onFling方法，使Gallery控件滑动一次只加载一张图片
  31.                  //获取适配器
  32.                  ImageAdapter ia=(ImageAdapter)this.getAdapter();
  33.                 //得到当前图片在图片资源中的位置
  34.                  int p=ia.getOwnposition();
  35.                  //图片的总数量
  36.                  int count=ia.getCount();
  37.                  int kEvent;  
  38.                   if(isScrollingLeft(e1, e2)){
  39.                    //Check if scrolling left  
  40.                           if(p==0&&is_first){
  41.                                   //在第一页并且再往左移动的时候，提示
  42.                                   Toast.makeText(this.getContext(), "已到第一页", Toast.LENGTH_SHORT).show();
  43.                           }else if(p==0){
  44.                                   //到达第一页时，把is_first设置为true
  45.                                   is_first=true;
  46.                           }else{
  47.                                   is_last=false;
  48.                           }
  49.                           
  50.                    kEvent = KeyEvent.KEYCODE_DPAD_LEFT;  
  51.                    }  else{
  52.                     //Otherwise scrolling right   
  53.                            if(p==count-1&&is_last){
  54.                                           Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
  55.                                   }else if( p==count-1){
  56.                                           is_last=true;
  57.                                   }else{
  58.                                           is_first=false;
  59.                                   }
  60.                                  
  61.                     kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;   
  62.                     }  
  63.                   onKeyDown(kEvent, null);  
  64.                   return true;  
  65.     }
复制代码


5、ImageAdapter.java文件

  1. /**
  2. *
  3. * @author 空山不空
  4. *  图片适配器，用来加载图片
  5. */
  6. public class ImageAdapter extends BaseAdapter {
  7. //图片适配器
  8.         // 定义Context
  9.         private int ownposition;
  10.          

  12.         public int getOwnposition() {
  13.                 return ownposition;
  14.         }

  16.         public void setOwnposition(int ownposition) {
  17.                 this.ownposition = ownposition;
  18.         }

  20.         private Context mContext;

  22.         // 定义整型数组 即图片源

  24.         // 声明 ImageAdapter
  25.         public ImageAdapter(Context c) {
  26.                 mContext = c;
  27.         }

  29.         // 获取图片的个数
  30.         public int getCount() {
  31.                 return ImageSource.mThumbIds.length;
  32.         }

  34.         // 获取图片在库中的位置
  35.         public Object getItem(int position) {
  36.                 ownposition=position;
  37.                 return position;
  38.         }

  40.         // 获取图片ID
  41.         public long getItemId(int position) {
  42.                 ownposition=position;
  43.                 return position;
  44.         }

  46.         public View getView(int position, View convertView, ViewGroup parent) {

  48.                  
  49.                 ownposition=position;
  50.                 ImageView imageview = new ImageView(mContext);
  51.                 imageview.setBackgroundColor(0xFF000000);
  52.                 imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
  53.                 imageview.setLayoutParams(new GalleryExt.LayoutParams(
  54.                                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

  56.                 imageview.setImageResource(ImageSource.mThumbIds[position]);
  57.                 // imageview.setAdjustViewBounds(true);
  58.                 // imageview.setLayoutParams(new GridView.LayoutParams(320, 480));
  59.                 // imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
  60.                 return imageview;
  61.         }
  62. }
复制代码

6、配置文件

（1）AndroidManifest.xml ：


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.       package="com.ajie"
  4.       android:versionCode="1"
  5.       android:versionName="1.0">
  6.     <application android:icon="@drawable/icon"  android:label="@string/app_name">
  7.          <activity android:name=".GalleryActivity"  android:label="@string/title"  />  
  8.         <activity android:name=".GridViewActivity"  android:label="@string/app_name"   android:configChanges="orientation|keyboardHidden" >      
  9.           <intent-filter>
  10.                 <action android:name="android.intent.action.MAIN" />
  11.                 <category android:name="android.intent.category.LAUNCHER" />
  12.             </intent-filter>  
  13.     </activity>  
  14.     </application>
  15. </manifest>
复制代码


（2）mygridview.xml,即GridView页面

  1. <?xml version="1.0" encoding="utf-8"?>


  4. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
  5.     android:id="@+id/myGrid"
  6.         android:layout_width="fill_parent"
  7.         android:layout_height="fill_parent"
  8.     android:verticalSpacing="6dp"  
  9.     android:numColumns="3"   
  10.     android:paddingTop="5dp"
  11.     android:stretchMode="columnWidth"  
  12.     android:gravity="fill_vertical|fill_horizontal"
  13.     />
复制代码

（3）mygallery.xml，加载图片页面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/myGrid"
  4.         android:layout_width="fill_parent"
  5.         android:layout_height="fill_parent"
  6.     android:verticalSpacing="6dp"  
  7.     android:numColumns="3"   
  8.     android:paddingTop="5dp"
  9.     android:stretchMode="columnWidth"  
  10.     android:gravity="fill_vertical|fill_horizontal"
  11.     />
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Free-Thinker/p/3267901.html