Retrofit2 di Android menggunakan Kotlin

Hari ini kami akan mempertimbangkan untuk bekerja dengan Retrofit 2. Demi kebenaran, perlu dicatat bahwa kami akan bekerja dengan 2 perpustakaan yang lebih terpisah, yaitu Picasso dan Spots-dialog .



Saya merekomendasikan artikel ini untuk dibaca hanya untuk mereka yang belum bekerja dengan Retrofit 2. Bagaimanapun, dalam artikel ini saya akan menjelaskan semuanya sedetail mungkin agar semua orang mengerti.



0. Pembuatan proyek



Semuanya di sini sesederhana mungkin, buat proyek baru di Android Studio, pilih Empty Activity. Selanjutnya, Anda perlu memilih bahasa pemrograman, kami akan memilikinya Kotlin.



1. Tambahkan dependensi



Sekarang kita perlu menambahkan semua pustaka yang diperlukan, jadi kita pergi ke build.gradle dan tambahkan yang berikut ini:



dependencies {
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.5.0'
    implementation 'com.squareup.picasso:picasso:2.71828'

    //noinspection GradleCompatible
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.github.d-max:spots-dialog:1.1@aar'
}


Seperti yang mungkin Anda perhatikan, di sini kami telah menambahkan semua pustaka yang diperlukan, termasuk dialog kemajuan Spots. Anda dapat membaca lebih lanjut di sini. Kemudian di build.gradle (Modul: app) kita harus memasukkan ini:



 compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }


Tetap hanya untuk pergi ke manifes dan menambahkan izin untuk menggunakan telepon
  <uses-permission android:name="android.permission.INTERNET"/>




2. Menambahkan kelas data



Sebelum melanjutkan ke poin kedua, kita perlu mencari tahu dari mana mendapatkan datanya? Parse akan dari sini.



Bagus, lalu salin konten situs ini dan buka di sini. Di sini kami menempelkan teks yang sebelumnya disalin dari situs kami, setelah kami mengklik pohon kami diberi daftar, buka, sekarang kami melihat bahwa kami memiliki 8 objek. Jika seseorang tidak mengerti, maka saya akan menunjukkan layar:







Apa yang Anda lihat di sebelah kanan adalah teks kami yang kami salin, dan yang di sebelah kanan adalah data yang sudah diproses.



Sekarang kembali ke Android Studio, kami membuat folder, kami menyebutnya Model, di sana kami membuat kelas kotlin dan menamainya Film dari kelas biasa, kami mengubah kelas data, kami hanya menambahkan data sebelum kelas, dan mengganti tanda kurung kurawal, kemudian kami menunjukkan variabel yang sudah kami miliki dalam tanda kurung. dimata-matai di situs, dengan cara variabel harus berjenis nullable.



Kode lengkap
data class Movie(
    var name: String? = null,
    var realname: String? = null,
    var team: String? = null,
    var firstapperance: String? = null,
    var createdby: String? = null,
    var publisher: String? = null,
    var imageurl: String? = null,
    var bio: String? = null
)




Jika Anda bertanya-tanya mengapa folder itu disebut Model, maka saya akan memberi tahu Anda bahwa:



Model adalah logika yang terkait dengan data aplikasi. Dengan kata lain, ini adalah POJO, kelas untuk bekerja dengan API, database.



3. Penciptaan Klien



Selanjutnya kita buat folder Retrofit, dan di folder tersebut kita buat objek dan beri nama RetrofitClient, lalu kita buat variabel retrofit tipe Retrofit, setelah itu kita buat function dan beri nama getCleint (baseUrl: String) dan return type adalah Retrofit. Di badan fungsi, perlu untuk memeriksa retrofit untuk null dan jika retrofit adalah null, maka kita menetapkan Retrofit ke retrofit.Builder () melampirkan baseUrl dengan parameter baseUrl, lalu memasang metode addconverterFactory dengan parameter GsonConverterFactory.create () dan build menggunakan build ( ) dan mengembalikan retrofit ke tipe bukan nol



