使用 MDC 在 Android 中创建材质微调器下拉列表

Question

我正在研究材料设计Material.io的材料组件，一切都很好，我正在尝试使用MDC的TextField组件 创建一个材质下拉微调器，但我似乎找不到任何相关文档，是否可以使用 MDC 创建微调器？如果是这样，我在哪里可以找到它的文档？

在 TextField 目录中看到一个旋转器，我可以做这样的事情吗？：

Answer 1

这正是您所需要的

https://material.io/develop/android/components/menu/#expose-dropdown-menus

首先在 Textinputlayout 中添加 AutocompleteTextView

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

  <AutoCompleteTextView
      android:id="@+id/filled_exposed_dropdown"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

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

然后你可以像这样设计菜单项：

<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:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"/>

在java中初始化适配器，如下所示：

String[] COUNTRIES = new String[] {"Item 1", "Item 2", "Item 3", "Item 4"};

ArrayAdapter<String> adapter =
        new ArrayAdapter<>(
            getContext(),
            R.layout.dropdown_menu_popup_item,
            COUNTRIES);

AutoCompleteTextView editTextFilledExposedDropdown =
    view.findViewById(R.id.filled_exposed_dropdown);
editTextFilledExposedDropdown.setAdapter(adapter);

您可以更改样式以满足各种变化，例如：

已满

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"

概述

将此样式应用到您的 TextInputLayout：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

浓密填充

将此样式应用到您的 TextInputLayout：

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu"

密集轮廓

将此样式应用到您的 TextInputLayout：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"

Answer 2

在 Material Design 网站上，其标记为“计划用于 Android”（Material Menus），我还注意到 Material Design 的 Twitter feed 它刚刚发布了 Web 版。所以希望实际的实施很快就会发布。

Answer 3

如果您希望布局像微调器（而不是 editText）一样工作，请使用此选项
布局 XML：

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_8sdp"
    android:hint="@string/gender">

    <com.google.android.material.textfield.MaterialAutoCompleteTextView
        android:id="@+id/dropdown_gender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cursorVisible="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:inputType="none" />

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

分机代码：

data class ArrayAdapterItem(
    val title: String,
    val value: Any?,
) {
    override fun toString(): String {
        return title
    }
}

fun MaterialAutoCompleteTextView.applyDropdown(
    items: List<ArrayAdapterItem>,
    onSelect: (item: ArrayAdapterItem) -> Unit = {},
) {
    val adapter = ArrayAdapter(
        this.context,
        com.google.android.material.R.layout.support_simple_spinner_dropdown_item,
        ArrayList(items)
    )
    this.setAdapter(adapter)
    this.threshold = items.size
    this.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->
        adapter.getItem(position)?.let { onSelect(it) }
    }
}