簡介

GridView為一個可以格子狀來顯示內容的元件，其內容可以是按鈕（Button/ImageButton）、圖形（ImageView）、文字（TextView）等等；當其包含的元件數量超過可顯示範圍時，將以捲動的方式來顯示。

顯示可捲動的格子狀版面。

透過橋接器來（Adapter）建立版面（Layouts）

步驟一：在res/layout內的版面（layout）檔案加入GridView元素及設定其屬性

<GridView
    android:id="@+id/gridContact"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="4"
    android:columnWidth="100dp"
    android:verticalSpacing="10px"
    android:horizontalSpacing="10px"
    android:stretchMode="columnWidth">
</GridView>
屬性說明：
android:numColumns 每一列的格子數量。
android:columnWidth 每一個格子的寬度。
android:verticalSpacing 每個格子之間的垂直空白間距。
android:horizontalSpacing 每個格子之間的水平空白間距。
android:stretchMode 格子內容的延展方式：
  • none：不要伸縮
  • spacingWidth：拉伸每列的間距
  • columnWidth：拉伸每格
  • spacingWidthUniform：均勻拉伸間距

步驟二：在程式碼中關聯GridView元件

GridView myGrid = (GridView)findViewById(R.id.mygrid);

步驟三：建立一個新類別並繼承自BaseAdapter

該類別用來決定GridView每個格子的內容，我們必須自行建立每個格字內要使用的元件跟屬性。並實現該類別內需要的四個callback方法： getCount()、getItem()、getItemId()和getView()。

public class MyGridAdapter extends BaseAdapter 
{
    Context context = null;
    ArrayList<Integer> dataArray = null;

    public MyGridAdapter(Context context, ArrayList dataArray)
    {
        this.context = context;
        this.dataArray = dataArray;
    }

    @Override
    public int getCount() 
    {
        return dataArray.size(); // 回傳要顯示的資料數量
    }

    @Override
    public Object getItem(int position) 
    {
        return dataArray.get(position);  // 根據position來給予對應位置的資料
    }

    @Override
    public long getItemId(int position) 
    {
        return 0; // 不重要，回傳0就好
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        // 建立要顯示在GridView的元件
        ImageView v = new ImageView(context);
        v.setLayoutParams(new ImageView.LayoutParams(100, 100));
        v.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        v.setTag(position);        
        v.setImageResource(dataArray.get(position));

        return v;
    }
}

步驟四：建立MyGridAdapter物件並設定給GridView

ArrayList<Integer> dataArray = new ArrayList<Integer>();
... 這裏省略填入資料到dataArray裡頭 ...

MyGridAdapter adap = new MyGridAdapter(this, dataArray);
myGrid.setAdapter(adap);

步驟五：處理GridView的點擊事件

建立GridView.OnItemClickListener物件並透過呼叫Grid.setOnItemClickListener()方法來設定。

myGrid.setOnItemClickListener(new GridView.OnItemClickListener()
{
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) 
    {
        // 這裏可以取得被點擊的元件資訊，並處理相關動作
        // view為被點擊的元件，而position為元件的索引值, id為元件id(MyGridAdapter的getItemId()方法回傳的ID)
    }
});

完成。