为Sliders实施Google设计指南

Question

昨天我在Android上寻找滑块,发现这个网站有谷歌搜索:https://material.io/guidelines/components/sliders.html#sliders-discrete-slider

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

我已经实现了一个SeekBar看起来像这样的法线:

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

(差异:当我移动滑块时,没有显示当前值的大幅下降)

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

Answer 1

遗憾的是谷歌刚刚提供它应该是什么样子,但似乎没有由android支持库提供的类:(

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

或者更多的材料元素:https: //github.com/navasmdc/MaterialDesignLibrary

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

Answer 2

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

只需使用类似的东西：

<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>