android - 具有最高价值的自定义搜索栏

Question

我正在尝试为我的应用程序制作一些 Seekbar 作为距离值。我喜欢它看起来像这样（图片来自 -链接）：

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

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

谢谢

Answer 1

通过 Google 提供的 Material Components Library 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在布局中使用 attr：

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

例子：

如果要自定义工具提示形状，可以使用以下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>