Google 滑块设计指南的实施

Question

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

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

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

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

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

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

Answer 1

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

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

或更多 material 元素： https://github.com/navasmdc/MaterialDesignLibrary

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

Answer 2

AnderWeb 的独立搜索栏存在一些问题。对于另一个 (MDL)，您可能不想编译整个 material 设计库只是为了一个离散的 seekbar/slider.

但是有一个不错的 github 存储库，您可能会发现它很有用：BubbleSeekBar

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

这个词

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

Answer 3

现在您可以在 Material 组件库中使用官方 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 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>

Google 滑块设计指南的实施

Implementation of Google design guidelines for Sliders

android

android-seekbar

material-components

material-components-android

android-slider