Android studio kotlin fragment recyclerview

RecyclerView

Компонент RecyclerView появился в Android 5.0 Lollipop и находится в разделе Containers. Для простоты буду называть его списком, хотя на самом деле это универсальный элемент управления с большими возможностями.

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

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

Схематично работу RecyclerView можно представить следующим образом. На экране отображаются видимые элементы списка. Когда при прокрутке списка верхний элемент уходит за пределы экрана и становится невидимым, его содержимое очищается. При этом сам «чистый» элемент помещается вниз экрана и заполняется новыми данными, иными словами переиспользуется, отсюда название Recycle.

Компонент RecyclerView не является родственником ListView и относится к семейству ViewGroup. Он часто используется как замена ListView, но его возможности шире.

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

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

Для размещения своих дочерних элементов используется специальный менеджер макетов LayoutManager. Он может быть трёх видов.

• LinearLayoutManager — дочерние элементы размещаются вертикально (как в ListView) или горизонтально
• GridLayoutManager — дочерние элементы размещаются в сетке, как в GridView
• StaggeredGridLayoutManager — неравномерная сетка

Можно создать собственный менеджер на основе RecyclerView.LayoutManager.

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

ItemAnimator — отвечает за анимацию элементов при добавлении, удалении и других операций.

RecyclerView.Adapter связывает данные с компонентом и отслеживает изменения.

• notifyItemInserted(), notifyItemRemoved(), notifyItemChanged() — методы, отслеживающие добавление, удаление или изменение позиции одного элемента
• notifyItemRangeInserted(), notifyItemRangeRemoved(), notifyItemRangeChanged() — методы, отслеживающие изменение порядка элеметов

Стандартный метод notifyDataSetChanged() поддерживается, но он не приводит к внешнему изменению элементов на экране.

Программисты со стажем знают, что для создания «правильного» ListView нужно было создавать класс ViewHolder. В старых списках его можно было игнорировать. Теперь это стало необходимым условием.

Общая модель работы компонента.

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

Размещаем компонент в макете экрана через панель инструментов. Но сначала добавим зависимость.

Создадим макет для отдельного элемента списка. Варианты могут быть самыми разными — можно использовать один TextView для отображения строк (имена котов), можно использовать связку ImageView и TextView (имена котов и их наглые морды). Мы возьмём для примера две текстовые метки. Создадим новый файл res/layout/recyclerview_item.xml.

Добавим компонент в разметку экрана активности.

Минимальный код для запуска.

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

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

Класс MyViewHolder на основе ViewHolder служит для оптимизации ресурсов. Новый класс добавим в состав нашего созданного ранее класса.

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

Создадим адаптер — наследуем наш класс от класса RecyclerView.Adapter и в качестве параметра указываем созданный нами MyViewHolder. Студия попросит реализовать три метода.

getItemCount()

Как правило данные являются однотипными, например, список или массив строк. Адаптеру нужно знать, сколько элементов нужно предоставить компоненту, чтобы распределить ресурсы и подготовиться к отображению на экране. При работе с коллекциями или массивом мы можем просто вычислить его длину и передать это значение методу адаптера getItemCount(). В простых случаях мы можем записать код в одну строчку.

onCreateViewHolder

В методе onCreateViewHolder нужно указать идентификатор макета для отдельного элемента списка, созданный нами ранее в файле recyclerview_item.xml. А также вернуть наш объект класса ViewHolder.

onBindViewHolder()

В методе адаптера onBindViewHolder() связываем используемые текстовые метки с данными — в одном случае это значения из списка, во втором используется одна и та же строка.

Должно получиться следующее.

Подключаем в активности. Создадим пока бессмысленный список строк, который передадим в адаптер.

Запускаем ещё раз.

Вариант с числами нам не интересен, поэтому добавим котов. Имена котов и кошек разместим в ресурсах в виде массива в файле res/values/strings.xml.

Создадим новую функцию для получения списка котов из ресурсов и передадим его адаптеру.

Горизонтальная прокрутка

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

А можно вообще обойтись только XML-декларацией.

Оптимизация

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

При работе с изображениями старайтесь использовать готовые библиотеки Picasso, Glide, Fresco и т.д.

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

Не перегружайте лишним кодом метод onBindViewHolder(). Только самое необходимое.

Источник

Работа с RecyclerView в Andriod (Kotlin)

glabrion 28 октября, 2019

Что такое RecyclerView?

RecyclerView по существу является ViewGroup с контейнерами называемыми ViewHolders, которые содержат особые элементы (item). RecyclerView это большой Android класс обеспечивающий гибкий UI (пользовательский интерфейс). Огромная польза использования RecyclerView состоит в том, что Вы способны эффективно переиспользовать view. Вы не создаете все элементы списка, а храните с памяти элементы видимые на экране.

Для RecyclerView необходимо:

