Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android Lollipop
Code

Початок роботи з RecyclerView і CardView на Android

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Як що ви цікавитесь створенням додатка Android, в якому використовуються списки для відображення даних, тоді варто знати, що Android Lollipop пропонує два нових віджета, які зроблять ваше життя набагато простішим: RecyclerView  та CardView. Дані віджети приведуть зовнішній вигляд вашого додатка в відповідність до рекомендацій, вказаних в специфікації Google щодо material design .

Попередні вимоги

Для продовження нашого уроку вам потрібна буде остання версія Android Studio. Ви можете дістати її на сайті Android Developer.

1. Підтримка старих версій.

На момент написання статті менше ніж 2% Android-пристроїв працювали з Android Lollipop. Проте завдяки v7 Support Library, ви можете використовувати віджети RecyclerView та CardView на пристроях більш ранніх версій Android, додавши наступні рядки розділу dependencies в файлі build.grade вашого проекту:

2. Створення CardView

CardView це ViewGroup. Як і будь-яку ViewGroup, її можна додати в Activity або Fragment через файл XML.

Щоб створити порожній CardView, вам необхідно додати наступний код в макет XML:

Для більш реалістичного прикладу, давайте створимо LinearLayout і помістимо в нього CardView. CardView може представляти, наприклад людину та містити наступне:

  • TextView з іменем людини
  • TextView з віком людини
  • ImageView з його фотографією

Ось як виглядатиме XML:

Якщо цей XML буде макетом Activity і в полях TextView та ImageView вагомі показники, то він буде відображатися на пристрої Android:

A Stand-alone Card

3. Створення RecyclerView

Крок 1. Визначення його в макеті.

Використання RecyclerView є дещо складнішим. Проте, визначити його в макеті XML достатньо просто. Ви можете зробити це наступним чином:

Щоб отримати до нього доступ в Activity, візьміть наступний фрагмент:

Якщо ви впевнені, що розмір RecyclerView не змінився, для підвищення продуктивності можете додати:

Крок 2. Використання LayoutManager

На відміну від ListView,  RecyclerView потребує LayoutManager для управління позиціями пунктів. Ви можете визначити свій LayoutManager шляхом розширення класу RecyclerView.LayoutManager. Проте в більшості випадків ви можете просто використовувати один з предустановлених підкласів LayoutManager:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

В даному уроці я буду використовувати LinearLayoutManager. Підклас LayoutManager по замовчуванню зробить ваш RecyclerView схожим на ListView.

Крок 3. Визначення даних

Подобно ListViewRecyclerView потрібен адаптер для доступу до нужен адаптер до своїх даних. Але перш ніж створити адаптер, давайте створимо дані, з якими ми будемо працювати. Створіть простий клас для представлення особи, а потім напишіть метод ініціалізації об’єктів List Person:

Крок 4. Створення адаптера

Створюючи адаптер для RecyclerView, надо расширить RecyclerView.Adapter. Адаптер слідує моделі view holder, що означає визначення класу користувача для розширення RecyclerView.ViewHolder. Дана модель мінімізує кількість викликів методу findViewById

Раніше в даному уроці ми вже визначили XML для CardView, який представить особу. Будемо використовувати макет повторно. Всередині конструктора користувача ViewHolder ініціалізуйте перегляди, які відносяться до елементів нашого RecyclerView.

Далі, додайте конструктор до адаптера користувача, щоб він мав доступ до даних, які відображаються RecyclerView. Оскільки наші дані представлені в вигляді об’єктів List  Person, використовуйте наступний код:

RecyclerView.Adapter має три абстрактні методи, які ми повинні замістити. Почнемо з методу getItemCount. Це поверне кількість елементів, присутніх в даних. Оскільки наші дані в List, назначаємо size на об’єкт List:

Потім заміщуємо метод onCreateViewHolder. Як видно з назви, цей метод викликається для ініціалізації ViewHolder користувача. Ми вказуємо макет, який повинен використовувати кожен елемент RecyclerView. Це робиться шляхом роздування макету за допомогою LayoutInflater, передаючи результат конструктору ViewHolder.

Замість  onBindViewHolder, щоб вказати зміст кожного елемента RecyclerView. Цей метод схожий на getView адаптера ListView. В нашому випадку, тут ми повинні встановити значення імені, віку та фото в CardView.

На кінець, замістимо метод onAttachedToRecyclerView. На даний момент ми можемо використовувати цей метод в суперкласі, як показано нижче.

Крок 5. Використання адаптера

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

Крок 6. Збір і запуск

При запуску прикладу RecyclerView на пристрої Android ви побачите дещо схоже.

Закінчення

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

Для отримання додаткової інформації про класи CardView і RecyclerView перейдіть до Android Developers через посилання.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.