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;
   
6. 
   
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);
    
20. 
    
21.         }
    
22. 
    
23.         /**
    
24.          * 屏幕切换时进行处理 如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列
    
25.          */
    
26.         @Override
    
27.         public void onConfigurationChanged(Configuration newConfig) {
    
28.                 try {
    
29. 
    
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.         }
    
44. 
    
45.         /**
    
46.          *
    
47.          * @author 空山不空 点击具体的小图片时，会链接到GridViewActivity页面，进行加载和展示
    
48.          */
    
49.         public class OnItemClick implements OnItemClickListener {
    
50.                 public OnItemClick(Context c) {
    
51.                         mContext = c;
    
52.                 }
    
53. 
    
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.                 }
    
62. 
    
63.                 private Context mContext;
    
64.         }
    
65. 
    
66.         /**
    
67.          *
    
68.          * @author 空山不空 设置GridView的图片适配器
    
69.          */
    
70.         public class GridImageAdapter extends BaseAdapter {
    
71. 
    
72.                 Drawable btnDrawable;
    
73. 
    
74.                 public GridImageAdapter(Context c) {
    
75.                         mContext = c;
    
76.                         Resources resources = c.getResources();
    
77.                         btnDrawable = resources.getDrawable(R.drawable.bg);
    
78.                 }
    
79. 
    
80.                 public int getCount() {
    
81.                         return ImageSource.mThumbIds.length;
    
82.                 }
    
83. 
    
84.                 public Object getItem(int position) {
    
85.                         return position;
    
86.                 }
    
87. 
    
88.                 public long getItemId(int position) {
    
89.                         return position;
    
90.                 }
    
91. 
    
92.                 public View getView(int position, View convertView, ViewGroup parent) {
    
93.                         ImageViewExt imageView;
    
94. 
    
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]);
     
113. 
     
114.                         return imageView;
     
115.                 }
     
116. 
     
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;
   
9. 
   
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.    }
    
21. 
    
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;
   
9. 
   
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);
    
30. 
    
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);
    
19. 
    
20.          }
    
21. 
    
22.         private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)
    
23.            {   
    
24.             return e2.getX() > e1.getX();
    
25.            }
    
26. 
    
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.          
    
11. 
    
12.         public int getOwnposition() {
    
13.                 return ownposition;
    
14.         }
    
15. 
    
16.         public void setOwnposition(int ownposition) {
    
17.                 this.ownposition = ownposition;
    
18.         }
    
19. 
    
20.         private Context mContext;
    
21. 
    
22.         // 定义整型数组 即图片源
    
23. 
    
24.         // 声明 ImageAdapter
    
25.         public ImageAdapter(Context c) {
    
26.                 mContext = c;
    
27.         }
    
28. 
    
29.         // 获取图片的个数
    
30.         public int getCount() {
    
31.                 return ImageSource.mThumbIds.length;
    
32.         }
    
33. 
    
34.         // 获取图片在库中的位置
    
35.         public Object getItem(int position) {
    
36.                 ownposition=position;
    
37.                 return position;
    
38.         }
    
39. 
    
40.         // 获取图片ID
    
41.         public long getItemId(int position) {
    
42.                 ownposition=position;
    
43.                 return position;
    
44.         }
    
45. 
    
46.         public View getView(int position, View convertView, ViewGroup parent) {
    
47. 
    
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));
    
55. 
    
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"?>
   
2. 
   
3. 
   
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.     />