Приклад використання CardView та RecyclerView в Android

[: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.

Нарешті, необхідно перевизначити методonAttachedToRecyclerView. У нашому випадку ми просто використовуємо суперклас цього методу, як показано нижче.

Крок 5: використовуємо адаптер

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

Крок 6: компілюємо та запускаємо

При запуску нашого прикладу зCardView таRecyclerView на пристрої Android, ви повинні побачити щось подібне:

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

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