Progress28.ru

IT Новости
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Java android recyclerview

Пример использования CardView и RecyclerView в Andro >

[:ru]В Android, начиная с версии 5.0 Lolipop, доступны новые View-элементы экрана, которые упрощают работу со списками: RecyclerView и CardView. С помощью этих компонентов ваше приложение будет выглядеть и вести себя в соответствии с рекомендациями спецификации Google Material Design.

Предпосылки

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

1. Поддержка Старых Версий

На момент написания статьи, около 5% Android-устройств работают под управлением Android Lolipop. Однако, наблюдается стремительный рост, а благодаря библиотеке поддержки v7:21, вы можете использовать RecyclerView и CardView на устройства под управлением более старых версий Android.

Для этого добавьте следующие строки в раздел dependencies в файл сборки проекта build.gradle:

2. Создание CardView

В CardView является ViewGroup. Как и с любой другой ViewGroup, с CardView можно взаимодействовать в Activity или Fragments, используя XML-файл макета.

Чтобы создать CardView, вам нужно будет добавить следующий код в ваш макет XML, как показано в следующем фрагменте:

В нашем конкретном примере нужно создать макет LinearLayout, с CardView внутри. В свою очередь, CardView будет содержать:

  • TextView для отображения имени
  • TextView для отображения возраста
  • ImageView для отображения фото

XML-код макета будет выглядеть так:

Вот так наполненный данными макет будет выглядеть на экране:

3. Создание RecyclerView

Шаг 1: Определение RecyclerView в Layout

Определяем RecyclerView в макете следующим образом:

Для получения ссылки на него в вашей activity, используйте следующий фрагмент кода:

Если вы уверены, что размер RecyclerView не будет изменяться, вы можете добавить этот код для улучшения производительности:

Шаг 2: используйте LayoutManager

В отличие от ListView, RecyclerView необходим менеджер компоновки для управления позиционированием своих элементов. Можно определить свой собственный LayoutManager , расширяя класс RecyclerView.LayoutManager. Однако в большинстве случаев, вы могли бы просто использовать один из стандартных подклассов LayoutManager :

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

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

Шаг 3: определение данных

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

Шаг 4: создание адаптера

Чтобы создать адаптер для RecyclerView, наследуемся от RecyclerView.Adapter. Этот адаптер представляет шаблон проектирования viewholder, подразумевающий использование пользовательского класса, который расширяет RecyclerView.ViewHolder. Эта паттерн сводит к минимуму количество обращений к дорогостоящему в плане ресурсов методу findViewById.

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

Далее, используем конструктор адаптера RecyclerView. Так как наши данные в виде списка объектов Person, используйте следующий код:

RecyclerView.Adapter имеет три абстрактных метода, которые мы должны переопределить. Давайте начнем с метода getItemCount. Он вернет количество элементов, присутствующих в данных. Так как наши данные в виде списка, мы просто вызваем метод size к объекту списка:

Далее, следует переопределить метод onCreateViewHolder. Как следует из названия, этот метод вызывается, когда кастомный ViewHolder должен быть инициализирован. Мы указываем макет для каждого элемента RecyclerView. Затем LayoutInflater заполняет макет, и передает его в конструктор ViewHolder.

Переопределим onBindViewHolder и определим содержание каждого элемента из RecyclerView. Этот метод очень похож на метод getView элемента адаптера ListView. В нашем примере, здесь вы должны установить значения полей имя, возраст, фото CardView.

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

Шаг 5: используем адаптер

Теперь, когда адаптер готов, добавьте следующий код в вашу activity, чтобы инициализировать и использовать адаптер, вызывая в конструктор адаптера и отдавая его методу setAdapter нашего RecyclerView:

Шаг 6: компилируем и запускаем

При запуске нашего примера с CardView и RecyclerView на устройстве Android, вы должны увидеть нечто подобное:

Вывод

