Как реализовать разбиение на страницы в Android RecyclerView с помощью Volley?

Опубликовано: 2 Сентября, 2022

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

Что такое пагинация?

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

В чем преимущество использования разбиения на страницы в ваших списках данных?

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

Что мы собираемся построить в этой статье?

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

Пошаговая реализация

Шаг 1: Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». Обратите внимание, что в качестве языка программирования выберите Java .

Шаг 2. Добавьте приведенную ниже зависимость в файл build.gradle.

Ниже приведена зависимость для Volley, которую мы будем использовать для получения данных из API. Чтобы добавить эту зависимость, перейдите в приложение > Gradle Scripts > build.gradle(app) и добавьте приведенную ниже зависимость в раздел зависимостей. Мы использовали зависимость Picasso для загрузки изображения с URL-адреса.

// below dependency for using picasso image loading library and volley
implementation ‘com.squareup.picasso:picasso:2.71828’
implementation ‘com.android.volley:volley:1.1.1’

После добавления этой зависимости синхронизируйте свой проект и теперь переходите к части AndroidManifest.xml .

Шаг 3. Добавление разрешений в Интернет в файле AndroidManifest.xml

Перейдите к приложению > AndroidManifest.xml и добавьте в него приведенный ниже код.

XML

<uses-permission android:name="android.permission.INTERNET" />

Шаг 4: Работа с файлом activity_main.xml

Перейдите к приложению > res > layout > activity_main.xml и добавьте приведенный ниже код в этот файл. Ниже приведен код файла activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<!--in this we are displaying a nested scroll view-->
<androidx.core.widget.NestedScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idNestedSV"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--linear layout for displaying
        our recycler view-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
          
        <!--recycler view for displaying our list of data
            and we are making nested scroll for our 
            recycler view as false-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/idRVUsers"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:nestedScrollingEnabled="false"
            tools:listitem="@layout/user_rv_item" />
          
        <!--we are adding progress bar
            for the purpose of loading-->
        <ProgressBar
            android:id="@+id/idPBLoading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
      
</androidx.core.widget.NestedScrollView>

Шаг 5: Создание модального класса для хранения наших данных

Для хранения наших данных мы должны создать новый класс Java. Для создания нового класса Java перейдите к приложению > java > имени пакета вашего приложения > щелкните его правой кнопкой мыши > Создать > класс Java и назовите его как UserModal и добавьте к нему приведенный ниже код. Комментарии добавляются внутри кода, чтобы понять код более подробно.

Java

public class UserModal {
    // variables for our first name, 
    // last name, email and avatar
    private String first_name;
    private String last_name;
    private String email;
    private String avatar;
  
    public String getFirst_name() {
        return first_name;
    }
  
    public void setFirst_name(String first_name) {
        this.first_name = first_name;
    }
  
    public String getLast_name() {
        return last_name;
    }
  
    public void setLast_name(String last_name) {
        this.last_name = last_name;
    }
  
    public String getEmail() {
        return email;
    }
  
    public void setEmail(String email) {
        this.email = email;
    }
  
    public String getAvatar() {
        return avatar;
    }
  
    public void setAvatar(String avatar) {
        this.avatar = avatar;
    }
  
    public UserModal(String first_name, String last_name, String email, String avatar) {
        this.first_name = first_name;
        this.last_name = last_name;
        this.email = email;
        this.avatar = avatar;
    }
}

Шаг 6: Создание файла макета для каждого элемента нашего RecyclerView

Перейдите к приложению> res> layout> щелкните его правой кнопкой мыши> New> файл ресурсов макета и укажите имя файла как user_rv_item и добавьте к нему приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">
  
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="2dp">
  
        <!--image view for displaying user image-->
        <ImageView
            android:id="@+id/idIVUser"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp" />
  
        <!--text view for displaying first name-->
        <TextView
            android:id="@+id/idTVFirstName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVUser"
            android:layout_toRightOf="@id/idIVUser"
            android:text="First Name"
            android:textColor="@color/black"
            android:textSize="15sp" />
  
        <!--text view for displaying last name-->
        <TextView
            android:id="@+id/idTVLastName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVFirstName"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVUser"
            android:layout_toRightOf="@id/idIVUser"
            android:text="Last Name"
            android:textColor="@color/black"
            android:textSize="15sp" />
  
        <!--text view for displaying user email-->
        <TextView
            android:id="@+id/idTVEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVLastName"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVUser"
            android:layout_toRightOf="@id/idIVUser"
            android:text="Email"
            android:textColor="@color/black"
            android:textSize="15sp" />
  
    </RelativeLayout>
  
</androidx.cardview.widget.CardView>

Шаг 7: Создание класса адаптера для установки данных в наш элемент RecyclerView

Для создания нового класса адаптера перейдите к приложению> java> имя пакета вашего приложения> щелкните его правой кнопкой мыши> Создать> класс Java и назовите его как UserRVAdapter и добавьте к нему приведенный ниже код.

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class UserRVAdapter extends RecyclerView.Adapter<UserRVAdapter.ViewHolder> {
     
    // variable for our array list and context.
    private ArrayList<UserModal> userModalArrayList;
    private Context context;
  
    // creating a constructor.
    public UserRVAdapter(ArrayList<UserModal> userModalArrayList, Context context) {
        this.userModalArrayList = userModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflating our layout file on below line.
        View view = LayoutInflater.from(context).inflate(R.layout.user_rv_item, parent, false);
        return new ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
          
        // getting data from our array list in our modal class.
        UserModal userModal = userModalArrayList.get(position);
          
        // on below line we are setting data to our text view.
        holder.firstNameTV.setText(userModal.getFirst_name());
        holder.lastNameTV.setText(userModal.getLast_name());
        holder.emailTV.setText(userModal.getEmail());
          
        // on below line we are loading our image 
        // from url in our image view using picasso.
        Picasso.get().load(userModal.getAvatar()).into(holder.userIV);
    }
  
    @Override
    public int getItemCount() {
        // returning the size of array list.
        return userModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating a variable for our text view and image view.
        private TextView firstNameTV, lastNameTV, emailTV;
        private ImageView userIV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
              
            // initializing our variables.
            firstNameTV = itemView.findViewById(R.id.idTVFirstName);
            lastNameTV = itemView.findViewById(R.id.idTVLastName);
            emailTV = itemView.findViewById(R.id.idTVEmail);
            userIV = itemView.findViewById(R.id.idIVUser);
        }
    }
}

Шаг 8: Работа с файлом MainActivity.java

Перейдите к файлу MainActivity.java и обратитесь к следующему коду. Ниже приведен код файла MainActivity.java . Комментарии добавляются внутри кода, чтобы понять код более подробно.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;

                    
                                            Technical Scripter
                                            Java
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКоличество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023
Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты
27 Февраля, 2023
Найдите общее количество фигур 'X'
26 Февраля, 2023
Максимальное значение узла, которое может быть достигнуто с использованием данных соединений
26 Февраля, 2023

                    < PROGLER >

                

                    Общее
Контакты
Политика конфиденциальности

                    Обучение
Блог

                

                © progler.ru 2024. Все права защищены.
            