Как сделать красивый listview android

Полный список

— используем ListView для построения списка

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

При создании ListView создавать пункты за нас будет адаптер. Адаптеру нужны от нас данные и layout-ресурс пункта списка. Далее мы присваиваем адаптер списку ListView. Список при построении запрашивает у адаптера пункты, адаптер их создает (используя данные и layout) и возвращает списку. В итоге мы видим готовый список.

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

Project name: P0421_SimpleList
Build Target: Android 2.3.3
Application name: SimpleList
Package name: ru.startandroid.develop.p0421simplelist
Create Activity: MainActivity

Открываем main.xml и добавим на экран компонент ListView (вкладка Composite):

ListView – это и есть компонент списка.

Теперь надо создать адаптер. Открываем MainActivity.java и пишем:

Вы не поверите, но это весь код, необходимый для создания списка )

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

и передали ему следующие параметры:

this – контекст
android.R.layout.simple_list_item_1 – это системный layout-файл, который представляет собой TextView
names – массив данных, которые мы хотим вывести в список

Мы можем посмотреть содержимое использованного simple_list_item_1. Для этого в вашем проекте найдите пункт Android 2.3.3., раскройте его, и раскройте android.jar

Проматывайте в самый низ и открывайте res.layout.

И внутри находим используемый нами simple_list_item_1

Двойной клик на него и смотрим содержимое:

Обычный TextView с набором параметров.

Когда список при формировании запрашивает очередной пункт, адаптер берет этот Layout-ресурс simple_list_item_1, прогоняет его через LayoutInflater и получает View, преобразует View к TextView, присваивает ему текст из массива данных и отдает списку.

Все сохраним и запустим. Видим список из наших данных.

Использование системного layout-ресурса simple_list_item_1 хорошо тем, что нам не надо самим layout рисовать. Однако, если нас не устраивает то, как выглядит список с использованием simple_list_item_1 в качестве пункта списка, мы можем создать свой layout-ресурс.

Создадим layout-файл my_list_item.xml в папке res/layout нашего проекта:

TextView с указанием цвета и размера шрифта, выравнивания текста и отступов.

Изменим существующий код, укажем адаптеру наш созданный layout-ресурс my_list_item:

Теперь адаптер будет использовать его при создании пунктов списка.

Все сохраним и запустим. Видим наш зеленый список:

В layout-ресурсе для пункта списка вместо TextView вы можете использовать какой-нибудь его производный класс – например Button. Главное, чтобы объект прошел преобразование к TextView. Адаптер присвоит ему текст методом setText и отдаст списку.

Немного про Context

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

ArrаyAdapter использует LayoutInflater, чтобы конвертнуть layout-ресурс в View. Но получение объекта LayoutInflater – это одна из базовых функций и она недоступна для класса ArrаyAdapter. Поэтому мы в ArrаyAdapter в качестве контекста передаем ссылку на Activity (Activity имеет доступ к базовым функциям через восходящую иерархию классов). А класс ArrayAdapter внутри себя использует переданный ему контекст, чтобы вызвать LayoutInflater. Без контекста он не смог бы это сделать.

На следующем уроке:

— используем список ListView для одиночного и множественного выбора элементов

public ArrayAdapter (Context context, int textViewResourceId, T[] objects)

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник

ListView. Списки со значками

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

Подготовим разметку для отдельного элемента списка, который должен уметь отображать текст и значок (файл res/layout/list_item.xml):

Теперь переходим к java-коду. Мы воспользуемся ListActivity и код станет очень коротким.

В методе setListAdapter() мы сообщаем, что разметку для отдельного элемента списка надо брать из R.layout.list_item, текст размещать в компоненте с идентификатором R.id.text_view_cat_name, а массив текстов брать из mCatNames.

Запустив пример, мы получим готовое приложение, состоящее из списка с одинаковыми значками. Вы можете, как и прежде, щёлкать по пунктам и прокручивать список.

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

