前言

在程序中經(jīng)常會(huì)遇到九宮格的樣式實(shí)現(xiàn)，如下圖：

下面我們看看實(shí)現(xiàn)的步驟。

1. 一個(gè)整體的容器部分。就是上圖中包括整個(gè)圖片項(xiàng)個(gè)各個(gè)部分，這里我們使用gridView（表格布局）來實(shí)現(xiàn)
   2.整個(gè)界面里需要注意的是 “重復(fù)的部分”，就是 各個(gè)圖片項(xiàng)和，圖片下方顯示的文字了。那么我們需要描述這個(gè)部分。在描述時(shí)，要說明圖片位于上方，文字位于下方。
   3.迭代，或者說重復(fù)的將各項(xiàng) 插入（放入）到容器內(nèi)。

具體怎么實(shí)現(xiàn)。

1.新建一個(gè)activity，描述放置我們的容器控件

<GridView android:id="@+id/gridView1"
 android:layout_width="fill_parent"
 android:numColumns="auto_fit"
  android:stretchMode="columnWidth" 
  android:columnWidth="90dp"
 android:gravity="center"
  android:layout_height="fill_parent">
</GridView>

在這里需要關(guān)注的屬性是columnWidth，這里指定了列的寬度，一個(gè)列對(duì)象，對(duì)應(yīng)一個(gè) “可重復(fù)的子項(xiàng)”，這個(gè)子項(xiàng)就是我們 的圖片項(xiàng)和圖片下方文字顯示的部分。如果不指定這個(gè)寬度的話，默認(rèn)是每行（展示的行，界面）僅僅只顯示一個(gè) “可重復(fù)的子項(xiàng)”，而當(dāng)指定了寬度時(shí)，本文指定為90dp,如果每行實(shí)際行尺寸大于90，他就會(huì)繼續(xù)將下一個(gè)的“可重復(fù)的子項(xiàng)”，放置在本行。于是就呈現(xiàn)一種 一行顯示多個(gè)子項(xiàng)的情況。numColumns屬性，指定一個(gè)自動(dòng)填充的值，指示了自動(dòng)填充行。

2。指定“可重復(fù)的子項(xiàng)”，就是需要迭代顯示的部分

新建一個(gè)布局文件layout_gridview_item.xml

<RelativeLayout android:id="@+id/relativeLayout1" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/imageView_ItemImage" 
    android:layout_width="wrap_content"
     android:src="@drawable/icon" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true"
     >
     </ImageView>
    <TextView android:id="@+id/textView_ItemText" 
    android:text="TextView" 
    android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:layout_below="@+id/imageView_ItemImage"
     android:layout_centerHorizontal="true"
      >
      </TextView>
</RelativeLayout>

這里使用了一個(gè)相對(duì)布局，在TextView 里使用屬性android:layout_below="@+id/imageView_ItemImage"
指示了文本在圖片的下方。

3.剩下的就是數(shù)據(jù)綁定了。上代碼：

   protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);

setContentView(R.layout.layout_main);


_gridView1 = (GridView)findViewById(R.id.gridView1);

ArrayList<HashMap<String,Object>> lst = new ArrayList<HashMap<String,Object>>();
for(int i = 0 ;i < 10; i++)
{
 HashMap<String,Object> map = new HashMap<String,Object>();
 map.put("itemImage", R.drawable.icon);
 map.put("itemText", "item"+i);

 lst.add(map);
  }
    
    SimpleAdapter adpter = new SimpleAdapter(this,
  lst,R.layout.layout_gridview_item,    
new String[]{"itemImage","itemText"},
new int[]{R.id.imageView_ItemImage,R.id.textView_ItemText});

  _gridView1.setAdapter(adpter);

  _gridView1.setOnItemClickListener(new gridView1OnClickListener());
 }

先構(gòu)建ArrayList作為數(shù)據(jù)源，在構(gòu)建SimpleAdapter 作為數(shù)據(jù)適配器，為gridView指定適配器對(duì)象。注意在構(gòu)建適配器對(duì)象的參數(shù)，如下：

SimpleAdapter adpter = new SimpleAdapter(this,
lst,R.layout.layout_gridview_item,    //指定 子項(xiàng)的布局文件的ID
new String[]{"itemImage","itemText"}, //指定 數(shù)據(jù)的列
new int[]{R.id.imageView_ItemImage,R.id.textView_ItemText}); //指定數(shù)據(jù)的列對(duì)應(yīng)到的 綁定的目標(biāo)控件

那么如何獲得選擇的項(xiàng)呢？

就是上面的gridView1OnClickListener的實(shí)現(xiàn)內(nèi)容如下：

class gridView1OnClickListener implements OnItemClickListener
{

    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
            long arg3) {
        // TODO Auto-generated method stub
        Object obj = _gridView1.getAdapter().getItem(arg2);
        HashMap<String,Object> map  = (HashMap<String,Object>)obj;
        String str = (String) map.get("itemText");
        
        Toast.makeText(getApplicationContext(), ""+str, 0).show();
    }
    
}

至此完成。
代碼下載