Android语言基础教程（54）Android基本组件之列表选择框：Android开发者的选择困难症有救了！Spinner组件全攻略，附即抄即用代码-优快云博客

嘿，各位在Android世界里摸爬滚打的战友们！今天我们要聊一个每个App都离不开，但很多人就是搞不明白的组件——Spinner（列表选择框）。别看它长得简单，用起来可是坑不少。我见过太多新手开发者，对着这个小小的下拉框抓耳挠腮，最后只能无奈地复制Stack Overflow上的代码了事。

不过别担心，今天咱们就来个Spinner大揭秘，保证让你从此对它了如指掌！

一、Spinner是什么？为什么你的App离不开它？

想象一下，你要开发一个点餐App，用户需要选择菜品规格：大份、中份、小份。如果让用户手动输入，估计没人愿意用你的App了。这时候，Spinner就像个贴心的服务员，把选项整整齐齐列出来，用户轻轻一点，搞定！

Spinner本质上就是个下拉列表，当用户点击时，会弹出一个选项菜单。它的好处太多了：

节省屏幕空间（想想如果所有选项都平铺在屏幕上得多吓人）
统一选择体验（用户早就习惯了这种操作方式）
防止输入错误（只能选不能输，从源头杜绝手残党）

二、创建你的第一个Spinner：比泡面还简单

理论说多了容易困，咱们直接上手写代码。创建基本Spinner只需要四步：

第一步：在布局文件里给Spinner留个位置

<Spinner
    android:id="@+id/size_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:prompt="@string/size_prompt" />

那个android:prompt就是弹出框的标题，像这样：

<string name="size_prompt">选择规格</string>

第二步：准备选项数据
在res/values/arrays.xml里定义选项：

<string-array name="size_options">
    <item>请选择规格</item>
    <item>小份</item>
    <item>中份</item>
    <item>大份</item>
    <item>超大份（吃不完别怪我）</item>
</string-array>

第三步：在Activity里组装起来

class OrderActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_order)
        
        val spinner: Spinner = findViewById(R.id.size_spinner)
        // 创建适配器，把数据和Spinner连接起来
        val adapter = ArrayAdapter.createFromResource(
            this,
            R.array.size_options,
            android.R.layout.simple_spinner_item
        )
        // 设置下拉时的样式
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        spinner.adapter = adapter
    }
}

第四步：处理用户选择
光显示出来还不够，我们得知道用户选了啥：

spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
        // position就是选中项的位置，从0开始
        when (position) {
            0 -> { // 请选择规格
                showToast("哥们，你得先选个规格啊！")
            }
            1 -> { // 小份
                showToast("小份？在减肥吗？")
            }
            // ... 其他选项处理
        }
    }
    
    override fun onNothingSelected(parent: AdapterView<*>?) {
        // 啥都没选时的处理
        showToast("你倒是选一个啊！")
    }
}

看到没？基础的Spinner就是这么简单，四步搞定！但是，如果你觉得Spinner只能做这种基础操作，那就太小看它了。

三、自定义Spinner：让你的列表与众不同

默认的Spinner样式确实有点...嗯...朴素。产品经理要是看到你用默认样式，估计又要说“咱们App要有设计感”了。别急，自定义样式走起！

自定义项布局：
创建res/layout/custom_spinner_item.xml：

<?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="wrap_content"
    android:padding="16dp"
    android:orientation="horizontal">
    
    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginEnd="16dp" />
        
    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"
        android:textColor="#333333" />
        
    <TextView
        android:id="@+id/price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="#FF5722" />
</LinearLayout>

使用自定义适配器：

class SizeAdapter(context: Context, private val sizes: List<SizeOption>) : 
    ArrayAdapter<SizeOption>(context, 0, sizes) {
    
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createView(position, convertView, parent)
    }
    
    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createView(position, convertView, parent)
    }
    
    private fun createView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context)
            .inflate(R.layout.custom_spinner_item, parent, false)
            
        val item = getItem(position)
        view.findViewById<TextView>(R.id.text).text = item.name
        view.findViewById<TextView>(R.id.price).text = "¥${item.price}"
        view.findViewById<ImageView>(R.id.icon).setImageResource(item.icon)
        
        return view
    }
}

// 数据类
data class SizeOption(val name: String, val price: Int, val icon: Int)

这样，你的Spinner就变成了带图标、带价格的高端货了！产品经理看了都要给你点赞。

四、动态数据绑定：和网络请求完美配合

