浮动标签微调器？

Question

在使用Android设计支持库TextInputLayout将浮动标签放置在EditText组件上方之后,我想知道是否有办法向组件添加浮动标签Spinner(不一定使用设计库).

通过这个,我的意思是TextView放在上面Spinner(显然没有像这样的动画TextInputLayout),但我希望文本大小,字体和颜色与TextInputLayout浮动标签的匹配.

例如,它看起来像这样(参见Spinners 上方的标签):

正如我之前提到的,我的主要目标是在上面有一个标签Spinner,就像在TextInputLayout- 所以文字大小,字体,颜色和标签与组件之间的距离是相同的.

在有关浮动标签文本字段的Google设计页面上,有一个图表显示了标签相对于组件的尺寸,但没有标签文字颜色或尺寸的指示:

总而言之,我要问:
- 如果有一个特殊的组件来实现我的要求或我可以使用的自定义视图,它会是什么,以及如何使用它.
-如果不是,什么是浮动标签文字大小,颜色和字体,这样我就可以把一个TextView上面我Spinner用上面的图片中显示的布局尺寸.

---

编辑:

根据文本字段的Google设计指南,浮动标签有以下内容:

提示和输入字体:Roboto Regular 16sp
Label字体:Roboto Regular 12sp
平铺高度:72dp
文本顶部和底部填充:16dp
文本字段分隔符填充:8dp

以及上面显示的图像.

所以浮动标签字体是:Roboto Regular 12sp.因此,您可以使用a TextView来显示Spinner标签,因为我不知道View您可以使用的任何自定义或特殊组件.

但是,在尝试之后,它看起来并不像图像中显示的那样好.一个自定义视图可能是为了这个美好的,因为它可能看起来更好,但上面的解决方案是实现东西接近我本来想的只是一种方法.

Answer 1

我希望文本大小,字体和颜色与TextInputLayout浮动标签的文本大小,字体和颜色相匹配.

无需任何外部库即可轻松实现.在尝试破解TextInputLayout甚至制作我自己的自定义视图后,我意识到使用简单的TextView代码需要更少的代码,而且可能更有效.

可以从AppCompat库中复制文本样式.

风格

根据材料设计指南,我们获得以下信息:

• 标签的底边应该是 8dp
• 标签应与输入文本垂直对齐

以下是指南未提及材料的内容EditText:

• 它有一个左边的填充 4dp
• 它的标签实际上没有任何16dp上面的间距,这留给了界面设计师:这是有道理的,因为如果你把它放在另一个下面EditText,你只需要一个额外8dp的空间

此外,设计支持库包含用于聚焦元素标签的此样式:

<style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">?attr/colorControlActivated</item>
</style>

非活动元素只是使用TextAppearance.AppCompat.Caption.

履行

将以下内容添加到您的dimens.xml文件中:

<dimen name="input_label_vertical_spacing">8dp</dimen>
<dimen name="input_label_horizontal_spacing">4dp</dimen>

然后将其添加到styles.xml:

<style name="InputLabel" parent="TextAppearance.AppCompat.Caption">
    <item name="android:paddingBottom">@dimen/input_label_vertical_spacing</item>
    <item name="android:paddingLeft">@dimen/input_label_horizontal_spacing</item>
    <item name="android:paddingRight">@dimen/input_label_horizontal_spacing</item>
</style>

如果你想在标签总是有高亮(口音)颜色,更换TextAppearance.AppCompat.Caption与TextAppearance.Design.Hint来自谷歌设计支持库.但是,如果您EditText在同一屏幕上也标记了视图,这可能看起来有点奇怪.

最后,你可以TextView在你的Spinner(或任何其他元素)上面加上应用的样式:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/category"
    style="@style/InputLabel" />

结果

下面的屏幕截图示出了具有两个正常一个简单的例子TextInputLayout,接着一个标签和一个视图Spinner.我没有应用额外的8dp间距来进一步分离它们,但是这表明大小,字体和颜色都被反映出来了.

内部的元素Spinner有不同的填充,但我更喜欢与所有其他标签保持垂直对齐,以获得更均匀的外观.

Answer 2

我有自己的要点来解决你遇到的同样问题.

看看这个:

https://gist.github.com/rodrigohenriques/77398a81b5d01ac71c3b

现在我不需要纺纱厂.您仍将使用包含动画的浮动标签效果.