Kode lengkap

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object RetrofitClient {
    private var retrofit: Retrofit? = null

    fun getClient(baseUrl: String): Retrofit {
        if (retrofit == null) {
            retrofit = Retrofit.Builder()
                .baseUrl(baseUrl)
                .addConverterFactory(GsonConverterFactory.create())
                .build()
        }
        return retrofit!!
    }
}




Builder in Retrofit adalah instance yang menggunakan antarmuka Builder dan API untuk menentukan definisi endpoint URL untuk operasi HTTP



4. Bekerja dengan Interface



Antarmuka - diperlukan untuk membuat kelas abstrak.



Buat paket Antarmuka di dalamnya kami meletakkan Antarmuka dan beri nama RetrofitServieces. Buat permintaan Get dalam tanda kurung, tulis tanda kutip, dan dalam tanda kutip menunjukkan cabang dari mana kita akan mengurai datanya, ini adalah keajaiban. Tetapi sebelum itu, perlu dikatakan apa permintaan GET dan POST itu

GET - meminta data dari sumber daya tertentu (situs)

POST - mengirim data ke server untuk diproses lebih lanjut.



Oke, sekarang Anda perlu membuat fungsi getMovieList, yang seharusnya mengembalikan panggilan jenis MutableList, dan MutableList seharusnya Jenis film



Kode lengkap

import com.example.retrofitmarvel.Model.Movie
import retrofit2.Call
import retrofit2.http.*

interface RetrofitServices {
    @GET("marvel")
    fun getMovieList(): Call<MutableList<Movie>>
}




5. Umum



Sekarang kita harus membuat folder Common, di folder ini kita meletakkan objek dan menamainya Common, buat variabel, beri nama BASE_URL dan di dalamnya kita harus meletakkan tautan dari mana kita mengurai data, tetapi jangan meletakkan cabang terakhir, karena dari sanalah kita menerima data ... Kami membuat variabel retrofitServices, memiliki metode get (), kami menetapkan RetrofitClient padanya, dan hanya kemudian kami menghubungkan metode getClient dengan parameter RetrofitServices :: class.java ke RetrofitClient



Kode lengkap

import com.example.retrofitmarvel.Interface.RetrofitServices
import com.example.retrofitmarvel.Retrofit.RetrofitClient

object Common {
    private val BASE_URL = "https://www.simplifiedcoding.net/demos/"
    val retrofitService: RetrofitServices
        get() = RetrofitClient.getClient(BASE_URL).create(RetrofitServices::class.java)
}




6. Tata Letak



Buka activity_main.xml dan tambahkan RecyclerView di sana



XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerMovieList"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>




Di folder layout, buat item_layout di elemen root, tentukan CardView



item_layout
<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"
    app:cardElevation="8dp"
    android:layout_margin="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="167dp">


        <ImageView
            android:id="@+id/image_movie"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/txt_name"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.238" />

        <TextView
            android:id="@+id/txt_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="192dp"
            android:layout_marginLeft="192dp"
            android:layout_marginTop="16dp"
            android:text="name"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txt_team"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="196dp"
            android:layout_marginLeft="196dp"
            android:layout_marginTop="8dp"
            android:text="team"
            android:textColor="@android:color/black"
            android:textSize="16sp"
            android:textStyle="normal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt_name" />

        <TextView
            android:id="@+id/txt_createdby"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="184dp"
            android:layout_marginLeft="184dp"
            android:layout_marginTop="12dp"
            android:text="createdby"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="italic"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt_team" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>




7. Adaptor



Sekarang kita harus membuat paket Adapter, di mana kita meletakkan kelas dan menyebutnya MyMovieAdapter

Adapter bertanggung jawab untuk mengambil data dari set data dan untuk membuat objek View berdasarkan data ini.



