给材料范围滑块添加自定义标签

Question

我正在使用Android材料组件库的最新版本（1.3.0-alpha01）来显示一个范围滑块（带有两个拇指的滑块）。现在需要自定义标签并在TextView中始终显示每个拇指的值（不使用任何可绘制对象或默认标志，参见附图）。当用户拖动它们时，我该如何使labelBehavior始终可见并在自定义视图中显示拇指值？

- Laura

Answer 1

要更改标签的 背景颜色，您可以使用自定义样式：

    <com.google.android.material.slider.RangeSlider
        style="@style/Myslider"
        ...>

使用：

<style name="Myslider" parent="@style/Widget.MaterialComponents.Slider">
    <item name="labelStyle">@style/My_Tooltip</item>
    <item name="materialThemeOverlay">@style/ThemeOverlay.Slider</item>
</style>

<style name="My_Tooltip" parent="Widget.MaterialComponents.Tooltip">
    <!-- background color of the Tooltip -->
    <item name="backgroundTint">@color/...</item>
</style>

<style name="ThemeOverlay.Slider" parent="">
    <!-- color used by the text in the Tooltip -->
    <item name="colorOnPrimary">@color/...</item>
</style>

您可以使用LabelFormatter自定义标签中的值。
例如：

RangeSlider slider = findViewById(R.id.slider);
slider.setLabelFormatter(new LabelFormatter() {
  @NonNull
  @Override
  public String getFormattedValue(float value) {
    //It is just an example
    if (value == 3.0f)
      return "TEST";
    return String.format(Locale.US, "%.0f", value);
  }
});

关于标签的行为，只有以下这些值可用（适用于1.2.0-beta01和1.3.0-alpha01版本）：

• LABEL_FLOATING：标签仅在交互时可见。它会浮动在滑块上方，可能会覆盖此视图上方的视图。这是默认和推荐的行为。
• LABEL_WITHIN_BOUNDS：标签仅在交互时可见。标签将始终绘制在此视图的边界内。这意味着当标签不可见时，滑块上方会出现额外空间。
• LABEL_GONE：标签永远不会被绘制。

目前似乎不可能始终显示标签。

您可以使用setLabelBehavior方法或布局或样式中的labelBehavior来设置标签行为。

<com.google.android.material.slider.RangeSlider
        app:labelBehavior="withinBounds"/>

如果你想要改变标签的形状，可以查看这个答案。

- Gabriele Mariotti

---

谢谢您的回答。我想要改变灰色标签本身，而不仅仅是格式化它的值。 - Laura

谢谢。但是我需要再次更改标签并将值放在滑块上方。我已更新问题并添加了屏幕截图，这样您就可以看到我的意思了。 - Laura

无论如何，再次感谢您的帮助。希望他们很快就能添加始终显示标签的功能 ;) - Laura

如何直接从xml设置LABEL_GONE？我在哪里可以找到关于LABEL_FLOATING、LABEL_WITHIN_BOUNDS和LABEL_GONE的文档？谢谢。 - nibbana

嗨@GabrieleMariotti，我想知道是否可以给trackActiveColor设置渐变图形，或者有没有一种方法可以为其设置渐变？谢谢。 - ibraizQ9

Answer 2

本应该是一条评论，但我无法评论，所以就在这里了。 正如Gabriele已经告诉你的那样，你不能永久地将标签（TooltipDrawable）粘贴在滑块上方。实际上，你应该重写BaseSlider的几个方法，但它们依赖于私有字段。

我还想说（给访客们），我无法像Gabriele说的那样更改标签的文本颜色。我使用的是版本1.3.0-alpha01。 我不得不重新设置另一个组件TextAppearance.MaterialComponents.Tooltip的样式。

my_layout.xml

<com.google.android.material.slider.Slider
    ...
    app:labelStyle="@style/MyTooltip"
    ...
/>

res/values/styles.xml:

<style name="MyTooltip" parent="Widget.MaterialComponents.Tooltip">
    <item name="backgroundTint">...</item>
    <item name="android:textAppearance">@style/MyTooltip.TextAppearance</item>
</style>

<style name="MyTooltip.TextAppearance" parent="@style/TextAppearance.MaterialComponents.Tooltip">
    <item name="android:textColor">...</item>
    <item name="android:fontFamily">...</item>
    <item name="fontFamily">...</item>
    <item name="android:textSize">...</item>
</style>

- user10504386

---

这个完美运行。 - S. Gissel

Answer 3

我希望跟进Gabrielle，具体涉及重新标记“材料滑块”的内容。

在实施类似功能时：

RangeSlider slider = findViewById(R.id.slider);
slider.setLabelFormatter(new LabelFormatter() {
  @NonNull
  @Override
  public String getFormattedValue(float value) {
    //It is just an example
    if (value == 3.0f)
      return "TEST";
    return String.format(Locale.US, "%.0f", value);
  }
});

请确保正确确定滑块的类型。如果您正在使用material.Slider，则需要将 RangeSlider 更改为 Slider ，因为Android无法自动转换数据类型。

- Edward Passagi