Как сделать раскрывающийся список android studio

Обновлено: 05.07.2024

Рисунок 1. Виджет RecyclerView. Рисунок 2. Список с RecyclerView.

Чтобы использовать виджет RecyclerView, вы должны установить адаптер и layout менеджер. Чтобы создать адаптер, унаследуйтесь от класса RecyclerView.Adapter. Детали реализации зависят от особенностей вашего набора данных типа views. Для получения дополнительной информации посмотрите примеры ниже.

Layout менеджер располагает элементы view в RecyclerView и определяет, когда снова использовать элементы view, которые больше не видны пользователю. Для повторного использования view, layout менеджер может попросить адаптер заменить содержимое view другими элементами из набора данных. Таким образом повторное использование view повышает производительность путем избежания создания ненужных view или выполнения затратного поиска findViewById().

Элементы выбора позволяют пользователю выбрать из группы допустимых объектов тот, с которым будет совершено действие. Элементы выбора применяются также для действий по настройке. Распространенными элементами выбора являются флажки и списки.

Раньше использование элементов управления выбором не приводило к немедленному выполнению действий - требовалась еще и активация командного элемента. Сейчас возможны оба варианта. Если желательно дать пользователю возможность несколько раз осуществить выбор перед выполнением действия, следует создать явный командный элемент управления (кнопку). Если же пользователю полезно сразу видеть результат своих действий, и эти действия легко отменить, разумно сделать так, чтобы элемент выбора играл также и роль командного элемента.

Флажки

Назначение флажка очевидно. Щелкнув по флажку, пользователь немедленно увидит появившуюся галочку. Флажок прост, нагляден и изящен, однако основан на тексте. Качественный текст может исключить возможность неоднозначного толкования флажка. Однако этот же поясняющий текст вынуждает пользователя замедляться для прочтения, а также занимает значительное экранное пространство.

Традиционно флажки имеют квадратную форму. Не забывайте, что пользователи распознают визуальные объекты по форме, и квадратная форма флажков - важный стандарт.

Выключатели

Существует возможность сделать флажок более наглядным, применив в качестве основы кнопку-значок, которая может фиксироваться в нажатом состоянии. Такой элемент называется выключателем ( рис. 5.5).

Состояние выключателя остается неизменным до следующего щелчка. Выключатели экономно расходуют экранное пространство: они занимают меньше места, потому что их назначение описывается не с помощью текста, а посредством визуальных средств. Разумеется, это означает, что им присущ тот же недостаток обычных кнопок-значков - неоднозначность пиктограмм.

Триггеры

Кнопки-триггеры - это разновидность элементов управления. Они призваны экономить экранное пространство, к сожалению, ценой значительной дезориентации пользователя. Классический пример - размещение на одной кнопке функций воспроизведения и паузы для музыкального проигрывателя. Подводным камнем такого подхода является то, что элемент управления можно ошибочно посчитать индикатором состояния проигрывателя ("на паузе" или "идет воспроизведение"). Элемент управления может служить либо индикатором состояния, либо кнопкой переключения состояний, но не тем и другим одновременно ( рис. 5.6).

Рис. 5.6. Если кнопка говорит "ВКЛЮЧЕНО", когда находится в состоянии "выключено", то непонятно, в каком же состоянии находится кнопка. Если кнопка говорит "ВЫКЛЮЧЕНО", когда находится в состоянии "выключено", тогда возникает вопрос, где искать кнопку "ВКЛЮЧЕНО"?

Радиокнопки

Радиокнопки внешне похожи на флажки ( рис. 5.7), но являются взаимоисключающими, то есть выбор одного из вариантов автоматически аннулирует предыдущий выбор. В каждый момент времени может быть выбрана только одна кнопка. Радиокнопки всегда объединяются в группы из двух или более радиокнопок, причем в каждой группе одна радиокнопка всегда выбрана. Радиокнопки всегда круглые по той же причине, по которой флажки всегда имеют квадратную форму: именно такими они были изначально.

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

Кнопка-значок преобразовала радиокнопки так же, как флажки, заменив их в основном интерфейсе приложения. Если два или более выключателя объединены схемой взаимного исключения - так, чтобы в каждый момент мог быть включен лишь один из них, - они ведут себя точно так же, как радиокнопки. Так образуются радиокнопки со значками. Элементы управления цветом в Adobe Photoshop - хороший пример радиокнопок со значками ( рис. 5.8).

Рис. 5.8. Элементы управления цветом в Android-приложении Adobe Photoshop представляют собой группу радиокнопок со значками

Списки

Элементы управления типа "список" позволяют осуществлять выбор из конечного множества текстовых строк, каждая из которых представляет команду, объект или признак. Подобно радиокнопкам, списки - мощный инструмент, упрощающий взаимодействие за счет устранения возможности неправильного выбора. Списки - это небольшие текстовые области с полосой прокрутки, автоматически подключаемой при необходимости ( рис. 5.9). Пользователь может выбрать единственную строку текста, нажав на нее.

Раскрывающийся список - повсеместно встречающийся вариант обычного списка. Он показывает лишь выбранный элемент в одну строку, но если нажать на стрелку, открываются другие варианты выбора.

