Компонент 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 {
        "Кот"
    }
    



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

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 2

      0
      Прикольная View. Только не до конца понятно её применение
        0

        Нет поддержки вертикальной ориентации слайдера… и судя по исходникам даже не стали закладывать:(

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое