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.