Урок на Android Studio: выпадающий список Spinner на Kotlin

Выпадающие списки встречаются на каждом шагу: выбор страны, города, категории товара. В Android за них отвечает компонент Spinner. Он экономит место на экране и даёт пользователю возможность выбрать один вариант из нескольких. Сегодня на занятии в Android Studio мы разберём, как добавить Spinner на экран, наполнить его данными и написать обработку выбора на Kotlin. Этот урок для начинающих покажет, как сделать удобный интерфейс для любых списков, состоящих из нескольких пунктов.


Что такое Spinner

Spinner — это стандартный элемент Android, который выглядит как поле с треугольником в правой части. При нажатии на него раскрывается всплывающий список с доступными вариантами, из которых можно выбрать только один. После выбора список сворачивается, а выбранное значение отображается в поле. Spinner экономит место по сравнению с RadioGroup, особенно когда вариантов много.

Компонент работает по принципу адаптера: вы подготавливаете данные (строки, объекты), создаёте адаптер и прикрепляете его к Spinner. В ответ на выбор система вызывает слушатель, где можно выполнить нужное действие.


Размещаем Spinner в разметке

В файле activity_main.xml создайте вертикальный LinearLayout и добавьте Spinner с id. Рядом можно разместить 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">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tvSelected"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:textSize="20sp" />
</LinearLayout>

Заполняем Spinner данными

В MainActivity.kt подготовим список строк и создадим ArrayAdapter — самый простой адаптер для отображения текстовых элементов. Он принимает контекст, готовый макет строки (можно взять системный) и список данных.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val spinner = findViewById<Spinner>(R.id.spinner)
        val tvSelected = findViewById<TextView>(R.id.tvSelected)

        val cities = listOf("Москва", "Санкт-Петербург", "Казань", "Сочи", "Новосибирск")

        val adapter = ArrayAdapter(
            this,
            android.R.layout.simple_spinner_item,
            cities
        )
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        spinner.adapter = adapter
    }
}

Метод setDropDownViewResource задаёт внешний вид выпадающих пунктов, а simple_spinner_item — как выглядит выбранный элемент в закрытом состоянии. Системные макеты подходят для большинства задач, но при желании их можно заменить на свои.


Обрабатываем выбор пользователя

Чтобы узнать, какой пункт выбрал пользователь, используем onItemSelectedListener. Он содержит два метода: onItemSelected (элемент выбран) и onNothingSelected (ничего не выбрано, что случается редко). В первом методе получаем позицию и сам объект из списка.

spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
        val selectedCity = cities[position]
        tvSelected.text = "Вы выбрали: $selectedCity"
        Toast.makeText(this@MainActivity, "Выбран $selectedCity", Toast.LENGTH_SHORT).show()
    }

    override fun onNothingSelected(parent: AdapterView<*>?) {
        tvSelected.text = "Ничего не выбрано"
    }
}

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


Программная установка значения

Иногда нужно заранее выбрать определённый пункт, например, загруженный из настроек. Для этого используется метод setSelection(position). Он установит Spinner на нужную позицию и вызовет слушатель.

// выбрать третий элемент (Казань)
spinner.setSelection(2)

Если слушатель уже установлен, он сработает, и интерфейс обновится.


Стилизация Spinner

Стандартный Spinner выглядит нейтрально, но его можно настроить под дизайн приложения. Цвет фона, текста и выпадающего списка меняются через XML-атрибуты или программно. Например, чтобы изменить фон, создайте файл res/drawable/spinner_background.xml с формой и подключите его через android:background="@drawable/spinner_background".

<Spinner
    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/spinner_background"
    android:popupBackground="@android:color/white" />

Полезные мелочи

  • Используйте кастомные адаптеры для объектов. Если нужно показать не просто строку, а, например, название и иконку, создайте свой макет элемента списка и унаследуйте BaseAdapter или используйте ArrayAdapter с переопределённым getView.
  • Не забывайте про начальное значение. По умолчанию Spinner показывает первый элемент. Если нужно показать подсказку «Выберите город», добавьте в начало списка фиктивный элемент с соответствующим текстом и отключите его выбор.
  • Тестируйте на разных экранах. На планшетах выпадающий список может выглядеть иначе, чем на телефонах. Проверяйте, что текст не обрезается и кнопки достаточно крупные.

Что мы освоили

В этом уроке в Android Studio на языке Kotlin вы освоили компонент Spinner, который предоставляет пользователю удобный способ выбрать один из нескольких вариантов. Вы изучили, как создать выпадающий список, заполнить его данными с помощью ArrayAdapter, обработать выбор и настроить внешний вид. Теперь вы можете легко добавить в ваше приложение возможность выбора города, категории или любых других параметров, не занимая много места на экране. Попробуйте заменить системный макет на индивидуальный с иконками — это станет отличным упражнением для закрепления материала.

Добавлен: