【问题标题】:Add a custom label to material range slider将自定义标签添加到材料范围滑块
【发布时间】:2020-09-26 10:11:41
【问题描述】:

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

【问题讨论】:

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


    【解决方案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-beta011.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 无法自动为您转换数据类型。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-01-13
        • 2019-03-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-10-27
        • 1970-01-01
        相关资源
        最近更新 更多