如何为AppCompatAutoCompleteTextView下拉框设置带边距的宽度？

问题描述 #

我为AppCompatAutoCompleteTextView设置了android:dropDownWidth="match_parent"，并在下拉列表项的根布局添加了android:paddingHorizontal="@dimen/padding_16"，但下拉项的内边距效果未生效。相关代码如下：

AppCompatAutoCompleteTextView布局 #

<androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/phoneNumberPrefixTextView"
            style="@style/PrimaryEditText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/credit_card_form_height"
            android:gravity="center"
            android:dropDownWidth="match_parent"
            android:inputType="number"
            android:maxLength="3" />

下拉列表项布局 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="@dimen/padding_16">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/country_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/padding_16"
        android:layout_marginVertical="@dimen/padding_16"
        android:fontFamily="@font/montserrat_regular"
        android:textColor="@color/light_black"
        android:textSize="@dimen/text_size_normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Israel" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/country_code_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/padding_4"
        android:fontFamily="@font/montserrat_regular"
        android:textColor="@color/fog_medium"
        android:textSize="@dimen/text_size_normal"
        app:layout_constraintBottom_toBottomOf="@+id/country_edit_text"
        app:layout_constraintStart_toEndOf="@+id/country_edit_text"
        app:layout_constraintTop_toTopOf="@+id/country_edit_text"
        tools:text="+972" />

</androidx.constraintlayout.widget.ConstraintLayout>

适配器实现 #

class CountriesWithCodeAdapter(
    context: Context,
    resource: Int,
    private val items: MutableList<Countries.Country>
) : ArrayAdapter<Countries.Country>(context, resource, items) {

    private val originalList: List<Countries.Country> = items.toList()
    private var filteredItems: List<Countries.Country> = items.toList()

    override fun getItem(position: Int): Countries.Country {
        return items[position]
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val binding: CreditCardCountryWithCodeItemBinding =
            if (convertView != null) {
                CreditCardCountryWithCodeItemBinding.bind(convertView)
            } else {
                CreditCardCountryWithCodeItemBinding.inflate(
                    LayoutInflater.from(context),
                    parent, false
                )
            }
        binding.countryEditText.text = items[position].name
        binding.countryCodeEditText.text = items[position].callingCode
        return binding.root
    }

    override fun getFilter(): Filter = object : Filter() {
        override fun performFiltering(constraint: CharSequence?): FilterResults {
            val charString = constraint.toString().lowercase(Locale.getDefault()).trim()

            filteredItems = if (charString.isEmpty()) {
                originalList.toList()
            } else {
                originalList.filter { country ->
                    country.callingCode.contains(charString, ignoreCase = true)
                }
            }

            val filterResults = FilterResults()
            filterResults.values = filteredItems
            return filterResults
        }

        override fun publishResults(constraint: CharSequence?, results: FilterResults?) {
            @Suppress("UNCHECKED_CAST")
            filteredItems = results?.values as? List<Countries.Country> ?: emptyList()
            if (filteredItems.isEmpty()) {
                clear()
                notifyDataSetChanged()
            } else {
                clear()
                addAll(filteredItems)
                notifyDataSetChanged()
            }
        }
    }
}

解决方案 #

问题出在默认的下拉PopupWindow自带内边距，覆盖了你列表项的内边距设置。需要通过以下两步修复：

1. 定义移除默认内边距的Popup样式
   在res/values/styles.xml中添加自定义样式：

<style name="DropDownPopupStyle" parent="@style/Widget.AppCompat.ListPopupWindow">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <!-- 可选：如需自定义下拉背景，可添加此项 -->
    <!-- <item name="android:background">@drawable/custom_dropdown_bg</item> -->
</style>

2. 将样式应用到AppCompatAutoCompleteTextView
   修改AutoCompleteTextView布局，添加app:popupTheme属性指向自定义样式：

<androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/phoneNumberPrefixTextView"
            style="@style/PrimaryEditText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/credit_card_form_height"
            android:gravity="center"
            android:dropDownWidth="match_parent"
            android:inputType="number"
            android:maxLength="3"
            app:popupTheme="@style/DropDownPopupStyle" />

额外检查点 #

• 确认PrimaryEditText样式未设置冲突的popup相关属性
• 确保列表项根布局的android:layout_width="match_parent"未被其他布局限制

完成以上配置后，列表项的水平内边距即可正常显示。

内容的提问来源于stack exchange，提问作者Alon Shlider