实际开发中，数据往往来自网络接口，不可能总是写死在xml里。动态绑定数据才是正经事：

class DynamicSpinnerActivity : AppCompatActivity() {
    
    private lateinit var spinner: Spinner
    private val sizeList = mutableListOf<SizeOption>()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_dynamic)
        
        spinner = findViewById(R.id.dynamic_spinner)
        
        // 模拟网络请求
        loadSizeOptionsFromServer()
    }
    
    private fun loadSizeOptionsFromServer() {
        // 这里是模拟数据，实际开发中替换成你的网络请求
        val mockData = listOf(
            SizeOption("小份", 15, R.drawable.ic_small),
            SizeOption("中份", 20, R.drawable.ic_medium),
            SizeOption("大份", 25, R.drawable.ic_large)
        )
        
        sizeList.clear()
        sizeList.addAll(mockData)
        
        // 更新适配器
        val adapter = SizeAdapter(this, sizeList)
        spinner.adapter = adapter
        
        // 设置默认选中项
        spinner.setSelection(1) // 默认选中中份
    }
}

五、避坑指南：那些年我踩过的Spinner坑

数据更新不刷新？
记得在修改数据后调用adapter.notifyDataSetChanged()，否则界面不会更新。
选择事件重复触发？
Spinner默认选中第一项时会触发选择事件，如果不想这样，可以在设置监听器前先设置选中项：

spinner.setSelection(0, false) // false表示不触发选择事件

自定义样式不生效？
检查是否同时重写了getView()和getDropDownView()，这两个方法分别控制正常状态和下拉状态的样式。
内存泄漏？
在Activity销毁时记得移除监听器：

override fun onDestroy() {
    super.onDestroy()
    spinner.onItemSelectedListener = null
}

六、完整示例：一个真正的点餐界面

理论说再多不如实际代码来得实在，这里给你一个完整的点餐界面示例：

activity_order.xml:

<?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:orientation="vertical"
    android:padding="20dp">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="选择你的套餐"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_marginBottom="30dp" />
        
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="规格："
        android:textSize="16sp"
        android:layout_marginBottom="8dp" />
        
    <Spinner
        android:id="@+id/size_spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp" />
        
    <Button
        android:id="@+id/confirm_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="确认选择"
        android:textSize="18sp" />
        
    <TextView
        android:id="@+id/result_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="16sp" />
</LinearLayout>

OrderActivity.kt:

class OrderActivity : AppCompatActivity() {
    
    private lateinit var sizeSpinner: Spinner
    private lateinit var confirmButton: Button
    private lateinit var resultText: TextView
    
    private var selectedSize: SizeOption? = null
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_order)
        
        initViews()
        setupSpinner()
        setupClickListener()
    }
    
    private fun initViews() {
        sizeSpinner = findViewById(R.id.size_spinner)
        confirmButton = findViewById(R.id.confirm_button)
        resultText = findViewById(R.id.result_text)
    }
    
    private fun setupSpinner() {
        val sizeOptions = listOf(
            SizeOption("请选择规格", 0, R.drawable.ic_question),
            SizeOption("小份", 15, R.drawable.ic_small),
            SizeOption("中份", 20, R.drawable.ic_medium),
            SizeOption("大份", 25, R.drawable.ic_large),
            SizeOption("超大份", 30, R.drawable.ic_xlarge)
        )
        
        val adapter = SizeAdapter(this, sizeOptions)
        sizeSpinner.adapter = adapter
        
        sizeSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
                if (position > 0) { // 跳过"请选择规格"
                    selectedSize = sizeOptions[position]
                    updateConfirmButton()
                }
            }
            
            override fun onNothingSelected(parent: AdapterView<*>?) {
                selectedSize = null
                updateConfirmButton()
            }
        }
    }
    
    private fun setupClickListener() {
        confirmButton.setOnClickListener {
            selectedSize?.let { size ->
                resultText.text = "选择成功！\n${size.name} 价格：¥${size.price}"
                resultText.setTextColor(ContextCompat.getColor(this, R.color.success_green))
            } ?: run {
                resultText.text = "请先选择规格！"
                resultText.setTextColor(ContextCompat.getColor(this, R.color.error_red))
            }
        }
    }
    
    private fun updateConfirmButton() {
        confirmButton.isEnabled = selectedSize != null
        confirmButton.alpha = if (selectedSize != null) 1.0f else 0.5f
    }
}

这个完整示例包含了Spinner的所有核心用法，复制到你的项目里稍作修改就能用！