使用 TextInputLayout.OutlinedBox 样式的材料设计 Spinner

Posted 2023-04-13

【中文标题】使用 TextInputLayout.OutlinedBox 样式的材料设计 Spinner

【英文标题】：Material design Spinner using TextInputLayout.OutlinedBox styling

【发布时间】：2019-04-11 10:32:47

【问题描述】：

我目前正在使用Material Design TextInputLayout OutlinedBox 如下图：

        <android.support.design.widget.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_
            android:layout_>

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

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

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

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

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

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

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

【问题讨论】：

您找到这个问题的答案了吗？我面临同样的问题。如此处所述：***.com/questions/54004976/…

有人（谷歌）提供了这个视图吗？他们在设计文档中展示它真是太棒了，但完全将实现留在了 sdk 之外。

【参考方案1】：

我假设您想在 TextInputLayout 内有一个 Exposed 下拉菜单我遇到了同样的问题，您可以在 TextInputLayout 内使用 AutoCompleteTextView，如下所示 XML .这是我如何处理这个问题的一个例子。

<LinearLayout
            android:layout_
            android:layout_
            android:orientation="horizontal"
            android:paddingRight="30dp"
            android:paddingEnd="30dp"
            tools:ignore="RtlSymmetry"
            android:layout_margin="5dp">

            <ImageView
                android:layout_
                android:layout_margin="10dp"
                android:layout_
                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_
            android:layout_
            android:hint="Type"
            android:orientation="horizontal"
            >



            <AutoCompleteTextView
                android:id="@+id/filled_exposed_dropdown"
                android:layout_
                android:layout_
                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_
    android:layout_
    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);

如果这无济于事，请检查材料设计页面中的公开下拉菜单。 [https://material.io/develop/android/components/menu/][1]

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

【讨论】：

如果您使用 Kotlin 和 VIEW 绑定，在尝试设置适配器时，您可能会收到“无法重新分配 Val”。您需要像这样使用 as：` (binding?.editTextFilledExposedDropdown as?AutoCompleteTextView)?.setAdapter(adapter) `

【参考方案2】：

只需将Material Components Library 中包含的TextInputLayout 与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>

【讨论】：

感谢您的回复，这似乎很好，但现在我们如何（使用此解决方案）显示下拉菜单并管理项目选择等？

其实从"com.google.android.material:material:1.1.0"开始就存在

@AkbolatSSS 是的，1.1.0 目前是最新的稳定版本。

【参考方案3】：

我相信此文档根本没有显示Spinner。我认为它显示了一个带有下拉图标的TextInputLayout。

在 Anatomy section 的图标小节中，它说

5.下拉图标

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

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

【参考方案4】：

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

这是我的解决方案。只需将普通的 edittext 放入 TextInputLayout 并禁用此 editText 输入即可。并放置一个 0dp,0dp 微调器让微调器正常工作。

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

layout.xml

  <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_
        android:layout_
        android:layout_marginTop="@dimen/_10dp"
        android:theme="@style/ThemeOverlay.App.TextInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_
            android:layout_
            android:drawableEnd="@drawable/arrow_down_pacific_blue"
            android:focusable="false"
            android:hint="şehir"
            android:inputType="none" />

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

    <Spinner
        android:id="@+id/spinner"
        android:layout_
        android:layout_
        android:layout_marginTop="10dp"
        android:background="@android:color/transparent"
        android:spinnerMode="dialog"
        tools:listitem="@layout/general_spinner_item" />

java代码

将点击侦听器设置为编辑文本以触发微调器点击

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

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

  spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() 

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) 

                selectedCity= (City) parent.getAdapter().getItem(position);

                editText.setText(selectedCity.getScreenText());

                RDALogger.debug("selectedObject " + selectedCity);
            

            @Override
            public void onNothingSelected(AdapterView<?> parent) 

            
        );

和结果视图

【参考方案5】：

似乎他们实际上使用了一个包裹 AutoCompleteTextView 的 TextInputLayout。请注意，它们已经是材料组件主题 [https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md]。

见： https://material.io/design/components/menus.html#exposed-dropdown-menu https://material.io/develop/android/components/menu/

【参考方案6】：

我用这个解决了我的问题： 在 XML 中：

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/layout"
        style="@style/AppTheme.ExposedDropdownMenu"                        
        android:layout_
        android:layout_>

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

在代码中：

        layout.keyListener=null
        ArrayAdapter(it, android.R.layout.simple_list_item_1, list).also  
         adapter ->
            layout.setAdapter(adapter)
        

学分：How to make EditText not editable through XML in Android?

【参考方案7】：

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

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_
            android:layout_
            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>

查看此图片以了解微调器

【参考方案8】：

我知道回答这个问题为时已晚，但像我这样陷入此类或类似问题的人可能会发现这非常有用。根据要求访问此repo 其完美解决方案。该库支持所有材质 TextInputLayout 样式。感谢 "Mamoon Al-hawamdeh" 提供了这个令人惊叹的库。

【参考方案9】：

您可以查看我的Medium article where I introduce a custom MaterialSpinner，它支持双向数据绑定和选择跟踪。生成的布局看起来就像这样简单：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_
    android:layout_
    android:hint="@string/selection_hint"
    app:startIconDrawable="@drawable/selection_icon"
    app:boxBackgroundMode="outline"
    app:endIconMode="@viewModel.items == null || viewModel.items.size() != 0 ? TextInputLayout.END_ICON_DROPDOWN_MENU : TextInputLayout.END_ICON_NONE">

    <com.example.MaterialSpinner
        android:id="@+id/items"
        android:layout_
        android:layout_
        app:items="@viewModel.items"
        app:selectedPosition="@=viewModel.selectedItemPosition"
        app:emptyText="@string/selection_no_item_text" />

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

【讨论】：

app:endIconMode="dropdown_menu" 适用于不使用数据绑定的用户

【参考方案10】：

所有这些答案都很有帮助，但重要的一点是，如果您设置 app:endIconMode 属性，您的下拉菜单将不起作用。

【参考方案11】：

只需将inputType 从“文本”更改为“无”

<android.support.design.widget.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_
        android:layout_>

        <android.support.design.widget.TextInputEditText
            android:id="@+id/myEditText"
            android:layout_
            android:layout_
            android:hint="Title"
            android:inputType="none"/>

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