В этом уроке мы узнали, как использовать CardView и RecyclerView, которые были введены в Android Lolipop. Вы также видели примеры того, как использовать их в соответствии со спрецификацией Material Design. Заметьте, что хотя RecyclerView может делать почти все, что может и ListView, для небольших наборов данных использовать ListView все же предпочтительнее так как требует меньшего количества строк кода.

Вы можете найти на официальном сайте более подробную информацию о CardView и RecyclerView классах.

Перевод источника. Автор Ashraff Hathibelagal. Скачать исходный код приложения.[:en]В Android, начиная с версии 5.0 Lolipop, доступны новые View-элементы экрана, которые упрощают работу со списками: RecyclerView и CardView. С помощью этих компонентов ваше приложение будет выглядеть и вести себя в соответствии с рекомендациями спецификации Google Material Design.

Предпосылки

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

Читать еще:  Восстановление системы в безопасном режиме windows 7

1. Поддержка Старых Версий

На момент написания статьи, около 5% Android-устройств работают под управлением Android Lolipop. Однако, наблюдается стремительный рост, а благодаря библиотеке поддержки v7:21, вы можете использовать RecyclerView и CardView на устройства под управлением более старых версий Android.

Для этого добавьте следующие строки в раздел dependencies в файл сборки проекта build.gradle:

2. Создание CardView

В CardView является ViewGroup. Как и с любой другой ViewGroup, с CardView можно взаимодействовать в Activity или Fragments, используя XML-файл макета.

Чтобы создать CardView, вам нужно будет добавить следующий код в ваш макет XML, как показано в следующем фрагменте:

В нашем конкретном примере нужно создать макет LinearLayout, с CardView внутри. В свою очередь, CardView будет содержать:

  • TextView для отображения имени
  • TextView для отображения возраста
  • ImageView для отображения фото

XML-код макета будет выглядеть так:

Урок 11. Работа с RecyclerView на примере TweetsRecyclerView

Код начала урока:

Добавление разделителя информации о пользователе и списка твитов

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

Видим, что нам необходимо добавить View серого цвета после информации о пользователе и разместить под ней список RecyclerView . Мы бы могли поместить эту View просто под последним TextView , но View должна занимать всю ширину. Это трудно сделать потому что у RelativeLayout установлено свойство padding , которое делает отступ перед всеми вложенными элементами. Поэтому сделаем LinearLayout корневым элементом нашего layout , в свою очередь у него будет 3 вложенных элемента:

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

Наш layout после этих преобразований выглядит так:

Наш RelativeLayout практически не изменился. Единственное что мы изменили – поменяли значения атрибута android:layout_height c match_parent на wrap_content . Это необходимо, чтобы нашему разделителю хватило места на экране.

Мы просто сделали корневым элементом LinearLayout и добавили нашу View в качестве элемента, который находится под RelativeLayout .

Знакомство с элементом RecyclerView

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

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

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

Вначале надо добавить строку implementation ‘com.android.support:recyclerview-v7:26.1.0’ в файл build.gradle , чтобы иметь доступ в коде к RecyclerView .

Далее добавим наш RecyclerView в layout файл. Не будем добавлять никаких зависимостей от соседних элементов, т.к. его родителем является LinearLayout . Просто поместим его после нашей View разделителя. И свяжем его с элементом в java коде.

В Activity мы создали отдельный метод initRecyclerView() , который вызываем в методе onCreate() .

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

Если вы сейчас запустите приложение, то увидите, что ничего визуально не изменилось. Это потому что список пуст. Чтобы в нём была какая-то информация его надо заполнить элементами. Для этого нам понадобится класс Adapter (переходник) – класс, который отвечает за связь элементов java кода с View -компонентами. Т.е. получая набор java объектов, мы должны подать его на вход в адаптер, который преобразует его уже в набор View -компонентов, которые и использует в дальнейшем RecyclerView .

