You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android Spinner样式自定义:解决文本对齐及下拉列表样式需求

解决Spinner与AutoCompleteTextView文本对齐及自定义Spinner样式问题

我来帮你一步步搞定这几个问题,下面是具体的实现方案:


1. 解决文本对齐问题

默认Spinner的文本布局和AutoCompleteTextView大概率存在内边距或对齐逻辑的差异,咱们可以通过自定义Spinner的选中项布局来统一样式,确保两者文本完全对齐:

首先在layout目录下创建spinner_selected_item.xml布局文件:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="@color/colorPrimaryComplement"
    android:textSize="16sp" <!-- 和你的AutoCompleteTextView字号保持一致 -->
    android:paddingVertical="12dp" <!-- 匹配AutoCompleteTextView的上下内边距 -->
    android:fontFamily="@font/montserrat" /> <!-- 和AutoCompleteTextView统一字体 -->

然后修改你的Spinner XML,添加自定义选中项的引用:

<Spinner
    android:id="@+id/spinner"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:entries="@array/EventOptions"
    android:gravity="center"
    android:textAlignment="center"
    android:textColor="@color/colorPrimaryComplement"
    style="@style/loginEditTextStyle"
    app:layout_constraintWidth_percent=".8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.6"
    android:background="@null" <!-- 先移除默认背景,后续自定义 -->
    android:spinnerMode="dropdown" />

最后在代码里给Spinner绑定自定义布局(Activity/Fragment的onCreate方法中):

Spinner spinner = findViewById(R.id.spinner);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.EventOptions, R.layout.spinner_selected_item);
spinner.setAdapter(adapter);

2. 去除Spinner箭头或调整对齐

如果想完全去掉箭头,直接保留上面的android:background="@null"就行;要是想保留箭头但不让它干扰文本对齐,可以自定义背景Drawable:

drawable目录创建spinner_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 输入框边框,和你的loginEditTextStyle保持一致 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="@color/colorPrimaryComplement" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <!-- 可选:保留箭头并调整位置,取消注释即可 -->
    <!-- <item android:right="8dp" android:gravity="center_vertical">
        <vector android:width="20dp" android:height="20dp" android:viewportWidth="24" android:viewportHeight="24">
            <path android:fillColor="@color/colorPrimaryComplement" android:pathData="M7,10l5,5l5,-5z" />
        </vector>
    </item> -->
</layer-list>

然后把Spinner的background替换成这个:

android:background="@drawable/spinner_background"

3. 自定义下拉列表项(白色文本+下划线)

先在layout目录创建spinner_dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="@android:color/white" <!-- 设置白色文本 -->
    android:textSize="16sp"
    android:paddingVertical="12dp"
    android:fontFamily="@font/montserrat"
    android:drawableBottom="@drawable/spinner_item_divider" /> <!-- 添加下划线 -->

再在drawable目录创建下划线的样式文件spinner_item_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="1dp" />
    <solid android:color="@android:color/white" /> <!-- 下划线颜色和文本一致 -->
</shape>

最后修改代码里的Adapter,设置下拉项布局:

Spinner spinner = findViewById(R.id.spinner);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.EventOptions, R.layout.spinner_selected_item);
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item); // 绑定下拉项布局
spinner.setAdapter(adapter);

最终效果说明

做完上面的步骤后,你就能实现:

  • Spinner和AutoCompleteTextView的文本完全对齐
  • 按需去除/自定义Spinner箭头样式
  • 下拉列表项显示白色文本,且底部带有下划线

内容的提问来源于stack exchange,提问作者juztcode

火山引擎 最新活动