Slider

Компонент Slider представляет шкалу с некоторым диапазоном числовых значений, из которых мы можем выбрать одно из значений. Типичный прример подобной шкалы - элемент для установки громкости.

Функция компонента имеет следующее определение:

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: @IntRange(from = 0) Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

Параметры компонента:

• value: текущее значение слайдера в виде объекта Float

• onValueChange: функция обработки изменения введенного значения. Представляет функцию типа (Float) -> Unit, в которую в качестве параметра передается новое значение

• modifier: объект типа Modifier, который задает модификаторы компонента

• enabled: устанавливает, будет ли слайдер доступен для ввода. Представляет значение типа Boolean. По умолчанию равно true, то есть поле доступно для ввода

• valueRange: устанавливает диапазон достуных для выбора значений в виде объекта ClosedFloatingPointRange<Float>. По умолчанию равно диапазону 0f..1f.

• steps: количество делений на диапазоне valueRange. Если это значение больше 0, то значения равномено распределяются по шкале, и мы можем выбрать одно из этих делений. Если это значение равно 0, то мы можем выбрать любое значение на шкале. Значение по умолчанию - 0

• onValueChangeFinished: устанавливает функцию типа () -> Unit, которая вызывается после завершения установки значения слайдера. Эта функция позволяет указать, что пользователь завершил изменение значения слайдера. Значение по умолчанию - null

• colors: объект SliderColors, который задает цвета для поля ввода. Значение по умолчанию - SliderDefaults.colors()

• interactionSource: объект MutableInteractionSource, который задает поток взаимодействий для поля ввода.

Определим простейший слайдер:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.material3.Slider

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var sliderPosition by remember{mutableStateOf(0f)}
            Column{
                Text(text = "Текущее значение: ${sliderPosition}", fontSize = 22.sp)
                Slider(
                    value = sliderPosition,
                    onValueChange = { sliderPosition = it }
                )
            }
        }
    }
}

В данном случае для хранения значения слайдера определена переменная sliderPosition. По умолчанию она равна 0.

Для слайдера необходимо задать как минимум два параметра: value и onValueChange. Параметр value привязан к значению переменной sliderPosition, а в функции onValueChange получаем новое значение и переустанавливаем значение переменной sliderPosition.

В примере выше не указан диапазон, поэтому по умолчанию мы можем выбирать значения на диапазоне от 0 до 1. Причем, так как не указано количество делений, это может быть любое значение, напимер, 0.51574075. Теперь явно укажем диапазон и количество делений:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.material3.Slider

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var sliderPosition by remember{mutableStateOf(0f)}
            Column{
                Text(text = "Текущее значение: ${sliderPosition}", fontSize = 22.sp)
                Slider(
                    value = sliderPosition,
                    valueRange = 0f..10f,
                    steps = 9,
                    onValueChange = { sliderPosition = it }
                )
            }
        }
    }
}

В данном случае количество делений - 9, а диапазон - от 1 до 10. Поэтому на слайдере мы можем выбрать любое число из диапазона [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Цветовая гамма

По умолчанию слайдер использует цвета, устанавливаемые компонентом SliderDefaults.colors:

@Composable
fun colors(
    thumbColor: Color = Color.Unspecified,
    activeTrackColor: Color = Color.Unspecified,
    activeTickColor: Color = Color.Unspecified,
    inactiveTrackColor: Color = Color.Unspecified,
    inactiveTickColor: Color = Color.Unspecified,
    disabledThumbColor: Color = Color.Unspecified,
    disabledActiveTrackColor: Color = Color.Unspecified,
    disabledActiveTickColor: Color = Color.Unspecified,
    disabledInactiveTrackColor: Color = Color.Unspecified,
    disabledInactiveTickColor: Color = Color.Unspecified
): SliderColors

Параметры компонента:

• thumbColor: цвет ползунка

• activeTrackColor: цвет шкалы до ползунка

• activeTickColor: цвет делений шкалы до ползунка

• inactiveTrackColor: цвет шкалы после ползунка

• inactiveTickColor: цвет делений шкалы после ползунка

• disabledThumbColor: цвет ползунка, когда слайдер недоступен для взаимодействия

• disabledActiveTrackColor: цвет шкалы до ползунка, когда слайдер недоступен для взаимодействия

• disabledInactiveTrackColor: цвет шкалы после ползунка, когда слайдер недоступен для взаимодействия

• disabledActiveTickColor: цвет делений шкалы до ползунка, когда слайдер недоступен для взаимодействия

• disabledInactiveTickColor: цвет делений шкалы после ползунка, когда слайдер недоступен для взаимодействия

Изменим цветовую гамму слайдера:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var sliderPosition by remember{mutableStateOf(0f)}
            Column{
                Text(text = "Текущее значение: ${sliderPosition}", fontSize = 22.sp)
                Slider(
                    value = sliderPosition,
                    valueRange = 0f..10f,
                    steps = 9,
                    onValueChange = { sliderPosition = it },
                    colors = SliderDefaults.colors(
                        thumbColor = Color(0xFFB71C1C),
                        activeTrackColor = Color(0xFFEF9A9A),
                        inactiveTrackColor = Color(0xFFFFEBEE),
                        inactiveTickColor = Color(0xFFEF9A9A),
                        activeTickColor = Color(0xFFB71C1C)
                    )
                )
            }
        }
    }
}