为 Sliders 实施 Google 设计指南

Question

昨天我正在寻找Android中的滑块，并通过Google搜索找到了这个网站：https://material.io/guidelines/components/sliders.html#sliders-discrete-slider

我知道我可以在 Android 中使用SeekBar 来实现滑块。但是，Google 似乎有很好的离散滑块示例，但我找不到任何代码示例。

我已经实现了一个普通的SeekBar，看起来像这样：

我怎样才能让它看起来像这样？

（区别：当我移动滑块时，没有显示当前值的大下降）

我想我可能只是错过了这些设计指南的代码文档。有谁知道在哪里可以找到它？还是因为我的手机上安装了 Android 5.0.2 而导致设计差异？

Answer 1

遗憾的是，谷歌只是提供了它的外观，但似乎 android 支持库没有提供类:(

但现在你可以试试这个库：https://github.com/AnderWeb/discreteSeekBar

或者这个以获得更多的物质元素： https://github.com/navasmdc/MaterialDesignLibrary

希望谷歌在以后的版本中添加这个...

Answer 2

现在您可以在 Material Components Library 中使用官方的Slider。

只需使用类似的东西：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:clipToPadding="false">

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_gravity="center"
        app:labelBehavior="withinBounds"
        android:value="60"
        android:valueFrom="0"
        android:valueTo="100"
        ..../>

</LinearLayout>

注意：它需要库的版本 1.2.0（当前为 1.2.0-beta01）。

如果您想使用圆形标记而不是默认标签自定义工具提示形状，您可以使用labelStyle 属性：

<com.google.android.material.slider.Slider
    app:labelStyle="@style/tooltip"

与：

<style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
    <item name="shapeAppearanceOverlay">@style/tooltipShOverylay</item>
    <item name="backgroundTint">@color/....</item>
</style>

<style name="tooltipShOverylay">
    <item name="cornerSize">50%</item>
</style>

Answer 3

AnderWeb 的离散搜索栏存在一些问题。而对于另一个（MDL），您可能不想仅仅为一个离散的搜索栏/滑块编译整个材料设计库。

但是有一个不错的 github 存储库可能对您有用：BubbleSeekBar

我试图为同样的问题找到一个很好的解决方案。就我而言，我还试图找到一个始终显示气泡的搜索栏。经过两个小时的研究，我找到了 BubbleSeekBar 库，它提供了你能想到的每一个属性。很难找到这个库，因为自述文件甚至没有使用“材料”这个词。

编辑： 六个月后，现在有另一个不错的 Discrete Seek Bar 存储库，您可能会发现它很有用。 IndicatorSeekBar 似乎涵盖了所有内容，除了一些问题。你可以查看here。

Answer 4

连续滑块 连续滑块允许用户做出不需要特定值的有意义的选择。

<com.google.android.material.slider.Slider
                    android:id="@+id/slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    android:value="8.09"
                    android:valueFrom="0.0"
                    android:valueTo="11.0" />

离散滑块 离散滑块在按下拇指时显示数值标签，允许用户输入精确值。

<com.google.android.material.slider.RangeSlider
                    android:id="@+id/range_slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    app:values="@array/initial_slider_values"
                    android:valueFrom="0.0"
                    android:valueTo="10.0"
                  />
 
   <!--array.xml-->
   <array name="initial_slider_values">
      <item>4.0</item>
      <item>8.0</item>
   </array>