Android studio listview оформление списка примеры

Стильный ListView

Попробуем сделать ListView красивым. Сначала создадим стандартную заготовку на основе ListActivity. Разметка будет стандартная:

Теперь создадим массив кошачьих имён и через адаптер добавим имена в список:

Получим стандартное приложение со списком:

Займёмся стилизацией списка. В файле res/values/styles.xml добавим пару стилей для списка:

Теперь нужно присоединить стиль к ListView через атрибут style=»@style/CustomListView» и посмотреть, что у нас получилось:

Мы поменяли фон для списка и добавили возможность быстрой прокрутки.

Создадим отдельную тему для активности (или всего приложения):

Кроме новой темы мы добавили ещё один стиль для TextView, который отвечает за отдельный элемент списка. Теперь текст будет выглядеть объёмным за счёт тени. Прописываем атрибут android:theme=»@style/CustomTheme» в манифесте для активности или для всего приложения (application). Смотрим на результат:

Также можете использовать градиент, который можно применить как ко всему ListView, так и отдельному элементу списка.

Создадим файл res/drawable/gradient.xml:

При желании можете также использовать атрибут android:middleColor.

Теперь нужно прописать созданный градиент в атрибуте android:background либо у ListView, либо в отдельной разметке для элемента списка. Разница видна невооружённым взглядом:

Если через XML мы можем задать только три параметра для градиента, то программно через GradientDrawable можно задать больше опорных точек.

Нажатый элемент списка

В предыдущих примерах мы научились менять фон у списка, но при этом список утратил возможность выделять нажатый элемент. Это серьёзное упущение для профессиональных программ. Исправить ситуацию просто. Вы должны подготовить два файла — один для стандартного вида элемента списка, а второй для нажатого элемента.

drawable/row_default.xml

drawable/row_pressed.xml

Теперь нужно создать ещё один файл, в котором будут содержаться сведения о разных состояниях элемента списка:

drawable/row_background.xml

Данный файл теперь можно присвоить атрибуту android:background у отдельной разметки для элемента списка и список будет реагировать на нажатия пользователя.

Источник

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

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

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

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

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

• ArrayAdapter	адаптер из массива данных формирует массив компонентов TextView для списка ListView;
• SimpleAdapter	адаптер формирует данные более сложной структуры;
• ListAdapter	адаптер формирования данных для ListView; строго говоря, это класс-интерфейс, который можно использовать как в ArrayAdapter, так и в SimpleAdapter;
• SpinnerAdapter	адаптер формирования данных для компонента Spinner;
• CursorAdapter	адаптер формирует данные для ListView с использованием курсора (данные должны иметь колонку с наименованием «_id»);
• ResourceCursorAdapter	адаптер дополняет свойства CursorAdapter и может создавать «виды» из ресурсов;
• SimpleCursorAdapter	расширяет свойства ResourceCursorAdapter и формирует компоненты TextView/ImageView из содержащихся в курсоре столбцов;
• HeaderViewListAdapter	расширенный вариант ListAdapter, когда в ListView определяются заголовки.

Адаптер стандартного списка 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 :

ArrayMap	HashMap
SparseArray	HashMap
SparseBooleanArray	HashMap
SparseIntArray	HashMap
SparseLongArray	HashMap
LongSparseArray	HashMap

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

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

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

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

Источник

ListView в Android: Кастомизация списков

Продолжение статьи о ListView в Android, в котором мы рассмотрим более сложные примеры его использования, такие, как иконки на элементах списка и добавление чекбоксов к этим элементам. Так же мы рассмотрим возможности по оптимизации кода.

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

Пример: ListActivity с собственным шаблоном.

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

Создайте файл шаблона «rowlayout.xml» в папке res/layout вашего проекта «de.vogella.android.listactivity».

Измените свою Деятельность на следующую. Код почти такой же, как и в предыдущем примере, единственная разница в том, что мы используем наш собственный шаблон в ArrayAdapter и указываем адаптеру какой элемент пользовательского интерфейса будет содержать текст. Мы не делали этого в предидущей статье, поскольку мы использовали стандартный шаблон.

Пример: ListActivity с гибким шаблоном

Оба предыдущих примера используют один шаблон сразу для всех строк. Если вы хотите изменить вид определенных строк, вам нужно определить свой адаптер и заместить метод getView().

Этот метод ответственен за создание отдельных элементов вашего ListView. getView() возвращает Вид. Этот Вид фактически является Шаблоном (ViewGroup) и содержит в себе другие Виды, например, ImageView или TextView. С getView() вы так же можете изменить параметры индивидуальных видов.

