实施Google设计指南中对滑块的规范

Question

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

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

我已经实现了一个看起来像这样的正常SeekBar：

我如何使它看起来像这样？

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

我想我可能错过了这些设计指南的代码文档。有人知道在哪里找到吗？或者是因为我的手机上安装了Android 5.0.2，所以造成了设计差异？

- jfmg

Answer 1

不幸的是，谷歌只提供了它应该长什么样子，但似乎没有提供由Android支持库提供的类 :(

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

或者这个库，以获取更多的Material元素：https://github.com/navasmdc/MaterialDesignLibrary

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

- bopa

---

一年后我仍有同样的问题……现在Google是否提供了教授如何实现Google Material Design滑块的课程？ - aeroxr1

两年后，我仍然有同样的问题。 - kar

目前为止，滑块仍处于“计划中”的状态。请参见https://material.io/design/components/sliders.html#implementation - adstro

RangedSlider在代码库中，但目前在1.2.0-alpha06版本的库中尚未包含。 - Brill Pappin

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>

- Gabriele Mariotti

---

你是如何自定义滑块的工具提示的？ - Sumit Shukla

@SumitShukla 更新了答案并添加了自定义工具提示。 - Gabriele Mariotti

Answer 3

AnderWeb的离散seekbar存在一些问题。对于另一个（MDL）来说，你可能不想为了一个离散的seekbar/slider编译整个material design库。

但是有一个很好的github库可以帮到你：BubbleSeekBar 我试图找到同样的问题的一个好的解决方案。在我的情况下，我也在寻找一个总是显示气泡的滑块。经过两个小时的研究，我找到了BubbleSeekBar库，它提供了你能想到的每一个属性。很难找到这个库，因为自述文件甚至没有使用“material”这个词。

编辑： 六个月后，现在又出现了另一个好的离散Seek Bar存储库，你可能会发现它很有用。IndicatorSeekBar似乎已经覆盖了所有内容，除了一些问题。你可以在这里检查它。

- Gökhan Mete ERTÜRK

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>

- Bolt UIX

---

请注意，滑块仅在v1.2及以上版本中可用。v1.2仍处于测试版阶段。 实现'com.google.android.material:material:1.2.0-beta01' - Randy

1.2.0 现已发布 - Vadim Kotov