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

1. 新建一个HelloGridView的工程
2. 修改main.xml代码如下：
   
   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>  
    很简单，就是一个GridView。设置列宽为90dp,这样当我们的numColumns设置为auto_fit时，Android就会自动计算我们手机屏幕的大小以决定每一行展示几个元素。这是很方便。android:horizontalSpacing定义列之间的间隔，android:verticalSpacing定义行之间的间隔。android:stretchMode设置为columnWidth是意味着根据列宽自动缩放。
3. 修改我们Activity HelloGridView如下：
   Java代码  

   1. /** 
   2.  *  
   3.  * @author 飞雪无情 
   4.  * @since 2011-1-20 
   5.  */  
   6. public class HelloGridView extends 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 ImageAdapter extends 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. }  
    这里我们也是采用的自定义Adapter，可以上一节的自定义Adapter讲解。展示了一些图片，然后点击一个图片的时候会显示这个图片所在的位置。
4. 运行程序，效果图如下：