Android布局之GridView(九宫格)

GridView就是我们常说的手机桌面，相册等等的九宫格布局，本文详细讲解整个实现过程，有什么问题可以留言一起探讨。。。

在贴代码之前，这里给出最终实现的效果

首先，给出activity_main的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="auto_fit"
        android:columnWidth="90dp" 
        android:stretchMode="columnWidth">
    </GridView>

</LinearLayout>

在每一个方格中我们都包含一个TextView和一个imageView，这里设立一个item布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:gravity="center">

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"/>

    <TextView
        android:id="@+id/grid_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textSize="18sp" />

</LinearLayout>

Java实现代码：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //数组储存名称
        String[] data = {"tiger","panda","rabbit","elephant","penguin",
        		"wolf","chicken","cattle","dog","horse","sheep","bear"};
        
        //数组储存图片的id
        int[] icon = {R.drawable.animal01,R.drawable.animal02,R.drawable.animal03,
        		R.drawable.animal04,R.drawable.animal05,R.drawable.animal06,R.drawable.animal07,
        		R.drawable.animal08,R.drawable.animal09,R.drawable.animal10,R.drawable.animal11,
        		R.drawable.animal12};
        
        //创建数据存储源
        ArrayList<HashMap<String,Object>> grid = new ArrayList<HashMap<String,Object>>();
    	for(int i=0;i<=11;i++){
    		//生成数据并存入list
    		HashMap<String,Object> map = new HashMap<String,Object>(); 
    		map.put("grid_image",icon[i]);
    		map.put("grid_text",data[i]);
    	    grid.add(map);
    	}
    	
    	//绑定gridView布局
        GridView gridView = (GridView)findViewById(R.id.gridView);
        //创建一个SimpleAdapter适配器
    	SimpleAdapter adapter = new SimpleAdapter(MainActivity.this, 
    			//数据源
    			grid, 
    			//要显示内容的布局
    			R.layout.grid, 
    			//子布局中控件id名与map中键值对应获取数据
    			new String[]{"grid_image","grid_text"},
    			//将获取的数据在对应子布局id上显示
    			new int[]{R.id.grid_image,R.id.grid_text});
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new ItemClickListener());
    }

    public class ItemClickListener implements OnItemClickListener {

		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {
			// TODO Auto-generated method stub
			//通过选定的布局parent和位置position获取item
			HashMap<String, Object>item = (HashMap<String, Object>)parent.getItemAtPosition(position);
			//将所选项名称显示在title上
			setTitle((String)item.get("grid_text"));
			Toast.makeText(MainActivity.this, "您选中了"+(String)item.get("grid_text"), 
					Toast.LENGTH_SHORT).show();
			//ps：跳转事件在这里写入，针对不同的item创建intent即可
		}
    	
    }
}

GridView的布局实现与ListView极为相似，这里多写的只有点击事件实现部分，有疑问的可以参考我的另一篇有关ListView布局的博客，地址：http://blog.csdn.net/u014492609/article/details/50235001