利用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]) } } }