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

写道

GridView是一个网络布局的视图，他能让你的元素显示在一个个的格子里。我们的桌面就是一个GridView。。

 

Android系列教程目录:

1. Android教程之一：Window下搭建Android开发环境

2. Android教程之二：Linux下搭建Android开发环境

3. Android教程之三：第一个Android应用，HelloWorld

4. Android系列教程之四：Android项目的目录结构

5. Android系列教程之五：Activity的生命周期

6. Android系列教程之六：TextView小组件的使用--附带超链接和跑马灯效果

7. Android系列教程之七：EditText使用详解-包含很多教程上看不到的功能演示

8. Android系列教程之八：ListView组件的使用

本文版权归飞雪无情 所有，转载请注明出处， 永久链接: http://flysnow.iteye.com/blog/890171

我新建了一个Android的技术交流群，群号为86686524    120059404 ，感兴趣的可以申请加入，大家一块学习。

 

1. 新建一个HelloGridView的工程
2. 修改main.xml代码如下：
   

   <?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>

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

   /**
    * 
    * @author 飞雪无情
    * @since 2011-1-20
    */
   public class HelloGridView extends Activity {
       /** Called when the activity is first created. */
   	@Override
   	protected 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() {
   
   			@Override
   			public 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;
   		}
   
   		@Override
   		public int getCount() {
   			return mThumbIds.length;
   		}
   
   		@Override
   		public Object getItem(int position) {
   			return mThumbIds[position];
   		}
   
   		@Override
   		public long getItemId(int position) {
   			// TODO Auto-generated method stub
   			return 0;
   		}
   
   		@Override
   		public 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
       };
   }

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