Давайте создадим новый пакет adapter , где и разместим класс TweetAdapter . Вспоминаем, что надо нажать по пакету colibri.dev.com.colibritweet правой кнопкой и выбрать New -> Package . После этого вводим имя adapter .

После этого в этом пакете создаём новый java класс ( New -> Java class ), который называем TweetAdapter . Выглядеть результат должен так:

Работа с TweetAdapter

Adapter , используемый при работе с RecyclerView обязан определить объект типа ViewHolder , который предоставляет доступ ко всем View -компонентам в каждой строке списка. Давайте модифицируем наш адаптер, добавив необходимые для RecyclerView зависимости:

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

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

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

Читать еще:  Видеоадаптер перестал отвечать и был успешно восстановлен

Каждый адаптер должен реализовывать 3 главных метода:

  • onCreateViewHolder(ViewGroup parent, int viewType) – метод вызывается для создания объекта ViewHolder , в конструктор которого необходимо передать созданный View -компонент, с которым в дальнейшем будут связываться java объекты. Метод вызывается без нашего личного вмешательства, т.к. RecyclerView в себе инкапсулирует логику переиспользования элементов;
  • onBindViewHolder(TweetViewHolder holder, int position) – этот метод отвечает за связь java объекта и View . Метод также вызывается без нашего участия. Он будет вызываться чаще, чем метод onCreateViewHolder из-за того, что View компоненты будут переиспользоваться и в один и тот же визуальный элемент в процессе жизнедеятельности списка будут устанавливаться разные данные;
  • getItemCount() – сообщает количество элементов в списке.

Давайте реализуем их:

Отлично, теперь осталось добавить код, который будет заполнять данными наши View -компоненты в TweetViewHolder :

Всё, что делает данный код – используя ранее созданные View -компоненты, он заполняет их новыми данными. Таким образом происходит переиспользование View -компонентов без лишнего создания новых. Именно с этим связана следующая строка кода метода bind нашего TweetViewHolder :

Если бы переиспользования элементов не было, то достаточно было бы написать строку:

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

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

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

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

Метод String getFormattedDate(String rawDate) принимает на вход дату в формате, в котором мы получим её от сервиса. На выходе же мы получаем готовую к использованию строку даты.

Для начала нам необходимо из строк шаблонов создать java объекты SimpleDateFormat , при помощи которых мы и будем производить преобразования. Т.к. напрямую строку даты одного формата в строку другого формата преобразовать мы не можем, то нам нужен переходный элемент:

Данной операцией мы преобразовали строку, пришедшую нам от сервиса Twitter, в соответствии с шаблоном к обычном java объекту Date , которым теперь можно манипулировать каким угодно образом. Нам остаётся просто отформатировать вновь созданный объект даты в соответствии с необходимым нам шаблоном:

Добавление TweetAdapter к списку RecyclerView

Вот и всё, теперь осталось только сказать нашему RecyclerView , что за наполнение элементов в нём отвечает созданный нами адаптер. Достаточно добавить следующий код в UserInfoActivity :

Теперь давайте убедимся, что наш список действительно работает. Для этого:

  • создадим метод Collection getTweets() , который будет возвращать нам коллекцию объектов-заглушек.
  • создадим метод loadTweets() , где вызовём метод getTweets() и отобразим результат в экземпляре TweetAdapter .

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

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

В этой схеме чётко разграничены 3 слоя:
View -слой – это непосредственно сам RecyclerView , а также его «помощник» LayoutManager , который отвечает за форму отображения элементов.
Dataset – это данные, которые необходимо отобразить в списке. Могут быть представлены в любом виде: как в нашем случае – методом-заглушкой или реально запрашиваемыми с сервера данными, как мы это сделаем в следующих уроках.
* Adapter представляет собой натуральный переходник между сырыми данными и пользовательским интерфейсом, готовым к их отображению.

Вот и всё! Сегодня мы с вами приблизились к пониманию очень непростой темы.

