Как извлечь данные из массива JSON в Android с помощью библиотеки Retrofit?

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

В предыдущей статье об анализе JSON в Android с использованием библиотеки Retrofit мы увидели, как мы можем получить данные из объекта JSON в нашем приложении для Android и отобразить этот объект JSON в нашем приложении. В этой статье мы рассмотрим, как извлечь данные из массива JSON и отобразить их в нашем приложении.

Note: To extract Data from JSON Array in Android using Volley Library please refer to How to Extract Data from JSON Array in Android using Volley Library?

JSON Array: JSON Array is a set or called a collection of data that holds multiple JSON Objects with similar sort of data. JSON Array can be easily identified with “[” braces opening and “]” braces closing. A JSON array is having multiple JSON objects which are having similar data. And each JSON object is having data stored in the form of key and value pair.

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

Мы создадим простое приложение, в котором мы будем отображать список CardView, в котором мы будем отображать некоторые курсы, доступные на Geeks for Geeks. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java .

Ниже приведен наш массив JSON, из которого мы будем отображать данные в нашем приложении для Android.

[
   {
      "courseName":"Fork CPP",
      "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png",
      "courseMode":"Online Batch",
      "courseTracks":"6 Tracks"
   },
   {
      "courseName":"Linux & Shell Scripting Foundation",
      "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/linux-shell-scripting-thumbnail.png",
      "courseMode":"Online Batch",
      "courseTracks":"8 Tracks"
   },
   {
      "courseName":"11 Weeks Workshop on Data Structures and Algorithms",
      "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/Workshop-DSA-thumbnail.png",
      "courseMode":"Online Batch",
      "courseTracks":"47 Tracks"
   },
   {
      "courseName":"Data Structures and Algorithms",
      "courseimg":"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png",
      "courseMode":"Online Batch",
      "courseTracks":"24 Tracks"
   }
]

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

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

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

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

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

// below dependency for using retrofit.
implementation ‘com.squareup.retrofit2:retrofit:2.9.0’
implementation ‘com.squareup.retrofit2:converter-gson:2.5.0’
// below dependency for using picasso image loading library
implementation ‘com.squareup.picasso:picasso:2.71828’

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

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

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

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

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

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--progress bar for loading indicator-->
    <ProgressBar
        android:id="@+id/idPBLoading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
     
    <!--creating a recycler view for displaying
        our list of courses-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourse"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
     
</RelativeLayout>

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

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

Java

public class RecyclerData {
    // string variables for our data
    // make sure that the variable name
    // must be similar to that of key value
    // which we are getting from our json file.
    private String courseName;
    private String courseimg;
    private String courseMode;
    private String courseTracks;
 
    public String getCourseName() {
        return courseName;
    }
 
    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }
 
    public String getCourseimg() {
        return courseimg;
    }
 
    public void setCourseimg(String courseimg) {
        this.courseimg = courseimg;
    }
 
    public String getCourseMode() {
        return courseMode;
    }
 
    public void setCourseMode(String courseMode) {
        this.courseMode = courseMode;
    }
 
    public String getCourseTracks() {
        return courseTracks;
    }
 
    public void setCourseTracks(String courseTracks) {
        this.courseTracks = courseTracks;
    }
 
    public RecyclerData(String courseName, String courseimg, String courseMode, String courseTracks) {
        this.courseName = courseName;
        this.courseimg = courseimg;
        this.courseMode = courseMode;
        this.courseTracks = courseTracks;
    }
}

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

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

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:layout_margin="8dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
 
        <!--image view to display our course image-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_margin="5dp" />
 
        <!--text view for our course name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:padding="5dp"
            android:text="Course Name "
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="horizontal"
            android:weightSum="2">
 
            <!--text view for our batch name-->
            <TextView
                android:id="@+id/idTVBatch"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="5dp"
                android:text="Batch"
                android:textColor="@color/black" />
 
            <!--text view to display course tracks-->
            <TextView
                android:id="@+id/idTVTracks"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="5dp"
                android:text="Tracks"
                android:textColor="@color/black" />
        </LinearLayout>
     
    </LinearLayout>
     
</androidx.cardview.widget.CardView>

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

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

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 RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder> {
 
    // creating a variable for our array list and context.
    private ArrayList<RecyclerData> courseDataArrayList;
    private Context mcontext;
 
    // creating a constructor class.
    public RecyclerViewAdapter(ArrayList<RecyclerData> recyclerDataArrayList, Context mcontext) {
        this.courseDataArrayList = recyclerDataArrayList;
        this.mcontext = mcontext;
    }
 
    @NonNull
    @Override
    public RecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate Layout
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_layout, parent, false);
        return new RecyclerViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull RecyclerViewHolder holder, int position) {
        // Set the data to textview from our modal class.
        RecyclerData modal = courseDataArrayList.get(position);
        holder.courseNameTV.setText(modal.getCourseName());
        holder.courseTracksTV.setText(modal.getCourseTracks());
        holder.courseModeTV.setText(modal.getCourseMode());
        Picasso.get().load(modal.getCourseimg()).into(holder.courseIV);
    }
 
    @Override
    public int getItemCount() {
        // this method returns the size of recyclerview
        return courseDataArrayList.size();
    }
 
    // View Holder Class to handle Recycler View.
    public class RecyclerViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our views.
        private TextView courseNameTV, courseModeTV, courseTracksTV;
        private ImageView courseIV;
 
        public RecyclerViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our views with their ids.
            courseNameTV = itemView.findViewById(R.id.idTVCourseName);
            courseModeTV = itemView.findViewById(R.id.idTVBatch);
            courseTracksTV = itemView.findViewById(R.id.idTVTracks);
            courseIV = itemView.findViewById(R.id.idIVCourse);
        }
    }
}

Шаг 8: Создание класса интерфейса для написания наших вызовов API

Перейдите к приложению> java> имя пакета вашего приложения> Щелкните его правой кнопкой мыши> Создать> Класс Java, выберите его как Интерфейс и назовите файл как RetrofitAPI и добавьте к нему приведенный ниже код. Комментарии добавляются внутри кода, чтобы понять код более подробно.

Java

import java.util.ArrayList;
 
import retrofit2.Call;
import retrofit2.http.GET;
 
public interface RetrofitAPI {
 
    // as we are making get request so we are displaying
    // GET as annotation.
    // and inside we are passing last parameter for our url.
    @GET("WO6S")
     
    // as we are calling data from array so we are calling
    // it with array list and naming that method as getAllCourses();
    Call<ArrayList<RecyclerData>> getAllCourses();
}

Шаг 9: Работа с файлом 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.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
 
import java.util.ArrayList;
 
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
 
public class MainActivity extends AppCompatActivity {
     
    // creating a variable for recycler view,
    // array list and adapter class.
    private RecyclerView courseRV;
    private ArrayList<RecyclerData> recyclerDataArrayList;

                    
                                            Technical Scripter
                                            Android
                                            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. Все права защищены.
            