Inspirasi adalah visi yang terkandung dalam hati & pikiran. Seni adalah ungkapan hati & pikiran yang diukir dalam berbagai bentuk. Hidup adalah inspirasi & seni dengan memanfaatkan teknologi
layout.diatas,cuma tambahkan RecyclerView dengan android:id="@+id/recycler_view"
Pembuatan Layout Item RecyclerView
Jadi, untuk membuat multiple view type di RecyclerView jelas membutuhkan 2 file layout item. Jadi, silakan buat satu file layout baru dengan nama layout_item_a.xml dan layout_item_b.xml. Yang pertama, buka file layout_item_a.xml dan isi dengan source code berikut.
Pada kedua file layout tersebut dibuat file layout_item_a.xml untuk menampilkan TextView dan file layout_item_b.xml untuk menampilkan gambar.
Pembuatan File AdapterRecyclerView
Berikutnya buat file baru dengan nama AdapterRecyclerView.kt dan isi dengan source code berikut.
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import com.ysn.multipleviewtypeexample.R
class AdapterRecyclerView(private val listViewType: List) : RecyclerView.Adapter() {
companion object {
val ITEM_A = 1
val ITEM_B = 2
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val inflater = LayoutInflater.from(parent.context)
return when (viewType) {
ITEM_A -> ViewHolderItemA(inflater.inflate(R.layout.layout_item_a, null))
else -> ViewHolderItemB(inflater.inflate(R.layout.layout_item_b, null))
}
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val viewType = listViewType[position]
when (viewType) {
ITEM_A -> {
val viewHolderA = holder as ViewHolderItemA
viewHolderA.textView.text = "Ini layout item a dengan position $position"
}
else -> {
// Lakukan sesuatu jika kamu ingin mengubah gambar pada ViewHolderItemB
}
}
}
override fun getItemCount(): Int = listViewType.size
override fun getItemViewType(position: Int): Int = listViewType[position]
open inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
inner class ViewHolderItemA(itemView: View) : ViewHolder(itemView) {
val textView: TextView = itemView.findViewById(R.id.text_view)
}
inner class ViewHolderItemB(itemView: View) : ViewHolder(itemView)
}
Pada file diatas, buat adapter untuk recyclerview dengan meng-override method getItemViewType() yang mana, ini merupakan method yang digunakan, jika ingin membuat multiple view type pada RecyclerView. alurnya adalah mengirim data objek listViewTypelewat constructor dimana, isi dari listViewType ini adalah kategori (ITEM_A atau ITEM_B) dari item yang ingin ditampilkan pada setiap position RecyclerView. Kemudian, pada method onCreateViewHolder() yang telah membuat pengkondisian dimana, jika viewType == ITEM_A maka, tampilkan ViewHolderItemA dan jika tidak maka, tampilkan ViewHolderItemB. “Darimanakah nilai viewType ini?”.Nilai viewType ini berasal dari method override getItemViewType() . Selanjutnya, di method onBindViewHolder() sehingga tinggal melakukan manipulasi untuk tiap-tiap item view holder dimana, pada contoh diatas telah memodifikasi nilai TextView pada ViewHolderItemA agar sesuai dengan nilai dari position-nya.
Langkah Terakhir
Buka file MainActivity.kt dan isi dengan source code berikut.
4. Buat layout baru dengan cara klik kanan pada layout -> new -> layout resource file
kemudian isikan file name nya dengan “list” klik ok jika sudah, maka sekarang di dalam folder layout ada 2 layout yaitu activity_main.xml sama list.xml
5. Buat assets baru dengan klik kanan pada drawable -> new -> vector assets
klik next kemudian finish
6.Buka list.xml
Kemudian tambahkan LinearLayout, Cardview, LinearLayout, Imageview dan TextView
7. Buat sebuah data class yang akan digunakan sebagai model nya dengan cara klik kanan pada package -> new -> kotlin file/class
Name diisi Users kemudian untuk kind pilih Class klik OK
ubah code pada kelas seperti berikut
data class Users (val name:String?)
bagi yang sudah terbiasa menggunakan setter-getter di java sekarang di kotlin hanya perlu membuat data class saja, fungsi nya sama kyk setter-getter di java hanya saja di kotlin pembuatan nya lebih simple.
8. Buat class baru untuk Adapter RecyclerView dengan cara klik kanan pada package -> new -> kotlin file/class
Isi saja Adapter untuk kind pilih Class klik OK.
pertama masukan parameter pada costruct class nya dengan list:ArrayList //users adalah sebuah data class yang telah dibuat sebelumnya.
class Adapter(private val list:ArrayList) : RecyclerView.Adapter(){}
setelah mengubah code dalam class adapter seperti di atas pasti akan ada error di bagian Holder, itu karena kita belum membuat class holder tsb. Class Holder tersebut akan digunakan untuk menampung ViewHolder dari recyclerview.
oke sekarang kita buat Class Holder nya dengan cara menuliskan kode berikut di dalam kelas Adapter
class Holder(val view: View) : RecyclerView.ViewHolder(view)
setelah itu kita implement 3 method dari class Adapter yaitu
onCreateViewHolder
getItemCount
onBindViewHolder
cara untuk implementasinya dengan cara klik kanan di dalam class Adapter kemudian pilih generate -> override methods… dan pilih onCreateViewHolder(parent: ViewGroup, viewType:Int), getItemCount():Int, dan onBindViewHolder(holder:AdapterHolder, position:Int):Unit, klik OK.
9.Import Kotlin Extension
import kotlinx.android.synthetic.main.list.view.*
Di kotlin ada sebuah plugin yang namanya kotlin extension di mana hal ini membuat kita tidak perlu lagi untuk init view dari masing masing layout. Jadi kita tidak perlu lagi menuliskan findViewById pada kotlin, kita cukup menggunakan plugin tsb. (bye-bye ButterKnife .. lol).
10.Setting method onCreate, OnBind, dan GetItemCount
class Holder(val view: View) : RecyclerView.ViewHolder(view)
}
11.Balik ke MainActivity
Buka kelas MainActivity kemudian buat sebuah variabel array yg berisi data-data dari users contoh : Google,Apple,Microsoft,Asus,Zenpone,Acer dan juga sebuah variable dari arrayList
Tuliskan kode berikut di bawah kode mRecylerView.layoutManager
for (i in 0 until listUsers.size){
list.add(Users(listUsers.get(i)))
if(listUsers.size - 1 == i){
// init adapter yang telah dibuat tadi
val adapter = Adapter(list)
adapter.notifyDataSetChanged()
//tampilkan data dalam recycler view
mRecyclerView.adapter = adapter
}
}
disini kita menggunakan perulangan for untuk mengisi tiap data yang ada di listUsers ke list, setelah data semua diisi maka data tersebut kita tampilkan ke dalam recyclerview.
Keseluruhan kode dari kelas MainActivity menjadi seperti berikut
