Material 使用 TextInputLayout.OutlinedBox 样式设计 Spinner
Material design Spinner using TextInputLayout.OutlinedBox styling
我目前正在使用Material设计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>
我正在尝试在我的 TextInputEditText 下添加一个下拉框 Spinner，并希望保持相同的样式：OutlinedBox。
我看到 Material 设计似乎支持下拉菜单，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 设计中实现它？
我认为此文档根本没有显示 Spinner。我认为它显示的是带有下拉图标的 TextInputLayout。
在 Anatomy section 的“图标”小节中，显示
5. Dropdown icon
A dropdown arrow indicates that a text field has a nested selection component.
现在，您如何提供“嵌套选择组件”我不确定...
看起来他们实际上使用了一个 TextInputLayout 包裹了一个 AutoCompleteTextView。请注意，它们已经是 material 组件主题 [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/
只需使用 TextInputLayout included in the Material Components Library 的样式 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>
我假设你想在 TextInputLayout 中有一个公开的下拉菜单我遇到了同样的问题，你可以做的是在你的 TextInputLayout 中使用 AutoCompleteTextView 作为在下面的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 设计指南的布局。
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"/>
在您的 class 中根据需要添加以下代码。
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 设计页面中的公开下拉菜单。
[https://material.io/develop/android/components/menu/][1]
这是我对堆栈溢出的第一个回答，希望对您有所帮助。
我用这个解决了我的问题：
在 XML:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout"
style="@style/AppTheme.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="@+id/my_spinner_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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?
我正在使用下面的 material 库来获取微调器
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>
查看此微调器图片
从其他答案来看，“AutoCompleteTextView”是答案，但它的作用与微调器不同。
这是我的解决方案。只需将普通的 edittext 放在 TextInputLayout 中，并使此 editText 禁用输入。并放置一个 0dp,0dp 的微调器用于正常的微调器工作。
不要让 spinner visibility=gone，因为如果它消失了，spinner listener 就不会工作
layout.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_10dp"
android:theme="@style/ThemeOverlay.App.TextInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:background="@android:color/transparent"
android:spinnerMode="dialog"
tools:listitem="@layout/general_spinner_item" />
java代码
将点击侦听器设置为触发微调器点击的 edittext
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) {
}
});
和结果视图
你可以查看我的Medium article where I introduce a custom MaterialSpinner，它支持双向数据绑定和选择跟踪。生成的布局看起来像这样简单：
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/input_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="match_parent"
app:items="@{viewModel.items}"
app:selectedPosition="@={viewModel.selectedItemPosition}"
app:emptyText="@string/selection_no_item_text" />
</com.google.android.material.textfield.TextInputLayout>
我知道现在回答这个问题为时已晚，但像我这样陷入此类或类似问题的人可能会发现这非常有用。访问这个 repo its perfect solution as requested. This library support all material TextInputLayout styles. Thanks to "Mamoon Al-hawamdeh" 以了解这个令人惊叹的图书馆。
所有这些答案都有帮助，但重要的一点是，如果您设置 app:endIconMode 属性，您的下拉菜单将不起作用。
只需将 inputType 从“文本”更改为“none”
<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="none"/>
</android.support.design.widget.TextInputLayout>
我目前正在使用Material设计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>
我正在尝试在我的 TextInputEditText 下添加一个下拉框 Spinner，并希望保持相同的样式：OutlinedBox。
我看到 Material 设计似乎支持下拉菜单，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 设计中实现它？
我认为此文档根本没有显示 Spinner。我认为它显示的是带有下拉图标的 TextInputLayout。
在 Anatomy section 的“图标”小节中，显示
5. Dropdown icon
A dropdown arrow indicates that a text field has a nested selection component.
现在，您如何提供“嵌套选择组件”我不确定...
看起来他们实际上使用了一个 TextInputLayout 包裹了一个 AutoCompleteTextView。请注意，它们已经是 material 组件主题 [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/
只需使用 TextInputLayout included in the Material Components Library 的样式 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>
我假设你想在 TextInputLayout 中有一个公开的下拉菜单我遇到了同样的问题，你可以做的是在你的 TextInputLayout 中使用 AutoCompleteTextView 作为在下面的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 设计指南的布局。
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"/>
在您的 class 中根据需要添加以下代码。
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 设计页面中的公开下拉菜单。 [https://material.io/develop/android/components/menu/][1]
这是我对堆栈溢出的第一个回答，希望对您有所帮助。
我用这个解决了我的问题： 在 XML:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layout"
style="@style/AppTheme.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="@+id/my_spinner_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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?
我正在使用下面的 material 库来获取微调器
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>
查看此微调器图片
从其他答案来看，“AutoCompleteTextView”是答案，但它的作用与微调器不同。
这是我的解决方案。只需将普通的 edittext 放在 TextInputLayout 中，并使此 editText 禁用输入。并放置一个 0dp,0dp 的微调器用于正常的微调器工作。
不要让 spinner visibility=gone，因为如果它消失了，spinner listener 就不会工作
layout.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_10dp"
android:theme="@style/ThemeOverlay.App.TextInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:background="@android:color/transparent"
android:spinnerMode="dialog"
tools:listitem="@layout/general_spinner_item" />
java代码
将点击侦听器设置为触发微调器点击的 edittext
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) {
}
});
和结果视图
你可以查看我的Medium article where I introduce a custom MaterialSpinner，它支持双向数据绑定和选择跟踪。生成的布局看起来像这样简单：
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/input_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="match_parent"
app:items="@{viewModel.items}"
app:selectedPosition="@={viewModel.selectedItemPosition}"
app:emptyText="@string/selection_no_item_text" />
</com.google.android.material.textfield.TextInputLayout>
我知道现在回答这个问题为时已晚，但像我这样陷入此类或类似问题的人可能会发现这非常有用。访问这个 repo its perfect solution as requested. This library support all material TextInputLayout styles. Thanks to "Mamoon Al-hawamdeh" 以了解这个令人惊叹的图书馆。
所有这些答案都有帮助，但重要的一点是，如果您设置 app:endIconMode 属性，您的下拉菜单将不起作用。
只需将 inputType 从“文本”更改为“none”
<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="none"/>
</android.support.design.widget.TextInputLayout>