Вся магия содержится в методе адаптера getView(). Мы можем задать для каждого элемента списка свой значок. Добавим в проект значки для знаков зодиака. Для простоты в этом примере я покажу изменение одного знака зодиака Лев, который относится к семейству кошачьих. Разметка может оставаться прежней, только поменяйте идентификатор у TextView (по коду вы должны сами понять, на какой именно).

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

Немного информации о классе LayoutInflater. Класс берёт данные из XML-файла разметки и превращает их в реальные компоненты, которые становятся частью списка. Вам надо только указать источник для конвертации через метод inflate().

После этого, система понимает, где искать отдельные компоненты разметки. Мы вызываем знакомый нам метод findViewById(), только он уже относится не к активности, а к корневому элементу разметки. Поэтому мы вызываем метод из row.

Сначала изменим макет для списка.

Теперь напишем свой адаптер и внесём изменения в код

Готовый результат выглядит гораздо лучше предыдущих примеров.

Полосатый ListView

Коты бывают полосатыми. Давайте и ListView сделаем полосатым. Делается элементарно, всего одной строчкой кода.

В метод getView() из предыдущего примера вставляем:

В этом уроке рассматривается более продвинутый вариант полосатой разметки.

Источник

ListView в Android: Простое использование

Блуждал в Интернете в поисках достойного мануала. Нашел, по моему мнению, достойный, но, как водится в кругах программирования под Android он, конечно же, на английском. Вот и решил привнести свой вклад в распространение мануалов в этой среде на русском. Буду его изучать и, попутно, переводить сюда.

Напомню, что статья является переводом этой статьи с разрешения ее автора.

Продолжение статьи находится здесь. В нем рассматривается кастомизация списков и советы по их оптимизации.

Мануал написан под Android 4, Eclipse 3.7, Java 1.6. Источник можно найти здесь.

Списки — это вещь обычная в современных мобильных устройствах. Мы можем перемещаться по списку и выбирать нужный нам элемент, чтобы открыть что-то. Так и у Андроида он имеется.

ListActivity

Вы можете напрямую использовать ListView в своем проекте, как и любой другой компонент интерфейса пользователя. Если основная цель вашей Деятельности это отображение списка, то вы можете расширить класс Activity классом ListActivity, что значительно упростит использование ListView.

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

ListActivity содержит ListAdapter, ответственный за управление содержимым. Адаптер должен быть установлен в методе onCreate() вашей деятельности через метод setListAdapter().

При нажатии на элемент списка вызывается метод onListItemClick(). Этот метод позволяет получить доступ к выбранному элементу.

В Андроиде уже есть некоторые предопределенные шаблоны для использования в Адаптере, например «android.R.layout.simple_list_item1». Если же вы не хотите использовать предопределенный шаблон, ваш шаблон должен иметь идентификатор «@android:id/list», который будет называться ListView. Например:

Так же вы можете использовать вид с id «@android:id/empty». Этот вид отображается, когда список пуст.

Адаптер

Что такое Адаптер?

ListView берет содержимое для отображения через адаптер. Адаптер расширяется классом BaseAdapter и отвечает за модель данных для списка и за расположение этих данных в его элементах.

В Андроиде есть два стандартных адаптера: ArrayAdapter и CursorAdapter. ArrayAdapter управляет данными, основанными на массивах или списках, в то время, как SimpleCursorAdapter управляет содержимым из базы данных. Так же вы можете разработать свой Адаптер, расширяющий эти два класса или же класс BaseAdapter.

Самый важный метод Адаптера — getView(). Он вызывается для каждого элемента списка, чтобы определить как и какие данные должны в нем отображаться. getVew() так же содержит параметр convertView, который позволяет использовать заново уже существующий элемент списка, который уже не отображается, т.к. пользователь пролистнул его с видимой части дисплея. Если convertView не пустой, он может быть использован заново, чтобы не грузить шаблон, что приводит к значительному приросту производительности, т.к. подгрузка XML файла достаточно ресурсоемка.

ListViews и производительность

