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

Posted 2023-02-18

【中文标题】将自定义标签添加到材料范围滑块

【英文标题】：Add a custom label to material range slider

【发布时间】：2020-09-26 10:11:41

【问题描述】：

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

【参考方案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。

【讨论】：

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

谢谢。但同样，我需要更改标签并将值放在拇指上方。我更新了问题并添加了屏幕截图，以便您了解我的意思

@Lara 对不起，我对“改变灰色”感到不满。您可以自定义工具提示（标签）的背景和文本颜色。您可以使用相同颜色的背景（但标签离轨道不太近）。但我无法始终显示标签。

无论如何，再次感谢您的帮助。希望他们能尽快添加始终显示标签的功能；）

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

【参考方案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>

【参考方案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);
  
);

请务必正确确定 Slider 的类型。如果您使用的是material.Slider，那么您需要将RangeSlider 更改为Slider，因为Android 无法自动为您转换数据类型。