Di kelas MyMovieAdapter, kita membuat variabel yang hanya akan tersedia di kelas ini private val movieList: MutableList jenis Movie dan menentukan jenis kembalian, kita akan memilikinya RecyclerView.Adapter jenis MyMovieAdapter.MyViewHolder



Menerapkan metode, yaitu onCreateViewHolder, getItemCount dan onBindViewHolder

Kita membuat kelas MyViewHolder, di kelas ini kita menentukan parameter itemView: View dan tipe kembalian RecyclerView.ViewHolder dan kita meletakkan variabel di badan kelas ini, misalnya:



val image: ImageView = itemView.image_movie image_movie diambil dari item_layout

dan kami menentukan untuk semua item tampilan yang tersisa.



Mari buat fungsi bind dengan parameter listItem: Movie, di sini kita bisa membuat item view kita bisa diklik, saya rasa Anda bisa melakukannya.



Selanjutnya, kita menulis ulang getItemCount () untuk menimpa getItemCount () = movieList.size yang menyenangkan. Semuanya sederhana di sini, kami membuat fungsi dan mengembalikan movieList.size. Bagus, yang tersisa hanyalah berurusan dengan onBindViewHolder dan onCreateViewHolder



onCreateViewHolder - membuat objek ViewHolder baru setiap kali RecyclerView membutuhkannya.



onBindViewHolder - mengambil objek ViewHolder dan menyetel data yang diperlukan untuk baris terkait dalam komponen tampilan



Sekarang kita akan menganalisis kasus dengan tipe kembalian onCreateViewHolder MyViewHolder.

Buat variabel itemView, tetapkan LayoutInflater.from (parent.context) .inflate (R.layout.item_layout, parent, false) dan kembalikan MyViewHolder dengan parameter itemView. Sekarang pergi ke onBindViewHolder di body kita membuat variabel listItem: Movie dan menetapkan movieList [posisi]. Selanjutnya, kami melampirkan metode bind dengan parameter listItem ke holder'y. Selanjutnya, kami menggunakan perpustakaan Picasso.



Picasso.get (). Muat (daftar film [posisi] .imageurl). Ke (holder.image). Kemudian tambahkan holder.txt_name.text = movieList [posisi] .name, dan inilah yang kami lakukan dengan semua elemen tampilan kami



Kode lengkap

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 android.widget.Toast
import androidx.recyclerview.widget.RecyclerView
import com.example.retrofitmarvel.Model.Movie
import com.example.retrofitmarvel.R
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.item_layout.view.*

class MyMovieAdapter(private val context: Context,private val movieList: MutableList<Movie>):RecyclerView.Adapter<MyMovieAdapter.MyViewHolder>() {

    class MyViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
        val image: ImageView = itemView.image_movie
        val txt_name: TextView = itemView.txt_name
        val txt_team: TextView = itemView.txt_team
        val txt_createdby: TextView = itemView.txt_createdby

        fun bind(listItem: Movie) {
            image.setOnClickListener {
                Toast.makeText(it.context, "  ${itemView.image_movie}", Toast.LENGTH_SHORT)
                    .show()
            }
            itemView.setOnClickListener {
                Toast.makeText(it.context, "  ${itemView.txt_name.text}", Toast.LENGTH_SHORT).show()
            }
        }
    }

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

    override fun getItemCount() = movieList.size

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val listItem = movieList[position]
        holder.bind(listItem)

        Picasso.get().load(movieList[position].imageurl).into(holder.image)
        holder.txt_name.text = movieList[position].name
        holder.txt_team.text = movieList[position].team
        holder.txt_createdby.text = movieList[position].createdby
    }

}





8. MainActivity



