Android系列教程之九：GridView组件的使用

1. 新建一个HelloGridView的工程

1. 修改main.xml代码如下：
   
2. Xml代码

1. <?xml version="1.0"encoding="utf-8"?> 
2. <GridView 
3.   xmlns:android="http://schemas.android.com/apk/res/android" 
4.   android:id="@+id/gridview" 
5.   android:layout_width="fill_parent" 
6.   android:layout_height="fill_parent" 
7.   android:columnWidth="90dp" 
8.   android:numColumns="auto_fit" 
9.   android:horizontalSpacing="10dp" 
10.   android:verticalSpacing="10dp" 
11.   android:stretchMode="columnWidth" 
12.   android:gravity="center"> 
13. </GridView> 

1. <?xml version="1.0" encoding="utf-8"?><GridView  xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/gridview"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:columnWidth="90dp"  android:numColumns="auto_fit"  android:horizontalSpacing="10dp"  android:verticalSpacing="10dp"  android:stretchMode="columnWidth"  android:gravity="center"></GridView>

2. 很简单，就是一个GridView。设置列宽为90dp,这样当我们的numColumns设置为auto_fit时，Android就会自动计算我们手机屏幕的大小以决定每一行展示几个元素。这是很方便。android:horizontalSpacing定义列之间的间隔，android:verticalSpacing定义行之间的间隔。android:stretchMode设置为columnWidth是意味着根据列宽自动缩放。

1. 修改我们Activity HelloGridView如下：
2. Java代码

1. /**
2. *
3. * @author 飞雪无情
4. * @since 2011-1-20
5. */ 
6. public class HelloGridViewextends Activity { 
7.     /** Called when the activity is first created. */ 
8.     @Override 
9.     protected void onCreate(Bundle savedInstanceState) { 
10.         super.onCreate(savedInstanceState); 
11.         setContentView(R.layout.main); 
12.         GridView gridView=(GridView)findViewById(R.id.gridview); 
13.         gridView.setAdapter(new ImageAdapter(this)); 
14.         //单击GridView元素的响应 
15.         gridView.setOnItemClickListener(new OnItemClickListener() { 
16.  
17.             @Override 
18.             public void onItemClick(AdapterView<?> parent, View view, 
19.                     int position, long id) { 
20.                 //弹出单击的GridView元素的位置 
21.                 Toast.makeText(HelloGridView.this,mThumbIds[position], Toast.LENGTH_SHORT).show(); 
22.             } 
23.         }); 
24.     } 
25.     private class ImageAdapterextends BaseAdapter{ 
26.         private Context mContext; 
27.  
28.         public ImageAdapter(Context context) { 
29.             this.mContext=context; 
30.         } 
31.  
32.         @Override 
33.         public int getCount() { 
34.             return mThumbIds.length; 
35.         } 
36.  
37.         @Override 
38.         public Object getItem(int position) { 
39.             return mThumbIds[position]; 
40.         } 
41.  
42.         @Override 
43.         public long getItemId(int position) { 
44.             // TODO Auto-generated method stub 
45.             return 0; 
46.         } 
47.  
48.         @Override 
49.         public View getView(int position, View convertView, ViewGroup parent) { 
50.             //定义一个ImageView,显示在GridView里 
51.             ImageView imageView; 
52.             if(convertView==null){ 
53.                 imageView=new ImageView(mContext); 
54.                 imageView.setLayoutParams(new GridView.LayoutParams(85,85)); 
55.                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
56.                 imageView.setPadding(8,8, 8,8); 
57.             }else{ 
58.                 imageView = (ImageView) convertView; 
59.             } 
60.             imageView.setImageResource(mThumbIds[position]); 
61.             return imageView; 
62.         } 
63.          
64.  
65.          
66.     } 
67.     //展示图片 
68.     private Integer[] mThumbIds = { 
69.             R.drawable.sample_2, R.drawable.sample_3, 
70.             R.drawable.sample_4, R.drawable.sample_5, 
71.             R.drawable.sample_6, R.drawable.sample_7, 
72.             R.drawable.sample_0, R.drawable.sample_1, 
73.             R.drawable.sample_2, R.drawable.sample_3, 
74.             R.drawable.sample_4, R.drawable.sample_5, 
75.             R.drawable.sample_6, R.drawable.sample_7, 
76.             R.drawable.sample_0, R.drawable.sample_1, 
77.             R.drawable.sample_2, R.drawable.sample_3, 
78.             R.drawable.sample_4, R.drawable.sample_5, 
79.             R.drawable.sample_6, R.drawable.sample_7 
80.     }; 
81. } 

1. /** *  * @author 飞雪无情 * @since 2011-1-20 */public class HelloGridView extends Activity {    /** Called when the activity is first created. */@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);GridView gridView=(GridView)findViewById(R.id.gridview);gridView.setAdapter(new ImageAdapter(this));//单击GridView元素的响应gridView.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {//弹出单击的GridView元素的位置Toast.makeText(HelloGridView.this,mThumbIds[position], Toast.LENGTH_SHORT).show();}});}private class ImageAdapter extends BaseAdapter{private Context mContext;public ImageAdapter(Context context) {this.mContext=context;}@Overridepublic int getCount() {return mThumbIds.length;}@Overridepublic Object getItem(int position) {return mThumbIds[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {//定义一个ImageView,显示在GridView里ImageView imageView;if(convertView==null){imageView=new ImageView(mContext);imageView.setLayoutParams(new GridView.LayoutParams(85, 85));imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            imageView.setPadding(8, 8, 8, 8);}else{imageView = (ImageView) convertView;}imageView.setImageResource(mThumbIds[position]);return imageView;}}//展示图片private Integer[] mThumbIds = {            R.drawable.sample_2, R.drawable.sample_3,            R.drawable.sample_4, R.drawable.sample_5,            R.drawable.sample_6, R.drawable.sample_7,            R.drawable.sample_0, R.drawable.sample_1,            R.drawable.sample_2, R.drawable.sample_3,            R.drawable.sample_4, R.drawable.sample_5,            R.drawable.sample_6, R.drawable.sample_7,            R.drawable.sample_0, R.drawable.sample_1,            R.drawable.sample_2, R.drawable.sample_3,            R.drawable.sample_4, R.drawable.sample_5,            R.drawable.sample_6, R.drawable.sample_7    };}

2. 这里我们也是采用的自定义Adapter，可以上一节的自定义Adapter讲解。展示了一些图片，然后点击一个图片的时候会显示这个图片所在的位置。
3. 运行程序，效果图如下：