如何在Spinner上添加浮动标签 [英] How to add floating label on Spinner

问题描述

使用Android设计支持库的 TextInputLayout EditText 组件上方的浮动标签，我想知道是否有办法添加 Spinner 组件的浮动标签(不一定使用设计库).

After using the Android Design Support Library's TextInputLayout to place a floating label above an EditText component, I was wondering if there is a way to add a floating label to the Spinner component (not necessarily using the Design Library).

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

By this, I mean something like a TextView placed above the Spinner (obviously no animations like the TextInputLayout), but I want the text size, font and colour to match that of the TextInputLayout's floating label.

例如，它看起来像这样(请参见Spinner s上方的标签):

For example, it would look something like this (see the labels above the Spinners):

正如我之前提到的，我的主要目的是在Spinner上方有一个标签，就像在TextInputLayout中一样-因此文本大小，字体，颜色以及标签与组件之间的距离应该相同

As I mentioned before, my main aim is to have a label above the Spinner, just as in the TextInputLayout - so text size, font, colour, and distances between the label and the component would be the same.

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

On the Google Design page about floating label text fields, there is a diagram showing dimensions of the label relative to the component, but there is no indication of the label text colour or size:

因此，总而言之，我问:
-如果有一个特殊的组件可以实现我所要求的内容或可以使用的自定义视图，它将是什么以及如何使用它.
-如果不是，则浮动标签的文本大小，颜色和字体是什么，以便可以将TextView放置在Spinner上方，并具有上图所示的布局尺寸.

So, to summarise, I am asking:
- If there is a special component to achieve what I am asking or a custom view I can use, what would it be, and how can I use it.
- If not, what is the floating label text size, colour and font, so that I can place a TextView above my Spinner with the layout dimensions shown in the above image.

从 Google设计指南中的文本字段，它具有以下浮动标签:

From the Google Design guidelines for text fields, it has the following for floating labels:

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

Hint and input font: Roboto Regular 16sp
Label font: Roboto Regular 12sp
Tile height: 72dp
Text top and bottom padding: 16dp
Text field divider padding: 8dp

以及上面显示的图像.

as well as the images shown above.

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

So the floating label font is: Roboto Regular 12sp. You can therefore use a TextView to display the Spinner label as I do not know of any custom Views or special components you could use.

但是，尝试之后，它看起来不如图片中所示的示例好. 自定义视图对此可能会更好，因为它看起来更好，但上述解决方案只是一种实现与我最初想要的目标接近的方式.

However, after trying it out, it does not look quite as good as the example shown in the image. A custom view may be better for this, as it could look nicer, but the solution above is just one way of achieving something close to what I originally wanted.

推荐答案

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

I want the text size, font and colour to match that of the TextInputLayout's floating label.

这可以轻松实现，而无需任何外部库.在尝试破解TextInputLayout甚至创建自己的自定义视图之后，我意识到使用简单的TextView所需要的代码要少得多，而且效率可能更高.

This can be achieved easily without any external libraries. After trying to hack the TextInputLayout and even making my own custom view, I realized that using a simple TextView takes much less code and it's probably more efficient.

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

The text style can be copied from the AppCompat library.

从材料设计指南中，我们获得以下信息:

From the Material Design guidelines we get the following information:

• 标签的下边距应为8dp
• 标签应与输入文字垂直对齐

以下是有关材料EditText的准则未提及的内容:

Here's what the guidelines do not mention about the Material EditText:

• 其左侧填充为4dp
• 其标签上方实际上没有任何16dp间距，这留给了界面设计者:这是有道理的，因为如果将其放置在另一个EditText下，则只需要一个附加的8dp空间

• it has a left padding of 4dp
• its label actually doesn't have any spacing of 16dp above it, this is left to the interface designer: this makes sense because if you place it under another EditText, you will only need an additional 8dp of space

此外，设计支持库包含以下样式用于关注元素的标签:

Moreover, the Design Support Library contains this style for the label of a focused element:

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

不活动的元素只需使用TextAppearance.AppCompat.Caption.

Inactive elements simply use TextAppearance.AppCompat.Caption.

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

Add the following to your dimens.xml file:

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

如果您希望标签始终具有突出显示的(强调)颜色，请使用Google Design支持库中的TextAppearance.Design.Hint替换TextAppearance.AppCompat.Caption.但是，如果您还在同一屏幕上标记了EditText视图，这可能看起来有点奇怪.

If you want the label to always have the highlighted (accent) color, replace TextAppearance.AppCompat.Caption with TextAppearance.Design.Hint from the Google Design Support Library. However, this will probably look a bit weird if you also have labeled EditText views on the same screen.

最后，您可以在Spinner(或任何其他元素)上方放置TextView并应用以下样式:

Finally, you can put a TextView above your Spinner (or any other element) with the style applied:

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

结果

以下屏幕截图显示了一个简单的示例，其中包含两个普通的TextInputLayout视图，后跟一个标签和一个Spinner.我没有应用额外的8dp间距来进一步分隔它们，但这向您显示了尺寸，字体和颜色得到了体现.

Result

The following screenshot shows a simple example with two normal TextInputLayout views followed by a label and a Spinner. I didn't apply the additional 8dp spacing to separate them further, but this shows you that the size, font and color are reflected.

Spinner中的元素具有不同的填充，但是我更喜欢与所有其他标签保持垂直对齐，以得到更统一的外观.

The elements inside the Spinner have a different padding, however I prefer to keep the vertical alignment with all the other labels to get a more uniform look.

这篇关于如何在Spinner上添加浮动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！