Question

我想让工具提示值始终可见，并且工具提示的文本应该是背景透明的。我试过 https://github.com/material-components/material-components-android/blob/master/docs/components/Slider.md 但没有办法让工具提示始终可见

<com.google.android.material.slider.Slider
        android:id="@+id/slider_sound_sensitivity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        android:layout_marginTop="@dimen/_8sdp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.508"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_sound_sensitivity" />

<com.google.android.material.slider.RangeSlider
        android:id="@+id/range_humidity_in_percentage"
        style="@style/Myslider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        android:layout_marginTop="@dimen/_16sdp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_humidity_in_percentage"
        app:values="@array/initial_slider_values" />

Answer 1

目前，根据 Sliders - Material Design Documentation，没有公共 API 可以使用 app:labelBehavior 属性保持工具提示始终可见。下面我将使用反射来描述一种可能的解决方案。

创建一个 Slider/RangeSlider 的子类并覆盖 onDraw(@NonNull Canvas canvas) 方法并调用 setSliderTooltipAlwaysVisible(Slider slider) 方法以使工具提示始终可见，如下所示：

对于滑块：

public class MyCustomSlider extends Slider {

 public MyCustomSlider(@NonNull Context context) {
     super(context);
 }

 public MyCustomSlider(@NonNull Context context, @Nullable AttributeSet attrs) {
     super(context, attrs);
 }

 public MyCustomSlider(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
     super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onDraw(@NonNull Canvas canvas) {
     super.onDraw(canvas);
     setSliderTooltipAlwaysVisible(this);
 }

 public static void setSliderTooltipAlwaysVisible(Slider slider){

     try
     {
         Class<?> baseSliderCls = Slider.class.getSuperclass();
         if (baseSliderCls != null) {

             Method ensureLabelsAddedMethod = baseSliderCls.getDeclaredMethod("ensureLabelsAdded");
             ensureLabelsAddedMethod.setAccessible(true);
             ensureLabelsAddedMethod.invoke(slider);
         }
     }
     catch (IllegalAccessException | NoSuchMethodException | InvocationTargetException e) {
         e.printStackTrace();
     }
 }
}

对于 RangeSlider：

 public class MyCustomRangeSlider extends RangeSlider {

 public MyCustomRangeSlider(@NonNull Context context) {
     super(context);
 }

 public MyCustomRangeSlider(@NonNull Context context, @Nullable AttributeSet attrs) {
     super(context, attrs);
 }

 public MyCustomRangeSlider(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
     super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onDraw(@NonNull Canvas canvas) {
     super.onDraw(canvas);
     setSliderTooltipAlwaysVisible(this);
 }

 public static void setSliderTooltipAlwaysVisible(RangeSlider slider){

     try
     {
         Class<?> baseSliderCls = RangeSlider.class.getSuperclass();
         if (baseSliderCls != null) {

             Method ensureLabelsAddedMethod = baseSliderCls.getDeclaredMethod("ensureLabelsAdded");
             ensureLabelsAddedMethod.setAccessible(true);
             ensureLabelsAddedMethod.invoke(slider);
         }
     }
     catch (IllegalAccessException | NoSuchMethodException | InvocationTargetException e) {
         e.printStackTrace();
     }
 }
}

这里的关键是在调用 private void ensureLabelsAdded() 后使用反射调用 BaseSlider 类的私有方法 super.onDraw(canvas)。

在您的 xml 中使用上述自定义滑块，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<my.package.name.MyCustomSlider
    style="@style/Widget.App.Slider"
    app:labelBehavior="floating"
    android:id="@+id/slider_sound_sensitivity"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:layout_marginTop="@dimen/_8sdp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

<my.package.name.MyCustomRangeSlider
    style="@style/Widget.App.Slider"
    app:labelBehavior="floating"
    android:id="@+id/range_humidity_in_percentage"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:layout_marginTop="@dimen/_16sdp"
    app:layout_constraintTop_toBottomOf="@+id/slider_sound_sensitivity"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:values="@array/initial_slider_values" />

</androidx.constraintlayout.widget.ConstraintLayout>

其中 style="@style/Widget.App.Slider" 是您在 style.xml 文件中定义的自定义样式，如下所示：

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

    <style name="ThemeOverlay.App.Slider" parent="">
        <item name="colorPrimary">@android:color/holo_red_light</item>
        <item name="colorOnSurface">@android:color/holo_red_light</item>
    </style>

    <style name="Widget.App.Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <item name="android:textAppearance">@style/TextAppearance.App.Tooltip</item>
        <!--This is the Tooltip Background Color. In case you don't want a background change it to @android:color/transparent -->
        <item name="backgroundTint">@android:color/holo_orange_light</item>
    </style>

    <style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
        <item name="android:textColor">@android:color/holo_blue_light</item>
    </style>

从上面的 xml 中，您可以通过更改 backgroundTint 颜色来将工具提示背景更改为透明颜色：<item name="backgroundTint">@android:color/transparent</item>。

带有工具提示的结果在透明背景下始终可见：

带有工具提示的结果始终可见，背景不透明：

材质滑块和范围滑块工具提示并不总是可见

1 个答案: