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

Question

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

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

如果您想更改标签的形状，您可以查看此答案。

Answer 2

这应该是一个评论，但我无法评论，所以就在这里。正如 Gabriele 已经告诉您的，您不能将标签 ( TooltipDrawable) 永久粘贴在拇指上方。事实上，您应该重写 的几个方法BaseSlider，但它们依赖于私有字段。

我还想（对访客）说，我无法像加布里埃尔所说的那样更改标签的文本颜色。我有版本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>