实施Google针对滑块的设计指南 [英] Implementation of Google design guidelines for Sliders

问题描述

昨天我在Android中寻找滑块，并通过Google搜索找到了该网站:

Yesterday I was looking for sliders in Android and found this website with the Google search: https://material.io/guidelines/components/sliders.html#sliders-discrete-slider

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

I know that I can use a SeekBar in Android to implement sliders. However, Google seems to have very nice examples of discrete sliders but I cannot find any code examples.

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

I already implemented a normal SeekBar that is looking like this:

如何使它看起来像这样?

How can I make it look like this?

(差异:当我移动滑块时，不会有大的下降来显示当前值)

(Difference: When I move my slider, there is no big drop that shows the current value)

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

I think I might just have missed the code documentation for these design guidelines. Does anyone know where to find it? Or is the design difference because I got Android 5.0.2 on my phone?

推荐答案

现在您可以使用官方的

Now you can use the official Slider in Material 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).

NOTE: it requires the version 1.2.0 (currently 1.2.0-beta01) of the library.

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

If you want to customize the tooltip shape with a circle marker instead of the default label you can use the labelStyle attribute:

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

这篇关于实施Google针对滑块的设计指南的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！