🤽🏿 🔱 👺 物料设计库滑块组件 👨🏾‍🤝‍👨🏼 🤜🏾 🙇🏻

它始于一个小的侦探故事-在Material Design网站上，我碰到了Sliders页面。描述说该组件可用于Android，甚至提供了指向github的链接。这让我有些惊讶，因为我从未听说过他。我跟随链接-在Github上说该组件仍在积极开发中，并给出了一些Java的示例。找不到Slider的 “在这些您的Internet中” 。也没有对官方图书馆文档的引用。

幸运的是，这里有源代码。

好奇心盛行，我开始自己研究它。

在外观上，Slider与标准Seekbar相似。但是有细微的差别。为了看到它们，我绘制了一个简单的项目。在屏幕上添加几个滑块，单击按钮，然后查看正在使用的组件。

我使用了该库的最新版本。

implementation 'com.google.android.material:material:1.2.0-alpha06'

标记：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="New value"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:value="8.09"
        android:valueFrom="0.0"
        android:valueTo="21.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:valueFrom="100.0"
        android:valueTo="100000.0"
        android:stepSize="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/slider" />

</androidx.constraintlayout.widget.ConstraintLayout>

为了以防万一，我会注意到，当我手动注册代码时，Android Studio拒绝以“设计”模式显示活动屏幕，我不得不重新启动Studio。之后，一切恢复正常。

活动类的代码。

//    ,    ,
//   ,   ,   .
// http://developer.alexanderklimov.ru/android/

package ru.alexanderklimov.as36

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            slider.value = 5.0F
        }

        slider.values = listOf(1F, 4F, 6F)

        slider.addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
            override fun onStartTrackingTouch(slider: Slider) {
                println("Start Tracking Touch")
            }

            override fun onStopTrackingTouch(slider: Slider) {
                println("Stop Tracking Touch")
            }
        })

    }
}

我们开始看一下结果。

引起您注意的第一件事是，我们可以通过slider.values设置多个滑块。它们表现独立，互不干扰。

第二个滑块通过android：stepSize属性设置了离散模式。您可能会注意到，在此模式下，轨道上会出现小点。

如果单击滑块，则会在顶部显示一个指示当前值的标牌。

以编程方式单击按钮可将滑块设置在第一个滑块的正确位置。请注意，在本例中，该组件将变成一个带有一个滑块的南瓜滑块，因为我们删除了值列表，仅保留了一个。

滑块具有多个侦听器。为了演示，我带来了其中之一-Slider.OnSliderTouchListener。

模具上的文字可以更改。当使用大量数字时，这很有用。然后，可以使用缩写选项来代替具有大量零的数字（百万，万亿等）。LabelFormatter接口负责此行为。还有一个帮助程序接口BasicLabelFormatter，该接口已经包含有用的大写缩写，例如9.1K而不是9100。

让我们乱七八糟，写一个三个字母的单词。

slider2.setLabelFormatter {
    ""
}

新元素似乎很有趣，并且非常适合在项目中使用。

物料设计库滑块组件

More articles: