GridView

 

 

 

利用GridView和SimpleAdapter實現這個效果

主界面布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <!-- 定義一個GridView組件 -->
    <GridView
        android:id="@+id/grid01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="2dp"
        android:verticalSpacing="2dp"
        android:numColumns="4"
        android:gravity="center"/>
    <!-- 定義一個ImageView組件 -->
    <ImageView android:id="@+id/imageView"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

填充界面布局：

<?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_horizontal"
    android:orientation="horizontal"
    android:padding="2pt">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="50dp"
        android:layout_height="50dp" />
</LinearLayout>

主程序代碼

package com.example.autocompletetextview

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class MainActivity : AppCompatActivity() {

    internal var imageIds = intArrayOf(R.drawable.bomb5, R.drawable.bomb6,
        R.drawable.bomb7, R.drawable.bomb8, R.drawable.bomb9,
        R.drawable.bomb10, R.drawable.bomb11, R.drawable.bomb12,
        R.drawable.bomb13, R.drawable.bomb14, R.drawable.bomb15,
        R.drawable.bomb16)
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 創建一個List對象，List對象的元素是Map
        val listItems = ArrayList<Map<String, Any>>()
        for (i in imageIds.indices)
        {
            val listItem = HashMap<String, Any>()
            listItem["image"] = imageIds[i]
            listItems.add(listItem)
        }
        // 獲取顯示圖片的ImageView
        val imageView = findViewById<ImageView>(R.id.imageView)
        // 創建一個SimpleAdapter
        val simpleAdapter = SimpleAdapter(this, listItems, R.layout.cell,
            arrayOf("image"), intArrayOf(R.id.image1)) // 使用/layout/cell.xml文件作為界面布局
        val grid = findViewById<GridView>(R.id.grid01)
        // 為GridView設置Adapter
        grid.adapter = simpleAdapter
        // 添加列表項被選中的監聽器
        grid.onItemSelectedListener = object : AdapterView.OnItemSelectedListener
        {
            override fun onItemSelected(parent: AdapterView<*>,
                                        view: View, position: Int, id: Long)
            {
                // 顯示當前被選中的圖片
                imageView.setImageResource(imageIds[position])
            }

            override fun onNothingSelected(parent: AdapterView<*>)
            {
            }
        }
        // 添加列表項被單擊的監聽器
        grid.onItemClickListener = AdapterView.OnItemClickListener{parent, view, position, id ->
            // 顯示被單擊的圖片
            imageView.setImageResource(imageIds[position])
        }
    }
}