Элемент управления представление в виде списка предоставляет возможность сопровождать каждую строку текста пиктограммой. Такая возможность весьма полезна - существует множество ситуаций, когда можно упростить работу пользователя, располагая графические идентификаторы рядом со строками важных вариантов выбора ( рис. 5.10).

Рис. 5.10. Элемент управления типа "список" с пиктограммами в Android-приложении, позволяющий визуально оценивать погоду в различных городах

Комбо-списки и комбо-кнопки

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

Комбо-список представляет собой сочетание списка и поля редактирования ( рис. 5.11).

Рис. 5.11. Раскрывающееся поле со списком в Android-приложении ABBYY Translator позволяет выбрать нужный язык из списка

Вариант с раскрывающимся списком значительно экономит экранное пространство. Комбо-список хорошо подходит для тех случаев, когда необходимо организовать выбор единственного объекта.

Список ListView в Android Studio, с помощью ArrayAdapter позволяет отображать информацию из массивов в мобильном приложении.

Новый проект "My ListView"

В Android Studio создадим новый проект, назовем его "My ListView", тип активности Empty, Layout Name - main. В maim.xlm добавим RelativeLayout , и переместим в него TextView. Для TextView очистим значение android:text, и присвоим android:id="@+id/txt". Ниже расположим ListView с android:id="@+id/lv". Временно введем в TextView какой-нибудь текст, что бы установить его выше ListView.

Массив в strings.xml

Создадим строковый массив в файле strings.xml, с названием day_of_weeks, а в его значения занесем дни недели:

После сохраним и закроем strings.xml.

Способ первый

Перейдем в MainActivity.java, и определим ListView в переменную lvMain:

Объявим в переменную txt наш TextView:

Создадим ArrayAdapter для связи массива day_of_weeks с ListView:

Свяжем listView с адаптером:

Запустим приложение в эмуляторе. ListView отображает содержимое массива(дни недели) построчно.

Способ второй.

Также массив можно указать и в файле MainActivity, рассмотрим этот вариант.

Выше функции onCreate объявим строковый массив day_of_weeks:

а в файле strings.xml, для чистоты эксперимента, удалим созданный ранее day_of_weeks.

Изменим код ArrayAdapter на следующий:

Снова запустим приложение в эмуляторе, код работает аналогично предыдущему.

Событие onItemClick - нажатия на пункт списка

Напишем обработчик нажатия на пункт элемента ListView, что бы TextView показывал текст нажатого пункта:

Функция setOnItemClickListener элемента lvMain при событии onItemClick передает в txt с помощью функции setText значение массива day_of_weeks по его позиции.

При запуске в эмуляторе Android по нажатию на список в надписи отображается название нажатого пункта.

Полный текст main.xml

Полный текст MainActivity.java

В этом видео показано как создать список ListView и использовать ArrayAdapter в Android Studio:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!

