当前位置：首页 > article >正文

3分钟看懂Android Studio下拉框组件

article 2025/1/21 18:54:44

什么是下拉框？

实现步骤：

一、布局文件中添加Spinner组件

<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="5dp" >

    
    <Spinner
        android:id="@+id/sp_dropdown"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:spinnerMode="dialog" />"

</LinearLayout>

这里可选的属性是spinnerMode，当选择dialog（对话框）的时候，下拉框是在页面中部弹出，并且拥有对话框标题“请选择年度最佳网游”，如果设置为dropdown，就是在当前下拉框的正下方弹出列表框。

可以看到这个组件并没有text属性，那为什么初始化界面（图1）的时候，会默认显示“英雄联盟”呢？

二、代码文件中初始化下拉框并且设置监听器

2.1 活动创建，设置页面内容为上面的下拉框界面，并初始化下拉框的列表框

public class MainActivity3 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        initSpinnerForDropdown(); // 初始化下拉模式的列表框
    } //未完

2.2 定义要展示在下拉框的文本数组

// 定义下拉列表需要显示的文本数组
    private String[] starArray = {"英雄联盟", "守望先锋", "DOTA2", "CS2", "三角洲", "穿越火线","地下城与勇士"};

2.3 定义初始化下拉框方法

在 Android 开发中，ArrayAdapter 是一个常用的适配器类，用于将一个数组或集合中的数据映射到一个视图（通常是 ListView 或 Spinner）。它是 Android 提供的一个工具类，继承自 BaseAdapter，封装了基础的适配器逻辑，简化了将数据绑定到视图的流程。这里列表项布局文件还没有定义。

 private void initSpinnerForDropdown() {
        // 声明一个下拉列表的数组适配器
        ArrayAdapter<String> starAdapter = new ArrayAdapter<String>(this, R.layout.item_select, starArray);
        // 从布局文件中获取名叫sp_dropdown的下拉框
        Spinner sp_dropdown = findViewById(R.id.sp_dropdown);
        // 设置下拉框的标题。对话框模式才显示标题，下拉模式不显示标题
        sp_dropdown.setPrompt("请选择年度最佳网游");

        sp_dropdown.setAdapter(starAdapter); // 设置下拉框的数组适配器
        sp_dropdown.setSelection(0); // 设置下拉框默认显示第一项
        // 给下拉框设置选择监听器，一旦用户选中某一项，就触发监听器的onItemSelected方法
        sp_dropdown.setOnItemSelectedListener(new MySelectedListener());
    }

setPrompt是给下拉框起标题。定义数组适配器、设置下拉框的数组适配器、对选择事件添加监听器，这就是简单的初始化下拉框的流程。

sp_dropdown.setSelection(0) 表示默认选中 starArray 中的第一个元素。

2.4 设置监听用户选择事件的标准接口

class MySelectedListener implements AdapterView.OnItemSelectedListener {
        // 选择事件的处理方法，其中arg2代表选择项的序号
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            Toast.makeText(MainActivity3.this, "您选择的是" + starArray[arg2],
                    Toast.LENGTH_LONG).show();
        }

        // 未选择时的处理方法，通常无需关注
        public void onNothingSelected(AdapterView<?> arg0) {}
    }

完整逻辑

定义了一个 MySelectedListener 类，用于监听 Spinner 的选中事件。
当用户选择某一项时，onItemSelected 会被调用。
利用 arg2 参数（选中项的索引）从数据源 starArray 获取选中项的内容，并用 Toast 提示用户。Toast 是一个轻量级的消息提示框，用于向用户显示简短的信息。它是非阻塞的，通常在屏幕底部短暂弹出，然后自动消失。
如果用户未选中任何项，onNothingSelected 会被调用，但这里没有处理逻辑。

三、定义列表项布局文件

列表项布局文件 是用来定义 列表中每个单独项的界面样式和内容排版 的 XML 文件。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_name"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:singleLine="true"
    android:gravity="center"
    android:textSize="17sp"
    android:textColor="#0000ff" />

四、效果展示

当选择三角洲之后，会在页面底部进行消息提示，持续时间Toast.LENGTH_LONG=3.5秒

五、添加图标

数组适配器只能显示文本，如果希望列表选项既有文本，又有图标，就需要用简单适配器。

5.1 准备图片资源

5.2 更改活动界面代码

private int[] iconArray = {R.drawable.lol, R.drawable.overwatch, R.drawable.dota2,
            R.drawable.cs2, R.drawable.sanjiaozhou};
    // 定义下拉列表需要显示的文本数组
    private String[] starArray = {"英雄联盟", "守望先锋", "DOTA2", "CS2", "三角洲"};

    // 初始化下拉模式的列表框
    private void initSpinnerForSimpleAdapter() {
        // 声明一个映射对象的列表，用于保存图标与名称配对信息
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < iconArray.length; i++) {
            Map<String, Object> item = new HashMap<String, Object>();
            item.put("icon", iconArray[i]);
            item.put("name", starArray[i]);
            list.add(item); // 把行星图标与名称的配对映射添加到列表
        }
        // 声明一个下拉列表的简单适配器，其中指定了图标与文本两组数据
        SimpleAdapter starAdapter = new SimpleAdapter(
                this, list, R.layout.item_simple, new String[]{"icon", "name"},
                new int[]{R.id.iv_icon, R.id.tv_name}
        );
        // 设置简单适配器的布局样式
        starAdapter.setDropDownViewResource(R.layout.item_simple);

5.3 重新制作列表布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <!-- 这是展示图标的ImageView -->
    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1" />

    <!-- 这是展示名称的TextView -->
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:gravity="center"
        android:textColor="#ff0000"
        android:textSize="17sp" />
</LinearLayout>