Android GridView 九宮格實作完整教學

前言

GridView 是 Android 實現網格佈局（如相簿、九宮格選單）的核心元件。本文以「九宮格圖文混排」為例，示範如何用 SimpleAdapter 快速綁定資料，並處理項目點擊事件，程式碼結構清晰，適合初學者快速上手。

一、版面配置

1.1 主版面 main.xml

<GridView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center" />

關鍵屬性解析：

• numColumns="auto_fit"：自動依螢幕寬度計算列數。
• columnWidth="90dp"：每格最小寬度，配合 stretchMode 自動拉伸填滿。
• verticalSpacing/horizontalSpacing：列距與行距。
• stretchMode="columnWidth"：以欄寬為基準拉伸，避免邊界留白。

1.2 項目版面 night_item.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="4dp">

    <ImageView
        android:id="@+id/ItemImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/ItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ItemImage"
        android:layout_centerHorizontal="true"
        android:text="TextView" />
</RelativeLayout>

採用 RelativeLayout 讓圖片置中、文字置於圖片下方，結構簡潔。

二、Java 邏輯實作

public class GridViewDemoActivity extends Activity {
    private GridView gridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        gridView = findViewById(R.id.gridview);

        // 1. 準備資料：List<Map<String, Object>>
        List<Map<String, Object>> items = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("ItemImage", R.drawable.icon);      // 圖片資源 ID
            map.put("ItemText", "NO." + i);             // 文字
            items.add(map);
        }

        // 2. 建立 SimpleAdapter
        SimpleAdapter adapter = new SimpleAdapter(
            this,                     // Context
            items,                    // 資料來源
            R.layout.night_item,      // 項目版面
            new String[]{"ItemImage", "ItemText"}, // Map key 陣列
            new int[]{R.id.ItemImage, R.id.ItemText} // 對應 View ID 陣列
        );

        // 3. 綁定 Adapter
        gridView.setAdapter(adapter);

        // 4. 註冊點擊監聽
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Map<String, Object> item = (Map<String, Object>) parent.getItemAtPosition(position);
                String text = (String) item.get("ItemText");
                setTitle(text); // 將標題列更新為被點項目文字
            }
        });
    }
}

三、關鍵點總結

1. 資料結構：List<Map<String, Object>> 靈活對應多欄位，key 需與 from 陣列一致。
2. SimpleAdapter：適用於簡單「資料→View」映射，複雜邏輯建議自訂 BaseAdapter。
3. auto_fit 回應式列數：配合 columnWidth 可在手機/平板自動適配。
4. 點擊事件：position 即項目索引，id 通常相同；透過 getItemAtPosition() 取回原始資料 Map。

四、進階提示

• 圖片載入建議改用 Glide/Picasso 非同步載入，避免 UI 卡頓。
• 大量資料時請改用 RecyclerView + GridLayoutManager，支援視圖回收與動畫。
• 若需長按、拖曳排序等互動，可參考 ItemTouchHelper 實作。