在 Android 裡使用 GridView

在介紹過 AdapterView 裡的 ListView 與 Spinner 之後，現在來介紹 GridView。

從族譜上可以知道 GridView 與 ListView 是兄弟，一樣可以使用靜態或動態的資料，一樣是佔據整個頁面，不同的地方在於 ListView 是條列式，GridView 是格狀式。

XML layout 設定如下，特別的設定是一些有關每一格的長寬以及與畫面的比例關係，以及格距：

<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:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />

Activity 程式如下：

public class C_Adapter extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        GridView gridview = (GridView) this.findViewById(R.id.gridview);
        gridview.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Toast.makeText(C_Adapter.this, position + " - " + view,
                        Toast.LENGTH_SHORT).show();
            }
        });
        // gridview.setAdapter(this.createArrayAdapter());
        gridview.setAdapter(this.createImageAdapter());
    }

    private BaseAdapter createImageAdapter() {
        return new BaseAdapter() {

            private Integer[] icons = new Integer[] {
                    R.drawable.wanwan_01, R.drawable.wanwan_02,
                    R.drawable.wanwan_03, R.drawable.wanwan_04,
                    R.drawable.wanwan_05, R.drawable.wanwan_06,
                    R.drawable.wanwan_07, R.drawable.wanwan_08,
                    R.drawable.wanwan_09, R.drawable.wanwan_10,
                    R.drawable.wanwan_11, R.drawable.wanwan_12,
                    R.drawable.wanwan_13, R.drawable.wanwan_14,
                    R.drawable.wanwan_15, R.drawable.wanwan_16,
                    R.drawable.wanwan_17, R.drawable.wanwan_18
            };

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ImageView iv;
                if (convertView == null) {
                    iv = new ImageView(C_Adapter.this);
                    iv.setLayoutParams(new GridView.LayoutParams(85, 85));
                    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    iv.setPadding(8, 8, 8, 8);
                }
                else {
                    iv = (ImageView) convertView;
                }
                iv.setImageResource(this.icons[position]);
                return iv;
            }

            @Override
            public int getCount() {
                return this.icons.length;
            }

            @Override
            public Object getItem(int position) {
                return null;
            }

            @Override
            public long getItemId(int position) {
                return 0;
            }
        };
    }

    private ArrayAdapter<String> createArrayAdapter() {
        String[] array = new String[] {
                "禮拜一", "禮拜二", "禮拜三", "禮拜四", "禮拜五"
        };
        return new ArrayAdapter<String>(this, R.layout.arrray_item, array);
    }
}

一樣先用 ArrayAdapter 測試：

再測試另一個主題，自行實做一個 ImageAdapter，類似於 ArrayAdapter，不同於 ArrayAdapter 是以 TextView 方式呈現資料，而 ImageAdapater 是用 ImageView 呈現資料。

繼承 BaseAdapter 並實做相關 API，最重要的就是 getView(...) 的實做，它回傳的就是資料集合物件的呈現方式，這裡用的是包含一張影像的 ImageView。

最後在 res/drawable 放入要顯示的影像檔（支援 PNG, JPG, GIF）就可以了。