Recycler view xamarin android

RecyclerView

RecyclerView — это группа представлений для отображения коллекций; Она обеспечивает более гибкую замену для старых групп представлений, таких как ListView и GridView. В этом руководство объясняется, как использовать и настраивать RecyclerView в приложениях Xamarin. Android.

RecyclerView

Многие приложения должны отображать коллекции одного типа (например, сообщения, контакты, изображения или песни). часто эта коллекция слишком велика, чтобы уместиться на экране, поэтому коллекция представлена в маленьком окне, позволяющем плавно прокручивать все элементы коллекции. RecyclerView — Это мини-приложение Android, которое отображает коллекцию элементов в списке или сетке, позволяя пользователю прокручивать коллекцию. Ниже приведен снимок экрана примера приложения, которое использует RecyclerView для отображения содержимого папки «Входящие» электронной почты в вертикальном списке прокрутки:

RecyclerView предлагает две интересные функции:

Она имеет гибкую архитектуру, позволяющую изменять ее поведение путем подключения предпочитаемых компонентов.

Она работает эффективно с большими коллекциями, так как она повторно использует представления элементов и требует использования владельцев представления для ссылок на представления кэша.

В этом руководство объясняется, как использовать RecyclerView в приложениях Xamarin. Android. в нем объясняется RecyclerView , как добавить пакет в проект Xamarin. Android, и в нем описываются RecyclerView функции типичного приложения. Реальные примеры кода содержат сведения о том, как интегрироваться RecyclerView в приложение, как реализовать нажатие кнопки «Просмотр элементов» и как обновляться RecyclerView при изменении базовых данных. В этом учебнике предполагается, что вы знакомы с разработкой Xamarin. Android.

Требования

Хотя RecyclerView часто связывается с интерфейсом загрузки Android 5,0, оно предлагается как библиотека поддержки — RecyclerView работает с приложениями, предназначенными для API уровня 7 (Android 2,1) и более поздних версий. Для использования RecyclerView в приложениях на основе Xamarin необходимо следующее:

xamarin. android — xamarin. android 4,20 или более поздней версии должен быть установлен и настроен либо Visual Studio, либо Visual Studio для Mac.

Проект приложения должен содержать пакет Xamarin. Android. support. версии 7. RecyclerView . дополнительные сведения об установке пакетов NuGet см. в разделе пошаговое руководство. включение NuGet в проект.

Обзор

RecyclerView можно рассматривать как замену для мини-приложений ListView и GridView в Android. Как и его предшественники, RecyclerView предназначен для отображения большого набора данных в маленьком окне, но RecyclerView предлагает больше вариантов макета и лучше оптимизирован для отображения больших коллекций. Если вы знакомы с ListView , существует несколько важных различий между ListView и RecyclerView :

RecyclerView немного сложнее в использовании: необходимо написать дополнительный код для использования по RecyclerView сравнению с ListView .

RecyclerView не предоставляет предопределенный адаптер; необходимо реализовать код адаптера, который обращается к источнику данных. Однако Android включает несколько стандартных адаптеров, которые работают с ListView и GridView .

RecyclerView не предлагает событие щелчка элемента, когда пользователь касается элемента. Вместо этого события щелчка элемента обрабатываются вспомогательными классами. В отличие от этого, ListView предлагает событие щелчка элемента.

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

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

RecyclerView включает встроенные анимации для элемента добавить и удалить. ListView Анимация требует некоторых дополнительных усилий в части разработчика приложения.

Разделы

RecyclerView части и функциональные возможности

В этом разделе объясняется Adapter , как, LayoutManager и ViewHolder работают вместе как вспомогательные классы для поддержки RecyclerView . Он предоставляет общий обзор каждого из этих вспомогательных классов и объясняет, как использовать их в приложении.

Пример базового RecyclerView

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

Расширение примера RecyclerView

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

Итоги

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

Дополнительные сведения о RecyclerView см. в RecyclerView .

Источник

Пример базового RecyclerView

Чтобы понять, как RecyclerView работает типичное приложение, в этом разделе рассматривается пример приложения RecyclerView — простой пример кода, который используется RecyclerView для отображения большой коллекции фотографий:

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

Пример источника данных

В этом примере приложения источник данных «фотоальбом» (представленный PhotoAlbum классом) предоставляет RecyclerView содержимое элемента. PhotoAlbum — Это коллекция фотографий с заголовками; При создании экземпляра вы получаете готовый набор из 32 фотографий:

Каждый экземпляр Photo в PhotoAlbum предоставляет свойства, позволяющие СЧИТЫВАТЬ идентификатор ресурса изображения, PhotoID и строку заголовка Caption . Коллекция фотографий организована таким же путем, что индексатор может получить доступ к каждой фотографии. Например, следующие строки кода обращаются к ИДЕНТИФИКАТОРу ресурса изображения и заголовку для десятой фотографии в коллекции:

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

Поскольку сведения о реализации PhotoAlbum не важны для понимания RecyclerView , PhotoAlbum Исходный код здесь не представлен. Исходный код PhotoAlbum доступен по адресу PhotoAlbum в примере приложения рециклервиевер .

Макет и инициализация

Файл макета Main. axmlсостоит из одного элемента в LinearLayout :

Обратите внимание, что необходимо использовать полное имя Android. support. версии 7. widget. RecyclerView , поскольку упаковано в библиотеку поддержки. OnCreate Метод MainActivity Инициализирует этот макет, создает экземпляр адаптера и подготавливает базовый источник данных:

Этот код делает следующее:

Создает экземпляр PhotoAlbum источника данных.

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

Возвращает объект RecyclerView из макета.

Подключает адаптер к RecyclerView экземпляру, вызвав метод, RecyclerView SetAdapter как показано выше.

Диспетчер макетов

Каждый элемент в RecyclerView состоит из элемента CardView , содержащего фотографию и подпись фотографии (подробные сведения см. в разделе «географические RecyclerView ). Предопределенный параметр LinearLayoutManager используется для размещения каждого CardView элемента в вертикальной прокрутке.

Этот код находится в OnCreate методе основного действия. Конструктору диспетчера макетов требуется контекст, поэтому он передается с помощью, this как показано выше.

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

Просмотреть держатель

Вызывается класс-держатель представления PhotoViewHolder . Каждый PhotoViewHolder экземпляр содержит ссылки на ImageView и TextView связанного элемента строки, который располагается в CardView пояснены здесь:

PhotoViewHolder является производным от RecyclerView.ViewHolder и содержит свойства для хранения ссылок на объект ImageView и, TextView показанный в приведенном выше макете. PhotoViewHolder состоит из двух свойств и одного конструктора:

В этом примере кода PhotoViewHolder конструктору передается ссылка на представление родительского элемента ( CardView ), которое является PhotoViewHolder оболочкой. Обратите внимание, что вы всегда пересылаете представление родительского элемента в базовый конструктор. PhotoViewHolder Конструктор вызывает FindViewById в представлении родительского элемента, чтобы нахождение всех ссылок на дочернее представление, ImageView и TextView , сохраняя результаты в Image Caption свойствах и соответственно. Адаптер позже извлекает ссылки на представления из этих свойств, когда обновляет эти CardView дочерние представления новыми данными.

Дополнительные сведения о RecyclerView.ViewHolder см. в RecyclerView.ViewHolder .

Адаптер

Адаптер загружает каждую RecyclerView строку с данными для конкретной фотографии. Например, для данной фотографии в позиции строки pадаптер находит связанные данные в позиции p в источнике данных и копирует эти данные в элемент строки в позиции p в коллекции. Адаптер использует держатель представления для поиска ссылок на ImageView и TextView в этой позиции, поэтому ему не нужно многократно вызывать FindViewById эти представления, так как пользователь прокручивает коллекцию фотографий и повторно использует представления.

В рециклервиеверкласс адаптера является производным от класса для создания PhotoAlbumAdapter :

mPhotoAlbum Элемент содержит источник данных (фотоальбом), который передается в конструктор; конструктор копирует фотоальбом в эту переменную-член. Реализуются следующие необходимые RecyclerView.Adapter методы:

OnCreateViewHolder — Создает экземпляр файла макета элемента и владельца представления.

OnBindViewHolder — Загружает данные в указанной позиции в представления, ссылки на которые хранятся в заданном заполнителе представления.

ItemCount — Возвращает количество элементов в источнике данных.

