24

昨天我正在寻找 Android 中的滑块，并通过谷歌搜索找到了这个网站：https ://material.io/guidelines/components/sliders.html#sliders-discrete-slider

我知道我可以SeekBar在 Android 中使用 a 来实现滑块。然而，谷歌似乎有非常好的离散滑块示例，但我找不到任何代码示例。

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

Android中的焦点SeekBar

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

来自 Google 设计指南的 Android 中的 Focused SeekBar

（区别：当我移动滑块时，没有显示当前值的大下降）

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

4

4 回答 4

17

可悲的是，谷歌只是提供了它的外观，但 android 支持库似乎没有提供类:(

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

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

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

于 2015-09-08T16:54:40.700 回答
10

现在你可以使用官方Slider的材料组件库了。

只需使用类似的东西：

<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>
于 2019-10-22T07:42:01.827 回答
3

AnderWeb 的离散搜索栏有一些问题。而对于另一个（MDL），您可能不想只为一个离散的搜索栏/滑块编译整个材料设计库。

但是有一个不错的 github 存储库，您可能会发现它很有用：BubbleSeekBar

我试图为同样的问题找到一个很好的解决方案。就我而言，我还试图找到一个始终显示气泡的搜索栏。经过两个小时的研究，我找到了 BubbleSeekBar 库，它提供了你能想到的每一个属性。很难找到这个库，因为自述文件甚至没有使用“材料”这个词。

编辑：六个月后，现在有另一个不错的 Discrete Seek Bar 存储库，您可能会发现它很有用。IndicatorSeekBar 似乎涵盖了所有内容，除了一些问题。你可以在这里查看。

于 2017-12-15T14:43:59.347 回答
1

连续滑块 连续滑块允许用户进行不需要特定值的有意义的选择。

<com.google.android.material.slider.Slider
                    android:id="@+id/slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    android:value="8.09"
                    android:valueFrom="0.0"
                    android:valueTo="11.0" />

离散滑块 离散滑块在按下拇指时显示数值标签，允许用户输入精确值。

<com.google.android.material.slider.RangeSlider
                    android:id="@+id/range_slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    app:values="@array/initial_slider_values"
                    android:valueFrom="0.0"
                    android:valueTo="10.0"
                  />
 
   <!--array.xml-->
   <array name="initial_slider_values">
      <item>4.0</item>
      <item>8.0</item>
   </array>
于 2020-07-09T04:35:18.037 回答