【转载】Android的GridView和Gallery结合Demo

Android的GridView和Gallery结合Demo

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

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

Demo效果如下：

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

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文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/**   *   * @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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

/**   *   * @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文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

/**   *   * @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文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

/**   *   * @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页面

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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，加载图片页面

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

Demo下载地址：<a href="http://files.cnblogs.com/fbsk/gridGalleryDemo.zip"> gridGalleryDemo.zip下载</a>