Как лучше организовать выпадающий список в EditText при вводе текста, подобный полю для ввода url в браузерах (когда внизу поля всплывают подходящие url'ы)?

Есть ли такой функционал в стандартном EditText ?

Лучшее, что пришло в голову, это добавить обычный ListView в Layout ниже EditText , и при вводе текста показывать/скрывать его.

1 ответ 1

Воспользуйтесь классом AutoCompleteTextView . Это наследник EditText , специально предназначенный для вашей цели. В сети можно найти много примеров его использования. Краткий пример с официального сайта

Всё ещё ищете ответ? Посмотрите другие вопросы с метками android android-sdk android-ui или задайте свой вопрос.

Предпосылки

Чтобы следовать, вам нужно:

последняя версия Android Studio
устройство или эмулятор под управлением Android API уровня 23 или выше

1. Добавьте RecyclerView Android-зависимости

Чтобы добавить библиотеку RecyclerView Selection в проект Android Studio, укажите следующие зависимости implementation в файле build.gradle модуля app :

2. Создайте список

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

Чтобы сохранить данные каждого элемента списка, создайте класс данных Kotlin с именем Person и добавьте к нему два свойства: name и phone .

Теперь вы можете продолжить и создать список объектов Person в вашей основной деятельности.

3. Добавьте Recycler View в макет

Мы, конечно, будем использовать виджет RecyclerView для отображения списка. Поэтому добавьте в XML-файл макета вашей основной деятельности.

Чтобы указать расположение элементов списка, создайте новый файл XML и назовите его list_item.xml . Внутри него добавьте два виджета TextView : один для отображения имени, а другой для отображения номера телефона. Если вы используете элемент LinearLayout для позиционирования виджетов, содержимое файла XML должно выглядеть следующим образом:

4. Создайте Держатель Представления

Вы можете думать о держателе представления как об объекте, который содержит ссылки на представления, представленные в макете элементов списка. Без этого виджет RecyclerView не сможет эффективно отображать элементы списка.

На данный момент вам нужен держатель представления, который содержит два виджета TextView вы создали на предыдущем шаге. Поэтому создайте новый класс, который расширяет класс RecyclerView.ViewHolder , и инициализируйте ссылки на оба виджета внутри него. Вот как:

Кроме того, для дополнения RecyclerView Selection требуется метод, который он может вызывать для уникальной идентификации выбранных элементов списка. Этот метод в идеале принадлежит самому владельцу вида. Кроме того, он должен возвращать экземпляр класса ItemDetailsLookup.ItemDetails . Поэтому добавьте следующий код в держатель представления:

Теперь вы должны переопределить два абстрактных метода, присутствующих в классе ItemDetails . Начните с переопределения getPosition() и возврата свойства adapterPosition держателя представления внутри него. Свойство adapterPosition обычно представляет собой не что иное, как индекс элемента списка.

Затем переопределите метод getSelectionKey() . Этот метод должен возвращать ключ, который можно использовать для уникальной идентификации элемента списка. Для простоты давайте просто itemId свойство itemId держателя представления.

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

5. Обрабатывать прикосновения пользователя

Чтобы дополнение RecyclerView Selection работало корректно, каждый раз, когда пользователь касается виджета RecyclerView , необходимо преобразовать координаты касания в объект ItemDetails .

Создайте новый класс, который расширяет класс ItemDetailsLookup , и добавьте в него конструктор, который может принимать виджет RecyclerView в качестве аргумента. Обратите внимание, что, поскольку класс является абстрактным, Android Studio автоматически сгенерирует заглушку для своего абстрактного метода.

Как видно из приведенного выше кода, метод getItemDetails() получает объект MotionEvent . findChildViewUnder() координаты X и Y события в метод findChildViewUnder() , вы можете определить представление, связанное с элементом списка, к findChildViewUnder() прикоснулся пользователь. Чтобы преобразовать объект View объект ItemDetails , все, что вам нужно сделать, это вызвать метод getItemDetails() . Вот как:

6. Создайте адаптер

Теперь вам понадобится адаптер, который может связать ваш список с вашим виджетом RecyclerView . Чтобы создать его, создайте новый класс, который расширяет класс RecyclerView.Adapter . Поскольку адаптеру необходим доступ к списку и контексту вашей деятельности, новый класс должен иметь конструктор, который может принимать оба аргумента в качестве аргументов.

Важно, чтобы вы явно указали, что каждый элемент этого адаптера будет иметь уникальный стабильный идентификатор типа Long . Лучшее место для этого — внутри блока init .

Кроме того, чтобы иметь возможность использовать позицию элемента в качестве его уникального идентификатора, вам необходимо переопределить метод getItemId() .

Поскольку класс RecyclerView.Adapter является абстрактным, теперь вам придется переопределить еще три метода, чтобы сделать ваш адаптер пригодным для использования.

Сначала переопределите метод getItemCount() чтобы вернуть размер списка.

Затем переопределите метод onCreateViewHolder() . Этот метод должен возвращать экземпляр класса держателя представления, который вы создали ранее в этом руководстве. Чтобы создать такой экземпляр, вы должны вызвать конструктор класса и передать ему раздутый макет элементов списка. Чтобы надуть макет, используйте метод LayoutInflater класса LayoutInflater . Вот как:

Наконец, переопределите метод onBindViewHolder() и соответствующим образом инициализируйте свойство text обоих виджетов TextView присутствующих в держателе представления.

7. Показать список

На данный момент, у вас есть почти все, что вам нужно, чтобы сделать свой список Однако вы все равно должны указать, как вы хотите, чтобы элементы списка были расположены. А пока давайте расположим их один под другим, используя экземпляр LinearLayoutManager .

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

Добавьте следующий код к вашей основной деятельности:

Наконец, назначьте новый экземпляр вашего adapter свойству adapter виджета RecyclerView .

Если вы запустите свое приложение сейчас, вы сможете увидеть список.

8. Создайте трекер выбора

Виджет RecyclerView прежнему не позволяет выбирать какие-либо элементы. Чтобы включить выбор из нескольких элементов, вам понадобится объект SelectionTracker в вашей деятельности.

Вы можете инициализировать трекер, используя класс SelectionTracker.Builder . Его конструктору необходимо передать идентификатор выбора, ваш виджет RecyclerView , ключевой поставщик, класс поиска сведений о вашем элементе и стратегию хранения.

Вы можете использовать любую строку в качестве идентификатора выбора. В качестве ключевого поставщика вы можете использовать экземпляр класса StableIdKeyProvider .

Библиотека RecyclerView Selection предлагает множество стратегий хранения, каждая из которых гарантирует, что выбранные элементы не отменяются при повороте устройства пользователя или когда система Android закрывает ваше приложение во время перерыва в ресурсах. На данный момент, поскольку тип ваших клавиш выбора — Long , вы должны использовать объект StorageStrategy типа Long .

Когда Builder будет готов, вы можете вызвать его withSelectionPredicate() чтобы указать, сколько элементов вы хотите разрешить пользователю выбирать. Для поддержки выбора нескольких элементов в качестве аргумента метода необходимо передать объект SelectionPredicate возвращаемый методом createSelectAnything() .

Соответственно, добавьте следующий код в метод onCreate() вашей деятельности:

Читайте также: