RecyclerView | Глубокое погружение

Глубокое погружение | Серии: 02

Категория: Android-разработчики | Котлин

Это серия блогов, которые помогут вам понять концепцию RecyclerView и продемонстрировать ее реализацию. Добро пожаловать во второй блог из серии RecyclerView - A Deep Dive. В предыдущем блоге RecyclerView - Обзор вы познакомились с RecyclerView и это поведение. В этом блоге мы рассмотрим ключевые классы RecyclerView и его реализацию с помощью простого приложения, которое отображает список данных, содержащих только текст, чтобы понять работу RecyclerView .

Резюме

Мы обсудили варианты использования RecyclerView и где они используются. Например: LinkedIn, Instagram, Facebook, Новости Google, экран истории звонков, приложение для контактов и любое ваше любимое приложение для обмена сообщениями.
RecyclerView - это представление, предоставляемое Android, и является частью Android Jetpack, разработанного для более эффективного отображения данных в списке.
Повторное использование или повторное использование RecyclerView позволяет легко и удобно реализовать список данных.

Изучение ключевых классов

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

Элемент

Все данные в списке, которые должны отображаться, являются элементом.

ViewHolders

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

Адаптер

Адаптеры отвечают за подготовку данных для представления и привязку их к ViewHolder. Данные могут быть определены в самом приложении (внутри strings.xml) или могут быть получены из базы данных, размещенной в Интернете. RecyclerView.Adapter - вот как вы определяете адаптер.

LayoutManager

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

LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager

Выше представлены менеджеры компоновки, предоставляемые нам библиотекой RecyclerView.

Хватит теории, пришло время программирования 😎

Обладая знаниями, которые мы узнали до сих пор, мы будем разрабатывать приложение, которое отображает список данных, содержащих только текст, с помощью RecyclerView. Мы будем разрабатывать приложение, которое будет отображать список имен наших друзей со слоганом. Мы назовем приложение «Мой приятель».

Шаг 1. Настройка проекта

Откройте Android Studio (моя версия 4.1)

Нажмите «Создать новый проект». ›› Пустое действие
Введите имя приложения с помощью «Мой приятель», выберите место для сохранения по своему усмотрению, язык - Kotlin, минимальный SDK - API 21: Android 5.0 (Lollipop).

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

Шаг 2. Разработка макета

Go to activity_main.xml
Удалите существующий код и добавьте следующий код между

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

Шаг 3. Давайте подготовим наши данные и адаптер

Сначала мы настроим данные для нашего RecyclerView. Для этого приложения мы будем использовать файл strings.xml для предоставления наших данных.
Добавьте следующий код в strings.xml file или вы можете написать свои собственные данные.

<resources>
    <string name="app_name">My Buddy</string>
    <string name="buddy_name">Buddy Name</string>
    <string name="buddy_tag_line">Buddy Tag line</string>

    <string name="buddy_name_1">
        Buddy Name 1
    </string>
    <string name="buddy_tag_line_1">
        Tag line for buddy name 1
    </string>

    <string name="buddy_name_2">
        Buddy Name 2
    </string>
    <string name="buddy_tag_line_2">
        Tag line for buddy name 2
    </string>

    <string name="buddy_name_3">
        Buddy Name 3
    </string>
    <string name="buddy_tag_line_3">
        Tag line for buddy name 3
    </string>

    <string name="buddy_name_4">
        Buddy Name 4
    </string>
    <string name="buddy_tag_line_4">
        Tag line for buddy name 4
    </string>

    <string name="buddy_name_5">
        Buddy Name 5
    </string>
    <string name="buddy_tag_line_5">
        Tag line for buddy name 5
    </string>

    <string name="buddy_name_6">
        Buddy Name 6
    </string>
    <string name="buddy_tag_line_6">
        Tag line for buddy name 6
    </string>

    <string name="buddy_name_7">
        Buddy Name 7
    </string>
    <string name="buddy_tag_line_7">
        Tag line for buddy name 7
    </string>

    <string name="buddy_name_8">
        Buddy Name 8
    </string>
    <string name="buddy_tag_line_8">
        Tag line for buddy name 8
    </string>

    <string name="buddy_name_9">
        Buddy Name 9
    </string>
    <string name="buddy_tag_line_9">
        Tag line for buddy name 9
    </string>

    <string name="buddy_name_10">
        Buddy Name 10
    </string>
    <string name="buddy_tag_line_10">
        Tag line for buddy name 10
    </string>

</resources>

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

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

Сначала создайте три новых пакета внутри основного пакета и назовите их «адаптер», «данные» и «модель».
Посмотрите на изображение ниже и поймите структуру нашего приложения.

Не говоря уже о файлах внутри вновь созданных пакетов, мы обсудим их ниже.
Сначала создайте класс данных внутри пакета модели и назовите его BuddyModel.kt
Мы создаем модель или формат для списка данных, то есть в каком виде и в каком порядке данные должны быть отправлены в список.
Добавьте приведенный ниже код внутрь BuddyModel.kt

Когда мы создаем список данных на основе этой модели, вызывающий может передавать аргументы в неправильном порядке, чтобы избежать этой ошибки, мы используем r аннотации esource, это проверяет, передаются ли данные в желаемый заказ или нет.
Затем мы создаем класс BuddyData.kt внутри пакета данных. Здесь мы фактически создаем список данных, которые мы извлекаем из strings.xml файла.
Добавьте приведенный ниже код внутрь BuddyData.kt

Теперь наш список данных готов. Далее идет адаптер, который связывает ViewHolder и данные.
Создайте BuddyAdapter.kt внутри пакета адаптера.
Сначала объявите переменные, которые нам нужны для класса адаптера. Мы передадим контекст и данные из основного действия в адаптер.
Внутри BuddyAdapter Class создайте ItemViewHolder Class, как показано ниже.

class BuddyAdapter(
        private val context: Context,
        private val dataset: List<BuddyModel>
): RecyclerView.Adapter<BuddyAdapter.ItemViewHolder>() {

    class ItemViewHolder(view: View): RecyclerView.ViewHolder(view) {
        val buddyName: TextView = view.findViewById(R.id.buddy_name)
        val buddyTagLine: TextView = view.findViewById(R.id.buddy_tag_line)
    }
}

На этом этапе вы заметите ошибку в классе BuddyAdapter, поместите курсор на имя класса, и вам будет предложено реализовать элементы абстрактного базового класса, как показано на изображении ниже. Щелкните на всех трех членах, чтобы получить код котла.

Вам потребуется переопределить три функции с членами базового класса.
Сначала мы переопределяем функцию onCreateViewHolder. Здесь мы раздуваем макет ViewHolder, то есть item_layout.xml

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
    return ItemViewHolder(
            LayoutInflater.from(parent.context)
                    .inflate(R.layout.item_layout, parent, false)
    )
}

Затем мы переопределяем функцию onBindViewHolder, здесь мы привязываем данные, которые передаются из основного класса активности, и макет ViewHolder, и здесь определяются другие действия, такие как onclick или любая другая функция.

override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
    val item = dataset[position]
    holder.buddyName.text = context.resources.getString(item.buddyNameResourceId)
    holder.buddyTagLine.text = context.resources.getString(item.buddyTagLineResourceId)
}

Приведенный выше код очень прост: мы получаем текст из набора данных, то есть BuddyData, и передаем его в соответствующие представления макета.
Наконец, мы переопределяем getItemCount и возвращаем общий размер нашего набора данных. Ниже приведен полный код для BuddyAdapter.kt

Мы закончили с шагом 3.

Шаг 4: Добавление RecyclerView в MainActivity

В MainActivity.kt мы инициализируем представление ресайклера и его адаптер.

Шаг 5. Создайте и запустите свой проект

Перейдите в Build ›› Make Project, чтобы создать свой проект. После успешной сборки вы можете запустить приложение.
Вы можете запустить свое приложение на своем физическом устройстве или использовать эмулятор, предоставленный Android Studio.

Мой приятель готов.
Вы можете получить полный проект здесь

Что дальше?

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