Компонент Slider из библиотеки материального дизайна

Началось с небольшой детективной истории — разглядывая сайт Material Design, наткнулся на страницу Sliders. В описании говорилось, что данный компонент доступен для Android и даже дана ссылка на Гитхаб. Меня это немножко удивило, так как я ни разу о нём не слышал. Перехожу по ссылке — на Гитхабе говорится, что компонент пока находится в активной разработке и даны куцые примеры на Java. «В этих ваших интернетах» упоминания о Slider не нашёл. В официальной документации по библиотеке тоже нет никаких упоминаний.

К счастью, есть исходники.

Любопытство взяло верх и я стал самостоятельно копаться.

По своему внешнему виду 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 отказывалась показывать экран активности в режиме «Design», пришлось перезапускать студию. После этого всё нормализовалось.

Код для класса активности.

// Если этот код работает, его написал Александр Климов, // а если нет, то не знаю, кто его писал. // 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 {     "Кот" } 

Новый элемент показался интересным и вполне пригодным для использования в проекте.