Иногда пользователю нужно не просто включить или выключить опцию, а выбрать значение из плавного диапазона: громкость звука, яркость экрана, размер шрифта. Для таких задач в Android предусмотрен SeekBar — горизонтальная полоса с бегунком, который можно двигать пальцем. Сегодня на занятии в Android Studio мы разберём, как добавить этот элемент на экран и написать обработку на языке Kotlin. Этот урок для начинающих покажет, как легко связать ползунок с текстовым значением и реагировать на его перемещение.
Что такое SeekBar и зачем он нужен
SeekBar — это наследник ProgressBar, который даёт пользователю возможность менять значение вручную. Он состоит из шкалы и бегунка, который можно перемещать касанием. Основные атрибуты: max (максимальное значение), progress (текущее значение) и необязательный min (доступен с API 26). В отличие от простого индикатора загрузки, SeekBar генерирует событие при каждом сдвиге, позволяя приложению мгновенно реагировать.
Этот компонент часто используют в медиаплеерах, настройках яркости, будильниках и любых местах, где нужен плавный выбор числа. Он прост в использовании и не требует дополнительных библиотек.
Размещаем SeekBar в разметке
Создайте новый проект или используйте существующий. В файле activity_main.xml внутри LinearLayout добавьте SeekBar и TextView для отображения выбранного значения. По желанию можно добавить подписи для минимума и максимума.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="24dp"
android:gravity="center">
<TextView
android:id="@+id/tvLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Громкость: 0%"
android:textSize="20sp" />
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0"
android:layout_marginTop="16dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0%" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="100%"
android:gravity="end" />
</LinearLayout>
</LinearLayout>
Обработка изменения значения в Activity
В MainActivity.kt получим ссылки на SeekBar и TextView. Установим слушатель OnSeekBarChangeListener, который требует реализации трёх методов: onProgressChanged (вызывается при перемещении бегунка), onStartTrackingTouch (пользователь начал двигать) и onStopTrackingTouch (отпустил бегунок).
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val seekBar = findViewById<SeekBar>(R.id.seekBar)
val tvLabel = findViewById<TextView>(R.id.tvLabel)
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
tvLabel.text = "Громкость: $progress%"
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {
// можно показать дополнительную информацию
}
override fun onStopTrackingTouch(seekBar: SeekBar?) {
// например, применить значение громкости
}
})
}
}
Параметр fromUser в onProgressChanged позволяет отличить ручное изменение от программного. Если значение меняется кодом, этот флаг равен false — можно не реагировать повторно.
Установка значения программно
Иногда нужно изменить положение бегунка из кода, например, загрузить сохранённое значение. Для этого используется свойство progress. Слушатель при этом сработает, поэтому интерфейс обновится.
// загрузить сохранённую громкость
val savedVolume = 50
seekBar.progress = savedVolume
Стилизация SeekBar
Стандартный SeekBar можно стилизовать через XML-атрибуты или в коде. Например, чтобы изменить цвет полосы и бегунка, создайте файл res/drawable/seekbar_style.xml и укажите его через android:progressDrawable. Для быстрой кастомизации можно изменить android:thumbTint и android:progressTint:
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="#FF6200EE"
android:progressTint="#FF6200EE" />
Полезные советы
- Используйте целые числа для max. По умолчанию SeekBar работает с целыми значениями. Если нужны дробные (например, 0.5), устанавливайте max с запасом и делите результат в коде.
- Не забывайте про доступность. Добавьте
android:contentDescriptionс описанием назначения ползунка для скринридеров. - Используйте дискретность при необходимости. Если нужны только целые шаги (например, 0, 25, 50, 75, 100), установите
android:max="4"и умножайте на 25 в коде.
Коротко о главном
Этот урок в Android Studio на языке Kotlin показал, как использовать SeekBar для выбора значений из диапазона. Вы добавили ползунок на экран, настроили слушатель изменений и научились отображать текущее значение в текстовой метке. Теперь вы можете встроить в своё приложение регулятор громкости, яркости или любого другого параметра. Попробуйте реализовать сохранение позиции SeekBar в SharedPreferences — это хорошая практика для закрепления материала.