[Android]Android GridView 實作演練

有接觸Android的人或許知道在Android中有ImageView以及TextView可以使用，但是要如何將ImageView與TextView結合建立如下圖的九宮格選單呢？請不要傻傻的絞盡腦汁的想著要如何把兩者合併，在此使用GridView便可以很容易的達到以下的效果。




首先先建立grid_view.xml，在其中置入一個GridView，而這個GridView中會包含頁面上所需的item，item也需要定義其layout。

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
         android:layout_height="fill_parent"
        android:id="@+id/gridView"
        android:numColumns="auto_fit"<!--GridView的列數設為自動-->
        android:verticalSpacing="20dp"<!--兩行之間的距離-->
         android:horizontalSpacing="10dp"<!--兩列之間的距離-->
        android:columnWidth="90dp"<!--每個item的寬度-->
        android:stretchMode="columnWidth"<!--每列的高度與寬度會依照等比例放大縮小-->
        android:gravity="center"<!--將此gridView置中-->
        >
        </GridView>

再來建立一個grid_view_item.xml，要定義每個item所包含的imageView以及textView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:paddingBottom="4dip"
android:layout_width="fill_parent">
<ImageView
android:layout_height="wrap_content"
android:id="@+id/ItemImage"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"></ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_below="@+id/ItemImage"
android:layout_height="wrap_content"
android:text="textView"
android:layout_centerHorizontal="true"
android:id="@+id/ItemText"
android:textColor="@color/BLACK"<!--設定文字的顏色-->
android:textSize="13dip"<!--設定文字的大小-->
android:textStyle="bold"><!--設定文字的粗細-->
</TextView>
</RelativeLayout>

以上建立完畢後別忘了在設定檔中建立所需的activity。

程式語法需要注意的是SimpleAdapter的部份，簡化的程式碼如下：

public class GridViewSample extends Activity {
private String texts[] = null;//宣告要擺入gridView的字串陣例
private Integer images[] = null;//宣告要擺入gridView圖片陣列
private GridView gridView;//宣告一個gridView

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_view);
findViews();//將頁面上所需的全部items封裝在此方法中

        //將文字與陣例放入SimpleAdapter，利用此物件來將item置入grid_view_item.xml中
SimpleAdapter simpleAdapter = new SimpleAdapter(this, fillMap(),
R.layout.grid_view_items, new String[] { "ItemImage","ItemText" },
new int[] { R.id.ItemImage, R.id.ItemText });
gridView.setAdapter(simpleAdapter);
gridView.setOnItemClickListener(new ItemClickListener());
}

public void findViews() {//將頁面上所需的圖片與文字依照順序放入陣列中
images = new Integer[] {
R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.d, R.drawable.e, R.drawable.f,
R.drawable.g, R.drawable.h, R.drawable.i
};
texts = new String[] {
"Events",           "Exhibitor Search",  "Transportation",
"Floor Plan",     "Food & Travel",     "My Favorite",
"My Calendar", "News",                  "About"
};
gridView = (GridView) findViewById(R.id.gridView);
}

public List<Map<String, Object>> fillMap() {
         //將圖片與文字跑for-loop丟進List<Map<String, Object>>中
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (int i = 0, j = texts.length; i < j; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", images[i]);
map.put("ItemText", texts[i]);
list.add(map);
}
return list;
}
        //建立畫面上每個item被點擊時的反應
public class ItemClickListener implements OnItemClickListener {
public void onItemClick(AdapterView<?> arg0,// The AdapterView where the click happened
View arg1,// The view within the AdapterView that was clicked
int arg2,// The position of the view in the adapter
long arg3// The row id of the item that was clicked
) {
HashMap<String, Object> item = (HashMap<String, Object>) arg0.getItemAtPosition(arg2);
String itemText = (String) item.get("ItemText");
Object object = item.get("ItemImage");

switch (images[arg2]) {
case R.drawable.a:
//中間程式省略.....
break;
case R.drawable.b:
//中間程式省略.....
break;
case R.drawable.c:
//中間程式省略.....
break;
.....................
...............
..........
//以下程式以此類推
}
}
  }
}

了解以上步驟之後，以後建立九宮格圖已非難事。