Отображение большого количества данных на мобильном устройстве должно быть реализовано максимально эффективно. Поэтому ListView создает виды (виджеты) по необходимости и подкрепляет их к иерархии видов. Стандартный Адаптер ListView удаляет виды, например, если элемент больше не отображается, он будет стерт и только его содержимое поменяется. Если вы используете свой адаптер, то вы должны так же предусмотреть это, чтобы избежать проблем с производительностью.

Пример: Простой ListActivity

Сейчас мы создадим максимально простой список. Мы используем стандартный класс Adapter — ArrayAdapter и вид, предопределенный Андроидом.

Создайте новый проект «de.vogella.android.listactivity» с Деятельностью «MyListActivity». Не изменяйте шаблон main.xml. Создайте следующую Деятельность:

Заметьте, что мы не используем setContentView(). ListActivity использует шаблон ListView по-умолчанию, если другой шаблон не задан явно.

По нажатию одного из элементов списка будет выводиться стандартный «Тост» с информацией какой из элементов был выбран.

Прошу прощения за репост. Изначально не отметил как перевод. Большое спасибо jeston за наводку, принял и научился на ошибках.

Источник

Анимация элементов ListView в Android

Доброго дня суток, хабражители.

Сегодня я хочу поделиться с вами секретами анимации элементов списка ListView в Android.

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

Сегодня мы сделаем так, чтобы элементы списка появлялись не «внезапно», а красиво анимировать их появление на экране.

Теперь нам необходимо указать ListViewAnimations, как библиотеку, от которой зависит наш проект «AnimatedListViewSample». Для этого необходимо открыть свойства нашего проекта, выбрать пункт «Android» в списке слева, проскроллить правую панель вниз до раздела «Library». Нажав Add, выбрать из списка библиотеку «AnimatedListViewLibrary».

Итак, наш проект готов к созданию активити.

Удалите из лэйаута лишнее, должен остаться пустой экран. После редактирования ваш activity_main.xml должен выглядеть так:

Теперь нам необходимо заменить базовый класс нашей активити на ListActivity и наполнить наш ListView данными.
Давайте создадим простой адаптер состоящий из всего одного элемента TextView используя стандартный layout:

Я поместил код адаптера прямо внутрь класса MainActivity.

Осталось указать нашему ListView использовать экземпляр нашего адаптера.

getListView().setAdapter(new MyBaseAdapter()); в метод onCreate сразу после вызова метода onCrate супертипа.

Код MainActivity.java тепер выглядит так:

Можно запускать наше приложение. Перед запуском убедитесь что AndroidManifest содержит нашу активити с необходимыми аттрибутами:

После запуска на устройстве вы получите обычный список вроде такого:

Осталось совсем немного, переделать наш ListView таким образом, чтобы анимировать появление элементов списка. Библиотека ListViewAnimations имеет в своем арсенале следующие адаптеры:
— SwingBottomInAnimationAdapter.java
— SwingLeftInAnimationAdapter.java
— SwingRightInAnimationAdapter.java
— AlphaInAnimationAdapter.java

Мне больше всего понравился BottomInAnimationAdapter, когда элементы списка появляются внизу и двигаются вверх на свою позицию.
Я переделаю метод onCreate таким образом, чтобы использовать анимацию. Для этого мне необходимо создать экземпляр класса SwingBottomInAnimationAdapter и указать его в качестве адаптера для моего ListView.

Строчка swingBottomInAdapter.setAbsListView(getListView()); совершенно необходима для корректной работы SwingBottomInAnimationAdapter.

Модифицируйте ваш код и запустите проект на устройстве или в эмуляторе. Красиво?

Скачать проект можно здесь в виде репозитория или здесь в виде архива.

Источник

Прокручиваемый список ListView

Компонент ListView представляет собой прокручиваемый список элементов. По сравнению с TextView и другими простыми элементами компонент ListView намного сложнее в использовании. Сложности связаны с тем, что программирование прокручиваемого списка включает определение интерфейса и формирование набора данных. За набор данных отвечает Adapter.

Адаптеры списков