Answer 3

我通过使用AutoCompleteTextView实现了这一点,禁用了键盘并显示了触摸选项.

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.locations));

AutoCompleteTextView mTextView = (AutoCompleteTextView) findViewById(R.id.location);

mTextView.setAdapter(adapter);
mTextView.setKeyListener(null);
mTextView.setOnTouchListener(new View.OnTouchListener(){
    @Override
    public boolean onTouch(View v, MotionEvent event){
        ((AutoCompleteTextView) v).showDropDown();
        return false;
    }
});

Answer 4

我创建了一个复合View组件,在上面显示一个标签Spinner.可以使用XML或Java设置标签的文本.

该组件具有Spinner(不是全部)的关键功能以及与TextInputLayout组件类似的外观.

我已将其命名为a LabelledSpinner,并且它在Apache 2.0许可下作为我在GitHub上的UsefulViews Android库的一部分提供.

要使用它,请在build.gradle文件中添加库依赖项:

compile 'com.satsuware.lib:usefulviews:+'

GitHub存储库(样本应用程序和使用指南)都提供了它的用法示例.

Answer 5

你可以做到这一点：

使用像这样的新材料库样式：

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/fullNameLay"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/fullNameEt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

更多信息：https : //material.io/develop/android/components/menu/

更新： 不可编辑变体：*AutoCompleteTextView*通过android:inputType="none"在AutoCompleteTextView.

Answer 6

我修改了Rodrigo的解决方案以使用适配器,即更像标准Spinner https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Answer 7

我有一个替代解决方案,它使用TextInputLayout和自定义DialogFragment(AlertDialog)的行为来模拟微调器对话框弹出窗口.

layout.xml:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/your_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/your_label"
        android:maxLines="1"
        android:inputType="textNoSuggestions"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:focusable="false"
        style="@style/Base.Widget.AppCompat.Spinner.Underlined"/>
</android.support.design.widget.TextInputLayout>

通过DialogFragment创建自定义微调器(AlertDialog)

SpinnerFragment.java:

public class SpinnerFragment extends DialogFragment {

private static final String TITLEID = "titleId";
private static final String LISTID = "listId";
private static final String EDITTEXTID = "editTextId";

public static SpinnerFragment newInstance(int titleId, int listId, int editTextId) {
    Bundle bundle = new Bundle();
    bundle.putInt(TITLEID, titleId);
    bundle.putInt(LISTID, listId);
    bundle.putInt(EDITTEXTID, editTextId);
    SpinnerFragment spinnerFragment = new SpinnerFragment();
    spinnerFragment.setArguments(bundle);

    return spinnerFragment;
}

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    final int titleId = getArguments().getInt(TITLEID);
    final int listId = getArguments().getInt(LISTID);
    final int editTextId = getArguments().getInt(EDITTEXTID);
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

    try {
        final String[] items = getResources().getStringArray(listId);

        builder.setTitle(titleId)
                .setItems(listId, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int pos) {
                        EditText et = (EditText) getActivity().findViewById(editTextId);
                        String selectedText = items[pos];
                        if (!TextUtils.isEmpty(selectedText)) {
                            et.setText(selectedText);
                        } else {
                            et.getText().clear();
                        }
                    }
                });

    } catch (NullPointerException e) {
        Log.e(getClass().toString(), "Failed to select option in " + getActivity().toString() + " as there are no references for passed in resource Ids in Bundle", e);
        Toast.makeText(getActivity(), getString(R.string.error_failed_to_select), Toast.LENGTH_LONG).show();
    }

    return builder.create();
}

}

Activity.java:

private void addCustomSpinner() {
    EditText yourEt = (EditText) findViewById(R.id.your_et);
    yourEt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showCustomSpinnerDialog(view);
        }
    });
}

private void showCustomSpinnerDialog(View v) {
    int titleId = R.string.your_label;
    int listId = R.array.spinner_selections;
    int editTextId = R.id.your_et;
    SpinnerFragment spinnerFragment = SpinnerFragment.newInstance(titleId, listId, editTextId);
    spinnerFragment.show(getFragmentManager(), "customSpinner");
}

结果

当您单击微调器样式的TextInputLayout时,它将触发一个包含您的选择列表的警告对话框.一旦选择了一个选择,EditText将填充您的选择,标签将像您想要的那样浮动.