Диспетчер макетов вызывает эти методы при размещении элементов в RecyclerView . Реализация этих методов рассматривается в следующих разделах.

онкреатевиевхолдер

Диспетчер макетов вызывает OnCreateViewHolder , когда RecyclerView для представления элемента требуется новый владелец представления. OnCreateViewHolder увеличивает представление элемента из файла макета представления и заключает представление в новый PhotoViewHolder экземпляр. PhotoViewHolder Конструктор находит и сохраняет ссылки на дочерние представления в макете, как описано ранее в PhotoViewHolder .

Каждый элемент строки представлен объектом CardView , который содержит ImageView (для фотографии) и TextView (для заголовка). Этот макет находится в файле фотокардвиев. axml:

Этот макет представляет один элемент строки в RecyclerView . OnBindViewHolder Метод (описан ниже) копирует данные из источника данных в ImageView и в TextView этом макете. OnCreateViewHolder увеличивает этот макет для заданного расположения фотографии в RecyclerView и создает новый PhotoViewHolder экземпляр (который находит и кэширует ссылки на ImageView и TextView дочерние представления в связанном CardView макете):

Полученный экземпляр заполнителя представления vh возвращается к вызывающему объекту (диспетчеру макетов).

онбиндвиевхолдер

Когда Диспетчер макетов готов к отображению определенного представления в RecyclerView видимой области экрана, он вызывает OnBindViewHolder метод адаптера для заполнения элемента в указанной позиции строки содержимым из источника данных. OnBindViewHolder Получает сведения о фотографии для указанной позицией строки (ресурса изображения фотографии и строки для подписи фотографии) и копирует эти данные в связанные представления. Представления размещаются через ссылки, хранящиеся в объекте-владельцу представления (который передается через holder параметр):

Переданный объект-владелец представления сначала должен быть приведен к производному типу заполнителя представления (в данном случае PhotoViewHolder ) перед его использованием. Адаптер загружает ресурс изображения в представление, на которое ссылается свойство держателя представления Image , и копирует текст заголовка в представление, на которое ссылается свойство держателя представления Caption . Это привязывает связанное представление к его данным.

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

ItemCount

ItemCount Метод возвращает количество элементов в коллекции данных. В примере приложения Photo Viewer число элементов равно числу фотографий в фотоальбоме:

Дополнительные сведения о RecyclerView.Adapter см. в RecyclerView.Adapter .

Совместное размещение

Результирующая RecyclerView реализация в примере Photo App состоит из MainActivity кода, который создает источник данных, Диспетчер макетов и адаптер. MainActivity создает mRecyclerView экземпляр источника данных и адаптер и подключает его к диспетчеру макета и адаптеру:

PhotoViewHolder находит и кэширует ссылки на представление:

PhotoAlbumAdapter реализует три переопределенных метода.

При компиляции и выполнении этого кода создается основное приложение для просмотра фотографий, как показано на следующих снимках экрана:

Если тени не рисуются (как показано на снимке экрана выше), измените Свойства/AndroidManifest.xml и добавьте следующий параметр атрибута в элемент:

Это базовое приложение поддерживает только обзор фотоальбома. Он не реагирует на события касания элемента и не обрабатывает изменения в базовых данных. Эта функция добавлена в примере расширения RecyclerView.

Изменение Лайаутманажер

Из-за RecyclerView гибкости можно легко изменить приложение, чтобы использовать другой диспетчер макетов. В следующем примере он изменяется для отображения фотоальбома с макетом сетки, который прокручивается горизонтально, а не с вертикальным линейным макетом. Для этого экземпляр диспетчера макетов изменяется для использования GridLayoutManager следующим образом:

Это изменение кода заменяет вертикальный на LinearLayoutManager GridLayoutManager , который представляет сетку, которая состоит из двух строк, прокрутхся по горизонтали. При повторной компиляции и запуске приложения вы увидите, что фотографии отображаются в сетке, а прокрутка — горизонтальная, а не вертикальная:

Изменяя только одну строку кода, можно изменить приложение для просмотра фотографий, чтобы использовать другой макет с другим поведением. Обратите внимание, что ни код адаптера, ни XML макета не были изменены для изменения стиля макета.

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

Источник