• массив данных
• адаптер — для привязки этих данных
• xml файл отображения отдельного элемента view
• ViewHolder для отображения данных из xml-файла.

Итак, мы познакомились с RecyclerView и с его основными компонентами. Давайте создадим свой список RecyclerView.

Начало

Мы собираемся сделать список RecyclerView . В элементе списка будет название фильма и год его выпуска. В разметке нашего фрагмента добавим элемент android.support.v7.widget.RecyclerView. В этом месте будет отображаться наш список.

Добавим так же в отдельный файл разметку:

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

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

Кастомный ViewHolders

Далее создадим класс MovieViewHolder (экземпляр этого класса по сути является элементом в списке), и создадим кастомный Adapter который будет связывать наши MovieViewHolders в RecyclerView.

Класс MovieViewHolder будет наследоваться от класса RecyclerView.ViewHolder

Наш ListAdapter мы наследуем от RecyclerView.Adapter (). Нам надо переопределить три метода: onCreateViewHolder(…) , onBindViewHolder(…) , и getItemCount() .

• getItemCount() возвращает общее количество элементов списка. Значения списка передаются с помощью конструктора.
• onCreateViewHolder() создает новый объект ViewHolder всякий раз, когда RecyclerView нуждается в этом. Это тот момент, когда создаётся layout строки списка, передается объекту ViewHolder, и каждый дочерний view -компонент может быть найден и сохранен.
• onBindViewHolder() принимает объект ViewHolder и устанавливает необходимые данные для соответствующей строки во view -компоненте.

Инициализация RecyclerView в нашем Fragment и присвоение данных списку.

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

Источник

Create RecyclerView in Android Fragment

Android Official Documentation provided a tutorial for creating a RecyclerView in Activity. However, it is a bit different when trying to create a RecyclerView in Fragment instead.

Step 1: Create a Basic Activity Project

Open Android Studio, Create new project -> select Basic Activity -> Finish Application creation. Once you run the app on emulator, you will see a single activity application with a button which allows you to switch between two fragments.

Step 2: Create a RecyclerView resource

We are going to create a RecyclerView resource in SecondFragment. Go to /res/layout/fragment_second.xml, add the following lines to create RecyclerView:

Alternatively, we can also use Palette in Android Studio to create RecyclerView:

1. Drag RecyclerView from Palette to Layout in fragment_second.xml (using Design view).
2. Define RecyclerView id as `recyclerview`.
3. Since this is created under ConstraintLayout, define Constraint Widget in 4 directions under Layout.

Step 3: Create a FrameLayout with TextView

After creating RecyclerView, we need to define resource for each item (TextView) in RecyclerView. Create a new file under /res/layout/: frame_textview.xml:

Copy the following lines to this new file.

Alternatively, you can also use Palette to create TextView

1. Drag TextView from Palette to Layout in frame_textview.xml (using Design view).
2. Define TextView id as `randomText`

Step 4: Add RecyclerView in Fragment

Under recyclerview/SecondFragment.java, add the following lines to inject recyclerView to fragment. Note that ReyclerView needs to be retrieved by using the view.findViewById() instead findViewById() directly. view can retrieved from inflater.inflate().

Step 5: Create Recycler ViewHolder

Under recyclerview/, create RecyclerViewHolder.java, add the following lines to define how to create a ViewHolder. One ViewHolder contains necessary UI information about one item in RecyclerView. In this example, itemView is the FrameLayout component from step #3. We need to retrieve and store TextView randomText from FrameLayout .

Step 6: Create RandomNumListAdapter

Under recyclerview/, create RandomNumListAdapter.java, add the following lines to define how to adapter data to RecyclerView.

Here we want to show a list of Random numbers in RecyclerView, therefore we take a randomness seed as parameter in constructor.

In getItemViewType(), we will provide the layout file which contains the TextView for list item. In this example, this is frame_textview from Step #3 .

In onCreateViewHolder(), we take the viewType which is the returned by getItemViewType(). After inflating FrameLayout to get View object, we then can use RecyclerViewHolder created by Step #5 for return value.

In onBindViewHolder(), we will bind the RecyclerViewHolder to RecyclerView. In this example, we will generate a random number at runtime for this view item. Note that random number will be generated every time a ViewHolder is bind to RecyclerView, so we can implicitly know that if an item is unbind and bind again at the same position.

Result: RecyclerView with a list of random numbers

Now all the code changes are done, run the app again and click NEXT button on emulator. If you see a list of random numbers as below, congratulations! You have created a RecyclerView in this fragment!

If you scroll down the RecyclerView, you will see more random numbers. And if you scroll up, you will find that the numbers are different than the number at the same position before. That is because the view item out of screen will be automatically recycled and bind as another view item currently on the screen. Everytime an item is bind to RecyclerView, this app will generate a new random number and set to TextView.

Источник