По итогу этого урока мы полностью подготовили наш экран списка твитов для их просмотра. Осталось только получить их.

На всякий случай отобразим полный листинг кода UserInfoActivity и TweetAdapter :

RecyclerView и CardView. Новые виджеты в Android L

Как известно, в июне проходила очередная конференция Google I/O, в ходе которой было вкратце рассказано о двух новых виджетах. И поскольку на хабре об этих виджетах пока ничего не написано, я решил написать эту статью с простенькой демонстрацией.

Демо приложение доступно на гитхабе по ссылке.

Собственно, под катом можно прочесть пару слов о RecyclerView, CardView и о подключении соответствующих библиотек в Gradle. Также, можно посмотреть коротенькое видео, демонстрирующее стандартную анимацию операций со списком в RecyclerView.

RecyclerView

RecyclerView, по сути, является эволюцией одного из самых необходимых в Android-разработке виджетов — ListView. Собственно, предназначение у него ровно то же самое — отображать список элементов, но есть нюансы:

1. Обязательное использование паттерна ViewHolder. Если при использовании ListView можно было из-за отсутствия опыта использовать адаптер, создающий с нуля отдельное view для каждого элемента списка, что при большом размере списка могло обернуться меньшей отзывчивостью UI и использованием лишней памяти, то при работе с RecyclerView разработчика насильно приводят к имплементации этого паттерна. Посмотрим, как это выглядит в коде адаптера для RecyclerView:

Читать еще:  Как восстановить фото на ноутбуке после удаления

2. LayoutManager. Для использования RecyclerView кроме адаптера вам необходимо передать ему с помощью метода setLayoutManager() объект класса, реализующего LayoutManager. Этот класс отвечает за работу с адаптером, именно он решает, переиспользовать View или создать новый, и соответственно, именно он дёргает методы onCreateViewHolder(), onBindViewHolder() и getItemCount() адаптера. Пока доступна только одна реализация этого класса — LinearLayoutManager, для создания кастомного LayoutManager, необходимо унаследоваться от RecyclerView.LayoutManager.

3. Анимация операций со списком. Если вы смотрели презентацию дизайна Material, то могли заметить, что одной из основных его особенностей является плавность UI, которая достигается с помощью повсеместного использования анимации. Наверняка, при особом желании можно добавить анимацию и в ListView, мне пока не приходилось этим заниматься, но в RecyclerView это делается парой строчек кода:
— для объекта RecyclerView указывается класс, имплементирующий анимацию:

— при добавлении или удалении элемента списка вызывается метод адаптера notifyItemInserted(int position) или notifyItemRemoved(int position) соответственно.
При желании можно написать собственную реализацию анимации, унаследовавшись от RecyclerView.ItemAnimator.

4. Сырость. Нужно помнить, что виджет пока сыроват, и, возможно, его ждут существенные изменения. Например сейчас в RecyclerView нет возможности задать header и footer списка, да и вообще в интернете о нём пока довольно мало информации.

Собственно и всё о RecyclerView, на гитхабе я выложил простенькое приложение, демонстрирующее, как можно использовать этот виджет. Запустив его, можно полюбоваться на анимацию добавления/удаления элемента (а можно посмотреть видео).

CardView

CardView — это виджет, имплементирующий такой элемент дизайна Material, как карточка. По сути это контейнер, у которого можно задавать радиус скругленности углов, цвет карточки и высоту по оси z.
Например, вот такой код верстки:

даст нам следующий результат:

Сборка проекта, использующего новые виджеты

compile ‘com.android.support:cardview-v7:+’
compile ‘com.android.support:recyclerview-v7:+’

Но эти библиотеки автоматически меняют minSdk нашей сборки на версию L, поэтому для нормальной работы в AndroidManifest следует прописать параметр:

Java android recyclerview

Готовый проект будет выглядеть следующим образом:

Ссылка на основную публикацию
Adblock
detector