使用 TextInputLayout.OutlinedBox 样式的 Material Design Spinner

Question

我目前正在使用 Material Design TextInputLayout OutlinedBox，如下所示：

        <android.support.design.widget.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/myEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Title"
                android:inputType="text"/>

        </android.support.design.widget.TextInputLayout>

我正在尝试Spinner在 TextInputEditText 下添加一个下拉框，并希望保持相同的样式：OutlinedBox。

我看到 Material Design, Material Design Text Fields似乎支持下拉菜单。如此处所示的区域：

我目前正在使用 Spinner 生成下拉菜单。

        <Spinner
            style="@style/Widget.AppCompat.Spinner.DropDown"
            android:id="@+id/option"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:dropDownWidth="match_parent" />

似乎不可能按照 OutlinedBox 设计添加下拉菜单。是否有一个库可以让我实现这一点，或者是否有更好的方法在 Material Design 中实现这一点？

Answer 1

我假设你想在TextInputLayout我遇到同样的问题时有一个暴露的下拉菜单，你可以做的是AutoCompleteTextView在你TextInputLayout的XML. 这是我如何处理这个问题的一个例子。

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingRight="30dp"
            android:paddingEnd="30dp"
            tools:ignore="RtlSymmetry"
            android:layout_margin="5dp">

            <ImageView
                android:layout_width="30dp"
                android:layout_margin="10dp"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_location_city_black_24dp"
                android:layout_gravity="center"
                />




        <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="Type"
            android:orientation="horizontal"
            >



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

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


        </LinearLayout>

    </LinearLayout>

您还需要一个项目布局资源来填充下拉弹出窗口。下面的示例提供了一个遵循 Material Design 指南的布局。

res/layout/dropdown_menu_popup_item.xml

<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"/>

在您的课程中，根据您的需要添加以下代码。

String[] type = new String[] {"Bed-sitter", "Single", "1- Bedroom", "2- Bedroom","3- Bedroom"};

        ArrayAdapter<String> adapter =
                new ArrayAdapter<>(
                        this,
                        R.layout.dropdown_menu_popup_item,
                        type);

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

如果这无济于事，请检查 Material Design 页面中的 Exposed Dropdown Menus。[ https://material.io/develop/android/components/menu/][1]

这是我关于堆栈溢出的第一个答案，希望对您有所帮助。

Answer 2

只需使用TextInputLayout包含在Material Components Library中的 style Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu。

就像是：

  <com.google.android.material.textfield.TextInputLayout
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
      android:hint="Hint text"
      ...>

    <AutoCompleteTextView
        android:id="@+id/outlined_exposed_dropdown_editable"
        .../>
  </com.google.android.material.textfield.TextInputLayout>

Answer 3

我相信这份文件根本没有显示Spinner。我认为它显示了TextInputLayout一个下拉图标。

在解剖部分，在图标子部分，它说

5.下拉图标

下拉箭头表示文本字段具有嵌套的选择组件。

现在，你如何提供“嵌套选择组件”我不确定......

Answer 4

从其他答案来看，“AutoCompleteTextView”是答案，但它的作用与微调器的作用不同。

\n

这是我的解决方案。只需将普通的 edittext 放入 TextInputLayout 中，并禁用此 editText 的输入即可。并放置一个 0dp,0dp 旋转器以进行正常旋转器工作。

\n

不要使微调器可见性=消失，因为如果它消失，微调器侦听器将不起作用

\n

布局.xml

\n

  <com.google.android.material.textfield.TextInputLayout\n        android:id="@+id/textInputLayout"\n        android:layout_width="match_parent"\n        android:layout_height="wrap_content"\n        android:layout_marginTop="@dimen/_10dp"\n        android:theme="@style/ThemeOverlay.App.TextInputLayout">\n\n        <com.google.android.material.textfield.TextInputEditText\n            android:id="@+id/editText"\n            android:layout_width="match_parent"\n            android:layout_height="wrap_content"\n            android:drawableEnd="@drawable/arrow_down_pacific_blue"\n            android:focusable="false"\n            android:hint="\xc5\x9fehir"\n            android:inputType="none" />\n\n    </com.google.android.material.textfield.TextInputLayout>\n\n    <Spinner\n        android:id="@+id/spinner"\n        android:layout_width="0dp"\n        android:layout_height="0dp"\n        android:layout_marginTop="10dp"\n        android:background="@android:color/transparent"\n        android:spinnerMode="dialog"\n        tools:listitem="@layout/general_spinner_item" />\n

\n

java代码

\n

将点击侦听器设置为 edittext 以触发微调器点击

\n

findViewById(R.id.editText).setOnClickListener(new View.OnClickListener() {\n                @Override\n                public void onClick(View v) {\n    \n                    spinner.performClick();\n                }\n            });\n

\n

在微调监听器中，设置所选项目的 edittext 文本，

\n

  spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {\n\n            @Override\n            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {\n\n                selectedCity= (City) parent.getAdapter().getItem(position);\n\n                editText.setText(selectedCity.getScreenText());\n\n                RDALogger.debug("selectedObject " + selectedCity);\n            }\n\n            @Override\n            public void onNothingSelected(AdapterView<?> parent) {\n\n            }\n        });\n

\n

和结果视图

\n

\n

Answer 5

我正在使用下面的材料库来获取微调器

implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'

这是我的布局

 <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="500dp"
            android:layout_height="wrap_content"
            android:hint="@string/select_wifi"
            app:hintTextAppearance="@style/hintStyle"
            app:startIconDrawable="@drawable/wifi">

            <com.google.android.material.textfield.MaterialAutoCompleteTextView
                style="@style/textInputEdittext"
                android:inputType="none" />

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

看看这张图片的旋转器