如何使用GridView(kotlin)

情境

當我們使用程式集的時候，會看到一堆程式排列成九宮格的樣子，其實它叫做 GridView, 要怎麼使用這個 View 呢？

完整程式碼

• GitHub

程式碼說明

class MainActivity : AppCompatActivity() {  
 private val image = intArrayOf(R.drawable.cat, R.drawable.flower, R.drawable.hippo, R.drawable.monkey, R.drawable.mushroom, R.drawable.panda, R.drawable.rabbit, R.drawable.raccoon)  
 private val imgText = arrayOf("cat", "flower", "hippo", "monkey", "mushroom", "panda", "rabbit", "raccoon")  
 override fun onCreate(savedInstanceState: Bundle?) {  
  super.onCreate(savedInstanceState)  
  setContentView(R.layout.activity_main)  
  val items = ArrayList<Map<String, Any>>()  
  for (i in image.indices) {  
   val item = HashMap<String, Any>()  
   item["image"] = image[i]  
   item["text"] = imgText[i]  
   items.add(item)  
  }  
  val adapter = SimpleAdapter(this, items, R.layout.grid_item, arrayOf("image", "text"), intArrayOf(R.id.image, R.id.text))  
  main_page_gridview.numColumns = 3  
  main_page_gridview.adapter = adapter  
  main_page_gridview.onItemClickListener = AdapterView.OnItemClickListener {  
   _, _, position, _ ->  
   Toast.makeText(this@MainActivity, "你選擇了" + imgText[position], Toast.LENGTH_SHORT).show()  
  }  
 }  
}

步驟

先下載圖檔，這個圖檔是用來擺放下圖的各種動物icon，下載完了解壓縮後，放置res/drawable內。

接著我們開一個新專案，在 XML 先宣告一個 GridView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_page_gridview"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:columnWidth="50pt"
        android:stretchMode="columnWidth"/>
</RelativeLayout>

然後初始化一些我們想要放進去的資料。

private val image = intArrayOf(R.drawable.cat, R.drawable.flower, R.drawable.hippo, R.drawable.monkey, R.drawable.mushroom, R.drawable.panda, R.drawable.rabbit, R.drawable.raccoon)  
private val imgText = arrayOf("cat", "flower", "hippo", "monkey", "mushroom", "panda", "rabbit", "raccoon")

圖片跟文字一定要對應好，不然看得時候會牛頭不對馬嘴，再來就是初始化元件。

val items = ArrayList<Map<String, Any>>()  
for (i in image.indices) {  
 val item = HashMap<String, Any>()  
 item["image"] = image[i]  
 item["text"] = imgText[i]  
 items.add(item)  
}  
val adapter = SimpleAdapter(this, items, R.layout.grid_item, arrayOf("image", "text"),  intArrayOf(R.id.image, R.id.text))

這邊是最重要的地方，我們宣告一個一個 xml 用來裝我們 GridView 其中一個 item。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 android:gravity="center"  
 android:orientation="vertical">  

 <ImageView  android:id="@+id/image"  
  android:layout_width="35pt"  
  android:layout_height="35pt"  
  android:layout_marginTop="5pt"/>  

 <TextView  android:id="@+id/text"  
  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  android:gravity="center"  
  android:paddingTop="15dp"  
  android:paddingBottom="15dp"  
  android:textSize="9pt"/>  
</LinearLayout>

上面顏色對應顏色的地方，就是當我們把 adapter 丟進 GridView 裡面的時候，所要對應的文字跟圖片，SimpleAdapter 接收 grid_item 這個 xml，然後吃下 items 這個 arraylist，當它解開這個 arraylist 的時候，它會去找尋 item 當中的 image 該對應到xml 裡面的那個元件，這樣一來就可以找到所對應的圖片或文字了。

main_page_gridview.numColumns = 3  
main_page_gridview.adapter = adapter  
main_page_gridview.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->  
 Toast.makeText(this@MainActivity, "你選擇了" + imgText[position], Toast.LENGTH_SHORT).show()  
}

在這邊我直接對 GridView 設定為 3 columns，這樣就會顯示三個垂直列，接著設定按下某一個 item 以後的事件。

這樣就完成一個簡單的 GridView 了。