Прежде чем говорить о ListView необходимо пару слов сказать об адаптерах, которые формируют данные для прокручиваемого списка. Адаптер выбирает по порядку предоставленные данные и размещает их в списке. При этом для списка ListView адаптер на лету создаёт компоненты TextView и помещает в них информацию в нужном виде. Исходные данные для списка могут быть определены как в массиве, так и в базе данных; для второго случая будет использоваться адаптер взаимодействия с сервером базы данных. Разработчик может создать свой собственный адаптер.

В системе существуют уже готовые адаптеры. Например, ArrayAdapter использует массив значений, а CursorAdapter работает с объектом типа Cursor, используемый в сервере базы данных. Ниже представлены готовые адаптеры :

Адаптер стандартного списка ArrayAdapter имеет конструктор следующего вида :

BaseAdapter

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

BaseAdapter содержит несколько методов, которые необходимо переопределить. Например, метод getCount() позволяет определить количество отображаемых объектов. Второй, и самый важный метод адаптера — это метод getView(). Данный метод вызывается для каждого элемента списка, чтобы получить информацию для отображения. Метод getVew() содержит параметр convertView, позволяющий использовать заново уже существующий элемент списка, который вышел из видимой области экрана. Если convertView не пустой, то он может быть использован заново, чтобы не грузить разметку списка, что способствует росту производительности.

Метод getView() возвращает View компонент, который фактически является контейнером ViewGroup, содержащий в себе другие компоненты, например, ImageView или TextView.

Класс ListActivity

Если основная функция активности связана с представлением списка и выбором из него определенного элемента, то можно класс активности наследовать от ListActivity, расширяющий (extends) свойства Activity. Это значительно упростит использование списка ListView.

Класс ListActivity содержит ListAdapter, ответственный за управление набором данных. Адаптер с набором данных должен быть определен в методе активности onCreate() вызовом метода setListAdapter(ListAdapter), получающий в качестве параметра объект адаптера.

Класс ListActivity имеет метод onListItemClick(), вызываемый при выборе одного из элементов списка. Этот метод позволяет получить доступ к выбранному элементу.

Пример использования ListActivity

Рассмотрим пример использования класса ListActivity. Для этого создадим новый модуль (Module) и назовем его p07listview. В этом модуле создадим список из текстовых записей. При выборе одного из элементов списка выведем сообщение Toast с соответствующим названием элемента. Ниже представлен листинг активности MainActivity.

Листинг активности MainActivity

В методе активности onCreate создается адаптер массива текстовых строк, который подключается к списку. Метод onListItemClick(), вызываемый при выборе элемента из списка, формирует и показывает сообщение Toast.

Android имеет некоторые предопределенные разметки адаптера. В активности примера применена разметка android.R.layout.simple_list_item1.

При использовании предопределенной разметки необходимо соответствующим образом определять идентификатор компонента ListView; он должен иметь значение «@android:id/list». В противном случае Android Studio выбросит Exception в режиме run-time с сообщением о несоответствии значения идентификатора компонента. Ниже представлен листинг описания интерфейса активности res/layout/activity_main.xml; интерфейс примера включает только один компонент типа ListView.

Листинг activity_main.xml

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

Системные разметки

В примере была использована готовая системная разметка android.R.layout.simple_list_item_1, состоящая из одного TextView. В этой разметке определен интерфейс компонента. Android Studio позволяет просмотреть исходный код этой разметки. Для этого следует установить курсор на simple_list_item_1 и нажать клавиши Ctrl+B. Ниже представлен листинг разметки :

В листинге в качестве разметки представлен один компонент TextView с набором атрибутов. Имеется несколько вариантов системных разметок :

android.R.layout.simple_list_item_2
состоит из двух компонентов TextView, расположенных друг над другом. Верхний играет роль заголовка, нижний – роль подтекста.

android.R.layout.simple_list_item_checked
используется компонент CheckedTextView, справа от которого будет находиться флажок выбора элемента.

