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

Question

click to open image

我需要像那样制作那个下拉弹出窗口。 我需要帮助-

1. 弹窗的垂直和水平位置不会改变
2. 如何获得这些圆角。
3. 弹出项目文本不会居中对齐

Answer 1

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

1)首先，您必须使用自定义样式在您的 xml 布局中声明此材质下拉菜单，如下所示。请注意，使用属性： android:dropDownHorizo​​ntalOffset="0dp" 或 android:dropDownVerticalOffset="10dp" 您可以垂直/水平移动弹出菜单并具有特定的 dp价值。

<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)要使下拉列表中的每个项目也具有圆角，您可以使用具有 CornerFamily.ROUNDED 属性的自定义 ShapeAppearanceModel 和以像素为单位的舍入值。最后，要对齐 Center 中的每个项目，您必须使用 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" />

最终结果如下：