Чтобы прочитать шаблон из XML в getView(), вы можете использовать системный сервис LayoutInflator.

В этом примере мы расширяем ArrayAdapter, но так же мы можем реализовать непосредственно BaseAdapter.

Определение простого адаптера

Очень просто создать свой Адаптер, не обращая внимания на его оптимизацию. Просто получайте в своей Деятельности данные, которые хотите отобразить и сохраняйте их в элемент списка. В вашем getView() установите ваш предопределенный шаблон для элементов и получите нужные вам элементы с помощью findViewById(). После этого вы можете определить их свойства.

Наш пример использует две картинки: «no.png» и «ok.png». Я положил их в папку «res/drawable-mdpi». Используйте свои картинки. Если не нашли таковых, то просто скопируйте «icon.png» и, с помощью графического редактора, немного измените их.

Создайте класс «MySimpleArrayAdapter», который будет служить нашим Адаптером.

Чтобы использовать этот Адаптер, измените класс MyList на следующее

Когда вы запустите это приложение, вы увидите список с элементами, с разными значками на некоторых из них.

Оптимизация производительности вашего собственного адаптера

Создание Java объектов для каждого элемента — это увеличение потребления памяти и временные затраты. Как уже говорилось, Андроид стирает элементы (виды) вашего списка, которые уже не отображаются и делегируют управление ими в метод getView() через параметр convertView.

Ваш Адаптер может использовать этот вид и избежать «раздутие» Шаблона для этого элемента. Это сохраняет память и уменьшает загрузку процессора.

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

Наша реализация так же использует модель ViewHolder. Метод findViewById() достаточно ресурсоемок, так что нужно избегать его, если в нем нет прямой необходимости.

ViewHolder сохраняет ссылки на необходимые в элементе списка Шаблоны. Этот ViewHolder прикреплен к элементу методом setTag(). Каждый Вид может содержать примененную ссылку. Если элемент очищен, мы можем получить ViewHolder через метод getTag(). Это выглядит нагруженным, но, на самом деле, работает быстрее, чем повторяющиеся вызовы findViewById().

Обе техники (переназначение существующих видов и модель ViewHolder) увеличивают производительность примерно на 15%, особенно на больших объемах данных.

Продолжая использовать проект «de.vogella.android.listactivity», создайте класс «MyArrayAdapter.java».

Продвинутые ListActivity

Обработка долгого нажатия на элементе

Вы так же можете добавить LongItemClickListener к виду. Для этого получите ListView через метод getListView() и определите обработку длительного нажатия через метод setOnItemLongClickListener().

Элементы, взаимодействующие с моделью данных

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

Мы до сих пор используем тот же проект. Создайте шаблон элемента списка «rowbuttonlayout.xml».

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

Создайте следующий Адаптер. Этот Адаптер добавит обработку изменения Checkbox. Если чекбокс включен, то данные в модели тоже меняются. Искомый Checkbox получает свою модель через метод setTag().

В завершение измените свой ListView на следующий.

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

Мультивыбор

Так же можно сделать одиночный и мультивыбор. Посмотрите следующие сниппеты для примера. Чтобы получить выбранные элементы используйте listView.getCheckedItemPosition() или listView.getCheckedItemPositions(). Вы так же можете использовать listView.getCheckedItemIds(), чтобы получить ID выбранных элементов.

Хедер и Футер

Вы можете поместить произвольные элементы вокруг своего списка. Например, вы можете создать шаблон со списком между двумя TextView. Если вы так сделаете, то вы должны указать id «@android:id/list» к ListView, т.к. ListActivity ищет Вид с таким идентификатором. В таком случае один TextView всегда будет видимым над ListView (Хедер), а другой будет виден внизу. Если вы хотите использовать Футер и Хедер только в конце/начале списка, чтобы они не были фиксированными, то нужно использовать view.setHeaderView() или view.setFooterView(), например:

SimpleCursorAdapter

Если вы работаете с базой данных или же с контентом непосредственно, вы можете использовать SimpleCursorAdapter, чтобы перенести данные в ваш ListView.

Создайте новый проект «de.vogella.android.listactivity.cursor» с деятельностью «MyListActivity». Создайте такую деятельность.

Убедитесь, что вы дали приложению доступ к контактам. (Используйте «android.permission.READ_CONTACTS» в AndroidManifest.xml).

Спасибо за внимание. Комментарии и поправки к переводу приветствуются, т.к. даже в исходнике встречаются ошибки и опечатки.

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

Источник