如何将微调器下拉菜单与微调器居中对齐

Question

click to open image

我需要使那个下拉弹出窗口完全像那样。我需要帮助-

弹出窗口的垂直和水平位置不会改变
如何得到这些圆角。
弹出项文本不会居中对齐

Answer 1

要达到上述要求，您可以使用具有自定义样式的 Material Drop Down Menu，该样式继承自 Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu.

的父项

1) 首先，您必须使用自定义样式在您的 xml 布局中声明此 Material 下拉菜单，如下所示。请注意，使用属性：android:dropDownHorizontalOffset="0dp" 或 android:dropDownVerticalOffset="10dp" 你可以用特定数量的 dp 值移动弹出菜单 Vertically/Horizontally。

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/dropDownTextInputLayout"
        style="@style/MyExposedDropdownMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.MaterialAutoCompleteTextView
            android:id="@+id/autoCompleteTextView"
            android:layout_width="160dp"
            android:layout_height="70dp"
            android:ellipsize="end"
            android:focusable="false"
            android:maxLines="1"
            android:gravity="center"
            android:dropDownHorizontalOffset="0dp"
            android:dropDownVerticalOffset="10dp"
            android:dropDownWidth="160dp"
            android:dropDownHeight="wrap_content"
            android:textColor="@color/white"
            android:inputType="none"
            android:singleLine="true"/>

    </com.google.android.material.textfield.TextInputLayout>

其中@style/MyExposedDropdownMenu 是您的自定义样式，如下所示。在这种样式中，关键点是我们从父级 OutlinedBox.ExposedDropdownMenu 继承并且我们重写 boxBackgroundColor 以更改 TextInputLayout 下拉框颜色和自定义 shapeAppearance，您可以在其中更改 TextInputLayout 的角半径。

    <style name="MyExposedDropdownMenu" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
        <item name="boxBackgroundColor">@android:color/black</item>
        <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
        <item name="hintTextColor">@android:color/white</item>
        <item name="endIconTint">@android:color/white</item>
    </style>


    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerSize">50dp</item>
    </style>

2) 要使下拉列表中的每个项目也具有圆角，您可以使用具有属性 [= 的自定义 ShapeAppearanceModel 以编程方式实现此目的58=] 和以像素为单位的舍入值。最后，要对齐中心的每个项目，您必须使用 android:textAlignment="center" 进行自定义布局，并将此自定义布局项传递到您的适配器中。下面是如何在代码中实现上述任务：

//your data
String[] items  = {"1","2","3","4","5","6","7", "8","9", "10"};

//get your MaterialAutoCompleteTextView
MaterialAutoCompleteTextView mAutoCompleteTV = findViewById(R.id.autoCompleteTextView);

//initialize your adapter with a custom list item layout
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.custom_drop_down_item , items);

//create your custom ShapeAppearanceModel for your Drop Down Item
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED, dp2px(getResources(), 50))
        .build();

//get the current DropDownBackground
Drawable dropDownDrawable = mAutoCompleteTV.getDropDownBackground();

//and change the MaterialShapeDrawable fill Color and set your Custom ShapeAppearanceModel
if(dropDownDrawable instanceof MaterialShapeDrawable)
{
    MaterialShapeDrawable dropDownBackground = (MaterialShapeDrawable) dropDownDrawable;
    dropDownBackground.setFillColor(ContextCompat.getColorStateList(this, android.R.color.black));
    dropDownBackground.setShapeAppearanceModel(shapeAppearanceModel);
}

//sets the adapter to MaterialAutoCompleteTextView
mAutoCompleteTV.setAdapter(adapter);

使用 dp 到像素的辅助函数来设置正确的角半径（以像素为单位）：

public static int dp2px(Resources resource, int dp) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,resource.getDisplayMetrics());
}

R.layout.custom_drop_down_item 是您的自定义项目布局，如下所示（android:textAlignment="center" 使每个项目居中）：

<?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:padding="16dp"
    android:ellipsize="end"
    android:textAlignment="center"
    android:textColor="@android:color/white"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1" />

最终结果如下：

如何将微调器下拉菜单与微调器居中对齐

How to align spinner drop-down menu to center with spinner

xml

android

spinner

android-layout

android-studio