如何调整Android Spinner样式实现谷歌翻译同款下拉选择器效果

1. 固定边距不随选中文字长度变动 #

你当前的边距会随文字长度变化的核心原因是Spinner设置了android:layout_width="wrap_content"，文字长度变化会直接改变控件整体宽度，进而影响边距。修改方案如下：

• 将Spinner的宽度改为0dp（即ConstraintLayout的match_constraint），通过约束固定控件的左右边界，这样控件宽度不会随内容变化
• 增加单行显示+省略号配置，避免长文字撑破布局

修改后的左侧Spinner示例代码如下：

<Spinner
    android:id="@+id/idFromSpinner"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="start|center_vertical"
    android:layout_marginStart="15dp"
    android:paddingEnd="30dp"
    android:paddingVertical="12dp"
    android:maxLines="1"
    android:ellipsize="end"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/ivSwapBtn" <!-- 替换为你两个Spinner中间的交换按钮ID -->
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_bias="0"
/>

右侧Spinner同理，将layout_constraintEnd_toEndOf="parent"，设置固定的layout_marginEnd，左边界约束到交换按钮右侧即可实现右外边距固定。

2. 仿谷歌翻译的Spinner文字样式 #

需要自定义Spinner的选中项布局、下拉项布局，替换系统默认样式，步骤如下：

• 新建选中项布局res/layout/spinner_selected_item.xml，配置谷歌翻译同款文字样式：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif-medium"
    android:textSize="16sp"
    android:textColor="@color/design_default_color_on_surface"
    android:paddingVertical="12dp"
    android:maxLines="1"
    android:ellipsize="end"/>

• 新建下拉项布局res/layout/spinner_dropdown_item.xml，配置下拉列表的文字样式，可额外增加ripple点击效果：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif"
    android:textSize="16sp"
    android:textColor="@color/design_default_color_on_surface"
    android:padding="16dp"
    android:background="?attr/selectableItemBackground"
    android:maxLines="1"
    android:ellipsize="end"/>

• 初始化Spinner的Adapter时，传入自定义布局：

// Kotlin示例
val languageList = listOf("中文", "English", "日语", "韩语")
val adapter = ArrayAdapter(this, R.layout.spinner_selected_item, languageList)
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item)
idFromSpinner.adapter = adapter

• 可选：如果要替换默认的下拉箭头样式，可给Spinner增加以下属性：

android:background="@null"
android:drawableEnd="@drawable/ic_spinner_down_arrow" <!-- 替换为你自己的箭头图标 -->
android:drawablePadding="8dp"

内容的提问来源于stack exchange，提问作者Muhammad Hamza