ExpandableListView
Компонент ExpandableListView является расширенным вариантом компонента ListView. Основное отличие — разворачивающий список второго уровня. Получается список в списке. Рассмотрим простейший вариант:
Сам по себе компонент не представляет интереса. Его необходимо заполнить данными. Переключимся в код активности и напишем следующее:
Сначала мы описываем массивы данных – это названия групп (Времена года) и названия элементов для них (месяцы).
Затем описываем коллекцию для групп, коллекции для элементов и Map для атрибутов.
В методе onCreate() заполняем groupData. Это коллекция групп. Каждая группа представляет собой Map. А в Map мы пишем необходимые нам атрибуты для каждой группы. В нашем случае, для каждой группы мы укажем всего один атрибут groupName — это название из массива groups.
Адаптер обычно использует layout-ресурс для отображения пункта списка. В нашем случае пунктами ExpandableListView являются и группа и элемент. В layout-ресурсе могут быть какие-либо TextView. Мы можем заполнить их значениями из атрибутов элементов или групп, которые собраны в Map. Для этого нам надо указать сначала имена атрибутов, которые хотим использовать, а затем идентификаторы TextView, в которые хотим поместить значения этих атрибутов.
Для связки атрибутов и TextView мы используем два массива:
- groupFrom – список имен атрибутов, которые будут считаны. В нашем случае – это groupName, который мы добавили к группе с помощью Map чуть выше в коде, когда собирали группы в groupData.
- groupTo – список ID View-элементов, в которые будут помещены считанные значения атрибутов. Наш используемый layout будет содержать TextView с >Два этих массива сопоставляются по порядку элементов. В итоге, в layout-ресурсе группы найдется элемент с ID = android.R.id.text1 и в него запишется текст из атрибута groupName. Тем самым мы получим отображение имени группы в списке.
Далее формируем коллекции элементов. Создаем общую коллекцию коллекций. А затем создаем коллекции элементов каждой группы. Принцип тот же, что и с группами – создаем Map и в него пишем атрибут monthName со значением равным имени элемента. Коллекцию элементов для каждой группы добавляем в общую коллекцию.
Формируем два массива для сопоставления TextView из layout и атрибутов элементов. Полностью аналогично, как выше мы уже проделали с группами. В итоге при отображении элемента, найдется TextView с ID = android.R.id.text1 и туда запишется текст из атрибута monthName. И мы увидим текст нашего элемента (месяца) в списке.
В конце кода создаем адаптер SimpleExpandableListAdapter и присваиваем его списку.
Параметры для адаптера:
- this – контекст
- groupData – коллекция групп
- android.R.layout.simple_expandable_list_item_1 – layout-ресурс, который будет использован для отображения группы в списке. Соответственно, запросто можно использовать свой layout-файл
- groupFrom – массив имен атрибутов групп
- groupTo – массив ID TextView из layout для групп
- childData – коллекция коллекций элементов по группам
- android.R.layout.simple_list_item_1 — layout-ресурс, который будет использован для отображения элемента в списке. Можно использовать свой layout-файл childFrom – массив имен атрибутов элементов
- childTo — массив ID TextView из layout для элементов
Layout simple_expandable_list_item_1, который мы использовали для отображения групп – это TextView с отступом от левого края, чтобы осталось место для кнопки раскрытия/сворачивания списка. Для эксперимента вы можете попробовать использовать для групп layout simple_list_item_1, который мы использовали для элементов. В этом случае текст будет пересекаться с кнопкой.
А вообще вы можете создать для элементов свою разметку, например, с тремя TextView. И к каждому элементу списка (Map) добавить еще по два атрибута. Далее указываете вашу разметку в конструкторе, формируете соответственно массивы childFrom и childTo чтобы сопоставить атрибуты и TextView, и получится, что каждый элемент группы содержит более подробную информацию.
ExpandableListView редко используется в составе разметки с другими элементами. Обычно такой список занимает весь экран, поэтому для подобных целей лучше использовать специальный класс ExpandableListViewActivity, который уже содержит в своём составе компонент ExpandableListView.
Размещение индикаторов групп в заданном месте
Вы можете указать другое расположение индикаторов групп, например, справа. Для этого используются методы setIndicatorBounds() или setIndicatorBoundsRelative():
В примере использованы «магические числа». Вам лучше самостоятельно вычислить нужные значения.
Собственные индикаторы
Для создания собственных индикаторов приготовьте файлы *.9.png в двух состояниях (обычный и раскрытый) и пропишите их в drawable-ресурсах.
Пропишите селектор в атрибуте groupIndicator.
Источник
Полный список
— обрабатываем события дерева-списка
Дерево-список строить мы умеем, теперь посмотрим, как с ним можно взаимодействовать. Нам предоставлена возможность обрабатывать следующие события: нажатие на группу, нажатие на элемент, сворачивание группы, разворачивание группы.
Создадим проект:
Project name: P0461_ExpandableListEvents
Build Target: Android 2.3.3
Application name: ExpandableListEvents
Package name: ru.startandroid.develop.p0461expandablelistevents
Create Activity: MainActivity
TextView для вывода информации и ExpandableListView.
В проекте, рядом с классом MainActivity создадим (не Activity) класс AdapterHelper. В него поместим код для заполнения списка, чтобы разгрузить MainActivity.java.
Код создания адаптера полностью заимствован с прошлого урока. Чтобы получить адаптер нам надо будет просто вызвать метод getAdapter.
У класса есть конструктор, через который мы передаем объекту ссылку на context. Context нам понадобится, чтобы создать адаптер. Адаптеру же в свою очередь context нужен, например, для доступа к LayoutInflater.
В конце класса находятся методы, которые возвращают нам названия групп и элементов из коллекций по номеру группы или номеру элемента. Для этого используем методы адаптера getGroup и getChild, приводим их к Map и извлекаем значение атрибута с именем компании или телефона.
Пишем код в MainActivity.java:
Благодаря классу AdapterHelper, код создания адаптера занял всего две строчки: создание объекта и вызов метода getAdapter. Далее присваиваем адаптер списку и добавляем обработчики:
Метод
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id), где
parent – ExpandableListView с которым работаем
v – View элемента
groupPosition – позиция группы в списке
childPosition – позиция элемента в группе
id – id элемента
Мы выводим в лог позицию и id. А в TextView сверху от списка выводим текст нажатого элемента и его группы, который получаем с помощью методов AdapterHelper.
Метод должен вернуть boolean. Если мы возвращаем true – это значит, мы сообщаем, что сами полностью обработали событие и оно не пойдет в дальнейшие обработчики (если они есть). Если возвращаем false – значит, мы позволяем событию идти дальше.
Метод
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id), где
parent – ExpandableListView с которым работаем
v – View элемента
groupPosition – позиция группы в списке
id – id группы
Мы выводим в лог позицию и id группы.
Этот метод также должен вернуть boolean. Мы будет возвращать true, если позиция группы = 1, иначе — false. Т.е. для этой группы мы блокируем дальнейшую обработку события. Далее увидим, что нам это даст.
Метод
onGroupCollapse(int groupPosition), где groupPosition – позиция группы, которую свернули
Метод
onGroupExpand(int groupPosition), где groupPosition – позиция группы, которую развернули
И в конце кода MainActivity мы разворачиваем группу с позицией 2, используя метод expandGroup.
Все сохраним и запускаем.
Как видим, группа LG сразу развернута. Это сработала команда expandGroup в конце кода.
Если посмотреть в лог, то видим
onGroupExpand groupPosition = 2
Т.е. отработало событие разворачивания группы с позицией 2.
Нажмем, например, на Optimus Link. Смотрим лог:
onChildClick groupPosition = 2 childPosition = 1 >
Не забываем, что позиция считается с нуля. Группа с позицией 2 – LG, элемент с позицией 1 – Optimus Link, все верно.
Смотрим TextView сверху экрана, он считал из адаптера значение атрибута и отобразил его.
Теперь попробуем свернуть группу LG, нажмем на нее. Смотрим лог:
onGroupClick groupPosition = 2 > onGroupCollapse groupPosition = 2
Сначала отработал onGroupClick – нажатие на группу, а потом onGroupCollapse – сворачивание группы. TextView наверху экрана оповестил о том, что свернули группу LG.
Снова развернем группу LG. Лог:
onGroupClick groupPosition = 2 > onGroupExpand groupPosition = 2
Нажатие на группу и разворачивание. Обратите внимание, что при программном разворачивании, события нажатия не было, только разворот.
Теперь попробуем развернуть группу с позицией 1 – Samsung. Группа не разворачивается. Смотрим лог:
Событие нажатия есть, а вот обработчик разворачивания не вызывается. Это происходит из-за строчки
Мы для группы с позицией 1 блокируем дальнейшую обработку события и оно не уходит в обработчики разворачивания или сворачивания. Поэтому и не срабатывает onGroupExpand.
В итоге эти 4 обработчика позволяют вам определять, как пользователь взаимодействует с деревом.
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Источник
Expandable TextView in Android
ExpandableTextView is an Android library which allows us to easily create a TextView which can expand/collapse when user clicks on it .we can use this feature in many apps such as movie review app or storytelling app and in many other apps. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more, please refer Complete Interview Preparation Course.
Approach
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Before going to the coding section first do some pre-task
Go to app -> res -> values -> colors.xml file and set the colors for the app.
Go to app -> res -> values -> strings.xml file and set the string for the app.
Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up.
Step 3: Designing the UI
In the activity_main.xml remove the default TextView and change the layout to RelativeLayout and add the ExpandableTextView and inside it, we add a TextView and ImageButton as shown below. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
Note: The id of ImageButton must be expanded collapse and id of TextView must be expandable text
Properties of ExpandableTextView
- expandableTextView:collapseDrawable: Customize a drawable set to ImageButton to collapse the TextView
- expandableTextView:expandDrawable: It is used to set drawable to ImageButton to expand the TextView
- expandableTextView:maxCollapsedLines: The maximum number of text lines allowed to be shown when the TextView gets collapsed (defaults value is 8 )
- expandableTextView:animDuration: It is used to set the duration of the Animation for the expansion/collapse (defaults to 300ms)
- expandableTextView:animAlphaStart: The alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation (defaults to 0.7f )
Источник
Expandable textview android studio
ExpandableTextView
ExpandableTextView is an Android library that allows developers to easily create an TextView which can expand/collapse just like the Google Play’s app description. Feel free to use it all you want in your Android apps provided that you cite this project.
API Level 8 (Froyo) and above.
The library is pushed to Maven Central as an AAR, so you just need to add the followings to your build.gradle file:
Using the library is really simple, just look at the source code of the provided sample. (Look at the SampleTextListAdapter.java for the use within a ListView)
The important thing to note is that the view Ids for TextView and ImageButton must be set to «@id/expandable_text» and «@id/expand_collapse» respectively for this library to work.
Also, you can optionally set the following attributes in your layout xml file to customize the behavior of the ExpandableTextView.
maxCollapsedLines (defaults to 8) The maximum number of text lines allowed to be shown when the TextView gets collapsed
animDuration (defaults to 300ms) Duration of the Animation for the expansion/collapse
animAlphaStart (defaults to 0.7f) Alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation.
expandDrawable Customize a drawable set to ImageButton to expand the TextView
collapseDrawable Customize a drawable set to ImageButton to collapse the TextView
Источник