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

时间:2020-06-07 12:21:21

标签: android kotlin material-components-android rangeslider android-slider

我正在使用Android材料组件库的最新版本(1.3.0-alpha01)显示范围滑块(带有两个拇指的滑块)。现在需要自定义标签,并始终在TextView中始终显示每个拇指的值(没有任何可绘制对象或默认标志,请参见所附图片)。当用户拖动labelBehavior时,如何使其始终可见并在自定义视图中显示拇指值? enter image description here

3 个答案:

答案 0 :(得分:8)

要更改标签的背景色,您可以使用自定义样式:

    <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);
  }
});

enter image description here

关于标签的行为,只有这些值(1.2.0-beta011.3.0-alpha01)

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

当前似乎无法始终显示标签。

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

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

如果要更改标签的形状,可以选中此answer

答案 1 :(得分:1)

这本来应该是评论,但我不能发表评论。 正如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>

答案 2 :(得分:0)

我想跟进 Gabrielle,特别是重新标记 Material 滑块。

在实现以下内容时:

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 无法自动为您转换数据类型。

相关问题