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

Question

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

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

我知道我可以使用 "already made" 来自 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"
    ../>

示例：

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

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

Custom Seekbar with on top value

android

android-seekbar

material-components

material-components-android

android-slider