android.R.layout.activity_list_item
используется компонент TextView, слева от которого располагается иконка ImageView с идентификатором android.resource.id.Icon.

Пример множественного выбора

В рассмотренном выше примере выбирался только один элемент из списка. Компонент ListView позволяет сделать не только единичный выбор, но и множественный. В этом случае необходимо использовать соответствующую разметку (simple_list_item_checked) и установить свойство ChoiceMode в описании интерфейса компонента равным multiplyChoice. Множественный выбор также можно установить программно при помощи метода setChoiceMode(ListView.CHOICE_MODE_MULTIPLE).

В основе примера множественного выбора элементов из списка будем использовать предыдущий пример p07listview. Необходимо внести изменения как в описание интерфейса, так и в описание активности. Теперь листинг описания интерфейса активности res/layout/activity_main.xml примет следующий вид :

Листинг activity_main.xml

В чем отличие данного описания интерфейса от предыдущего? В первую очередь изменение коснулось значения идентификатора объекта android:id, связанное с тем, что в этом примере активность будет наследоваться от обычного класса Activity, а не от ListActivity, как это было ранее. Кроме этого, добавлен атрибут множественного выбора android:choiceMode. Если не определить данный атрибут, и использовать разметку simple_list_item_checked, то невозможно будет выделить ни одного элемента из списка : перехватить нажатие на элементе списка можно, но установить флажок нельзя. При значении атрибута android:choiceMode равным «singleChoice» можно будет выбрать/выделить только один элемент из списка.

Ресурсный файл

Второе изменение в примере коснётся описания массива строк. Нехорошо описывать элементы массива в java-коде, как это было выполнено в предыдущем примере. Правильнее хранить их в ресурсных файлах. Тем более, что это удобнее с точки зрения локализации интерфейса. Найдем в проекте файл с ресурсами res/values/strings.xml и добавим туда массив строк с именами. В итоге должен получиться файл с таким содержимым :

Для чтения данного массива значений из ресурсного файла необходимо использовать следующее выражение :

Наборы данных ArrayMap, SparseArray

Прежде чем переходить к классу «активности» необходимо рассмотреть объекты формирования массивов элементов в Android. Поскольку мы будем использовать множественный выбор элементов, то набор выделенных записей необходимо где-то сохранить. Для этого будем использовать класс типа ArrayMap.

Android имеет собственную реализацию набора данных типа HashMap, это класс ArrayMap, использующий принцип «ключ-значение». В отличие от HashMap класс ArrayMap внутри содержит два массива : в первом массиве в отсортированном виде хранятся хэш-коды ключей, во втором массиве – ключи и значения. Вторым важным отличием ArrayMap является возможность использования прохода по индексам в цикле (это обеспечивается вторым внутренним массивом). Рекомендуется использовать ArrayMap при ограниченном количестве объектов в наборе, когда количество операций добавления элементов несущественно. Пример использования класса ArrayMap :

Помимо ArrayMap android включает в свою библиотеку классы типа SparseArray. Класс SparseArray подобен ArrayMap с той лишь разницей, что в качестве ключа используются примитивные типы. Библиотека android содержит несколько разновидностей класса ArrayMap для различных типов : LongSparseArray, SparseIntArray, SparseBooleanArray. В следующей таблице представлены соответствия классов ArrayMap и SparseArray объектам HashMap :

Листинг активности

Класс активности MainActivity является наследником Activity. В активности набор записей из ресурсного файла сначала заносится в массив data. После этого массив используется при создании адаптера типа ArrayAdapter, который регистрируется в прокручиваемом списке listView вызовом метода setAdapter. К компоненту списка listView подключен слушатель выделения элемента. При выделении любой записи набора слушатель получает массив логических значений SparseBooleanArray и в цикле формирует строку сообщения с перечнем выбранных записей, которые отображает в Toast.

На следующем скриншоте представлен интерфейс примера с тремя выбранными записями, отображаемыми в сообщении Toast.

Продолжение статьи связано с настройкой интерфейса прокручиваемого списка ListView.

Источник