Luar biasa! Tersisa sedikit. Masuk ke MainActivity untuk memulai, kita akan membuat variabel, dan agar tidak mendeklarasikan tipe null, kita akan mendeklarasikannya melalui lateinit var mService: RetrofitServices, kita perlu membuat 3 lagi, yaitu: LinearLayoutManager, MyMovieAdapter, AlertDialog. Anda dapat memanggil mereka apa pun yang Anda inginkan, tidak masalah. Dalam metode onCreate, kami menetapkan Common.retrofitServices ke RetrofitServices. Pada baris berikutnya, kami melampirkan setHasFixedSize (true) ke recyclerView kami - berkat metode ini kami dapat mengoptimalkan daftar kami, lalu kami menetapkan LinearLayoutManager (this) ke layoutManager kami.



Manajer Tata Letak- ini adalah hal yang bertanggung jawab atas pemosisian komponen View yang tidak lagi terlihat oleh pengguna. Lebih lanjut, semuanya semudah melampirkan ke daftar layoutManager kita dan sudah menetapkan layoutManager ke sini. Oke, sekarang bekerja dengan pustaka SpotsDialog. kita menetapkan variabel bernama sebelumnya dengan jenis AlertDialog kita menetapkan SpotsDialog kita melampirkan metode Builder setelah itu kita melampirkan metode setCancelablec dengan parameter true untuk ini kita harus melampirkan metode setContext dengan parameter ini dan melampirkan metode build.



Sekarang kita harus membuat fungsi baru di luar metode onCreate yang disebut fungsi getAllMovieList. Dalam tubuh fungsi ini, kita harus menentukan dialog kita dan melampirkan metode show () ke dalamnya,

lalu menambahkan metode getMovieList ke mService .enqueue (object: Callback <MutableList> {)



Sekarang kita perlu mengimplementasikan metode, kita memiliki dua di antaranya onResponse dan onFailure

dan di onResponse, yaitu di tubuh metode ini kita tetapkan ke adapter'y



MyMovieAdapter(baseContext, response.body() as MutableList<Movie>)


selanjutnya, kami menetapkan metode notifyDataSetChanged () ke adapter'y. Ke daftar kami, kami melampirkan adaptor dan menetapkan adaptor. lalu kami menetapkan metode pemberhentian () ke dialog. Ini berarti dialog kita akan hilang setelah data kita dimuat.



Kode lengkap

import android.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.retrofitmarvel.Adapter.MyMovieAdapter
import com.example.retrofitmarvel.Common.Common
import com.example.retrofitmarvel.Interface.RetrofitServices
import com.example.retrofitmarvel.Model.Movie
import com.example.retrofitmarvel.R

import dmax.dialog.SpotsDialog
import kotlinx.android.synthetic.main.activity_main.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class MainActivity : AppCompatActivity() {

    lateinit var mService: RetrofitServices
    lateinit var layoutManager: LinearLayoutManager
    lateinit var adapter: MyMovieAdapter
    lateinit var dialog: AlertDialog

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mService = Common.retrofitService
        recyclerMovieList.setHasFixedSize(true)
        layoutManager = LinearLayoutManager(this)
        recyclerMovieList.layoutManager = layoutManager
        dialog = SpotsDialog.Builder().setCancelable(true).setContext(this).build()

        getAllMovieList()
    }

    private fun getAllMovieList() {
        dialog.show()
        mService.getMovieList().enqueue(object : Callback<MutableList<Movie>> {
            override fun onFailure(call: Call<MutableList<Movie>>, t: Throwable) {

            }

            override fun onResponse(call: Call<MutableList<Movie>>, response: Response<MutableList<Movie>>) {
                adapter = MyMovieAdapter(baseContext, response.body() as MutableList<Movie>)
                adapter.notifyDataSetChanged()
                recyclerMovieList.adapter = adapter

                dialog.dismiss()
            }
        })
    }
}




Luar biasa! Di artikel ini, kami mempelajari cara bekerja dengan Retrofit2 dan memasukkannya ke dalam RecyclerView.



All Articles