android - 具有最高值(value)的自定义搜索栏

Question

我正在尝试为我的应用制作一些 Seekbar 作为距离值。我喜欢它看起来像这样(图片取自 - link ):

有人可以展示一个简单的例子来说明如何制作这样的东西吗？

我知道我可以使用来自 Github 的“现成的”Seekbars，但我正在尝试理解这个概念，以便我可以进一步设计它。

谢谢

Answer 1

通过 Google 提供的 Material 组件库版本 1.2.0，您可以使用 Slider组件。

只需在您的布局中添加:

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


    <com.google.android.material.slider.Slider
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:labelBehavior="withinBounds"
        android:value="7"
        android:valueFrom="0"
        android:valueTo="10"
        .../>

</LinearLayout>

您可以使用这些属性自定义颜色:

<com.google.android.material.slider.Slider
    app:activeTrackColor="@color/primaryDarkColor"
    app:inactiveTrackColor="@color/primaryLightColor"
    app:thumbColor="@color/primaryDarkColor"
    .../>

或者您可以使用带有 materialThemeOverlay 属性的自定义样式覆盖默认颜色:

    <com.google.android.material.slider.Slider
        style="@style/Custom_Slider_Style"

与:

  <style name="Custom_Slider_Style" parent="Widget.MaterialComponents.Slider">
    <item name="materialThemeOverlay">@style/slider_overlay</item>
  </style>

  <style name="slider_overlay">
    <item name="colorPrimary">@color/...</item>
    <item name="colorOnPrimary">@color/...</item>
  </style>

或者在布局中使用 android:theme 属性:

<com.google.android.material.slider.Slider
    android:theme="@style/slider_overlay"
    ../>

例子:

如果你想自定义tooltip形状你可以使用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>