Custom View Component Android dengan Two-Way Binding
Halo balik lagi bersama gw Wahyu Permadi, kali ini gw mau berbagi pengalaman membuat Custom View Component. Pasti kalian akan bertanya “kenapa perlu membuat custom view component ?”, nah gw sendiri membuat custom view component berawal dari pertanyaan ke diri gw sendiri “kenapa gw buat layout yang sama berulang-ulang ya ?”. Nah dari pertanyaan itu coba gw cari tahu, dan akhirnya menemukan ternyata kita bisa buat custom view sendiri sesuai dengan keperluan kita. Karena menurut gw, dengan membuat custom view component, kita bisa jauh lebih menghemat waktu dalam pembuatan UI Android.
Kali ini gw akan menjelaskan bagaimana cara membuat Custom View Component dengan Two-Way Binding. Two-Way Binding sendiri adalah dimana ketika sebuah object dapat mengirimkan data ke XML, dan XML dapat mengirimkan data kembali ke object tersebut, dengan kata lain antara object dan XML memiliki hubungan 2 arah.
Selanjutnya hal pertama yang perlu kita siapkan adalah, pastikan pada Gradle/app sudah terpasang dataBinding seperti dibawah ini.
dataBinding {
enabled = true
}Selanjutnya kita coba membuat Custom View, pertama buat dulu Custom Layout-nya, disini gw buatnya didalam XML _custom_field.xml seperti dibawah ini.
Layout tersebut akan memiliki label, sub label dan input text field seperti dibawah ini.
Kemudian kita perlu membuat attribute apa saja yang diperlukan untuk Custom View yang telah dibuat, attribute tersebut disimpan didalam attrs file di res -> values -> attrs.xml. Attribute digunakan untuk memberikan value pada Custom View yang dibuat. Sama seperti TextView bawaan Android, dimana attribute android:text digunakan untuk memberikan value ke TextView tersebut.
Disini gw memerlukan attribut value untuk set value input text field, label untuk set value Label, subLabel untuk set value sub label, dan hint untuk set value hint pada input text field.
Kemudian kita buat class sesuai dengan nama Custom View yang kita inginkan, disini gw buat dengan nama CustomTextField.kt yang isinya seperti dibawah ini.
Class CustomTextField.kt yang dibuat untuk meng-inflate layout yang dijadikan sebagai custom component, set attribute yang sudah dibuat ke custom component, set value ke custom component dan get value custom component. Proses inflate layout untuk dijadikan sebagai custom component ditunjukan pada bagian ini.
LayoutInflater.from(context).inflate(R.layout._custom_field, this, true)Proses set attribute ke custom component ditunjukan pada bagian ini.
val typedArray = context.theme.obtainStyledAttributes(
attrs,
R.styleable.CustomField,
0, 0)val value = typedArray.getString(R.styleable.CustomField_value) val label = typedArray.getString(R.styleable.CustomField_label) val information = typedArray.getString(R.styleable.CustomField_information)
val hint = typedArray.getString(R.styleable.CustomField_hint) tv_label.text = label
tv_information.text = information
acet_input.hint = hint
Kemudian kita perlu membuat fungsi untuk mengambil dan mengirimkan value input text field seperti dibawah ini.
fun setValue(data: String?){
acet_input.setText(data)
}
fun getValue(): String = acet_input.text?.toString()?: ""Setelah itu, dikarenakan kita akan membuat two-way binding, sehingga disini gw perlu membuat sebuah fungsi untuk mengambil jenis field dari input text field tersebut, seperti dibawah ini.
fun getField() : AppCompatEditText = acet_inputOkeh selesai sudah proses pembuatan CustomTextField-nya, sekarang gw lanjutkan dengan membuat binding adapter. Binding adapter gw buat seperti dibawah ini.
Annotation @InverseBindingAdapter digunakan untuk mengambil value dari CustomTextField yang dibuat, dan sebuah fungsi listener menggunakan InverseBindingListener sebagai parameter yang bertujuan untuk memberitahukan data binding bahwa value dari attribute tersebut telah berubah, dan kemudian memanggil fungsi dengan anotation @InverseBindingAdapter . Sistem two-way binding secara langsung akan membuat sebuah listener dengan nama adapter yang dibuat + AttrChanged dan menjadi app:customTextFieldValueAttrChanged . Selanjutnya kita coba implementasikan ke dalam layout pada MainActivity, seperti dibawah ini.
Value dari variabel twoway sudah otomatis berubah sesuai dengan input dari user pada CustomTextField. Hasil nya dapat dilihat dibawah ini.
Untuk full project-nya bisa dilihat di Github dibawah ini.
Sumber :
