Data Binding merupakan sebuah teknik yang menyatukan dan menghubungkan antara komponen UI dengan data source. Konsep dari Data Binding yaitu setiap kali terdapat perubahan pada data source, maka komponen UI otomatis akan berubah. Data Binding Library di Android mulai diperkenalkan oleh Google pada event Google I/O 2015.
Sebelumnya adanya Data Binding Library, memanggil komponen UI Layout ke Activity atau Fragment dengan cara sederhana yang biasanya kita gunakan seperti memanggil komponen UI dengan findViewById, membuat variabel local untuk view terlebih dahulu kemudian mengambil nilai ataupun mengeset nilai.
Cara yang sederhana ini memang terkesan manual dan membuat banyak code yang diulang sehingga source code menjadi banyak dan tidak efisien, apalagi kalau berhubungan dengan layout yang kompleks.
Nah, dengan teknik Data Binding kita membuat aplikasi dengan cepat dan ringkas.
Bye... findViewById().
Pada tutorial kali ini saya akan menjelaskan implementasi Data Binding Library di Android. Data Binding Library merupakan support library yang sangat fleksibel, kita dapat menerapkannya mulai dari versi Android 2.1.
Pertama kita mulai mengkonfigurasikan data binding di gradle dengan code berikut :
android {
...
dataBinding {
enabled = true
}
}
Membuat Layout
Layout dengan menggunakan Data Binding berbeda dengan layout tanpa Data Binding. Tag root pada layout di awali dengan tag <layout> dan untuk mendefinisikan data model menggunakan tag <data> dan tag <variable> di dalamnya. Mengubah ataupun Mengeset properti pada layout dengan menggunakan sintak "@{}".
Berikut contohnya :
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" >
<data>
<variable
name="user"
type="example.wimsonevel.androiddatabinding.model.User" />
<variable
name="handler"
type="example.wimsonevel.androiddatabinding.EventHandler" />
</data>
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="example.wimsonevel.androiddatabinding.MainActivity">
<ImageView
android:id="@+id/img_profile"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@{user.picture}"/>
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="@{user.name}"/>
<TextView
android:id="@+id/tv_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_margin="8dp"
android:text="@{user.email}"/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More"
android:layout_margin="8dp"
android:onClick="@{handler.clicked}"/>
</LinearLayout>
</layout>
Data Model
Berikutnya adalah mendefinisikan data modelnya. Pada umumnya, kelas POJO (Plain Old Java Object) dapat digunakan untuk Data Binding. Akan tetapi, kita harus memodifikasi bagian tertentu agar data dapat berpengaruh pada UI.
Android menyediakan kelas BaseObservable yang dapat kita extend ke kelas POJO sehingga dapat menyesuaikan ketika terjadi perubahan pada data.
Berikut contoh kelas User.java
package example.wimsonevel.androiddatabinding.model;
import android.databinding.BaseObservable;
import android.databinding.Bindable;
import android.databinding.BindingAdapter;
import android.graphics.drawable.Drawable;
import android.widget.ImageView;
import example.wimsonevel.androiddatabinding.BR;
/**
* Created by Wim on 8/21/16.
*/
public class User extends BaseObservable {
private Drawable picture;
private String name;
private String email;
@Bindable
public Drawable getPicture() {
return picture;
}
public void setPicture(Drawable picture) {
this.picture = picture;
notifyPropertyChanged(BR.picture);
}
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
@Bindable
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
notifyPropertyChanged(BR.email);
}
}
Binding Data
Kelas Binding otomatis di generate sesuai dengan nama layout. Misalnya nama layoutnya “activity_main.xml” maka kelas Binding terbentuk dengan nama “ActivityMainBinding”. Kelas Binding ini ditandai dengan suffix “Binding”. Berikut implemetasinya di MainActivity.java.
package example.wimsonevel.androiddatabinding;
import android.databinding.DataBindingUtil;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import example.wimsonevel.androiddatabinding.databinding.ActivityMainBinding;
import example.wimsonevel.androiddatabinding.model.User;
public class MainActivity extends AppCompatActivity {
ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
binding.setUser(user());
binding.setHandler(new EventHandler());
}
private User user() {
User user = new User();
user.setName("Wim Sonevel");
user.setEmail("wim.sonevel93@gmail.com");
user.setPicture(ContextCompat.getDrawable(this, R.drawable.photo));
return user;
}
}
Event Handling
Data Binding dapat digunakan untuk menangani event handling. Misalnya pada atribut onclick.
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More"
android:layout_margin="8dp"
android:onClick="@{handler.clicked}"/>
Kemudian mendefinisikan kelas Handlernya :
package example.wimsonevel.androiddatabinding;
import android.view.View;
/**
* Created by Wim on 8/27/16.
*/
public class EventHandler {
public void clicked(View view) {
// Do something here
}
}
Binding in RecyclerView
Data Binding juga dapat digunakan di RecyclerView. Kita dapat membuat Custom Adapter menggunakan Data Binding seperti berikut :
package example.wimsonevel.androiddatabinding.adapter;
import android.databinding.DataBindingUtil;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
import example.wimsonevel.androiddatabinding.R;
import example.wimsonevel.androiddatabinding.databinding.ItemListBinding;
import example.wimsonevel.androiddatabinding.model.Item;
/**
* Created by Wim on 8/27/16.
*/
public class ListAdapter extends RecyclerView.Adapter<ListAdapter.ListViewHolder>{
private List<Item> itemList;
public ListAdapter(List<Item> itemList) {
this.itemList = itemList;
}
@Override
public ListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list, parent, false);
return new ListViewHolder(view);
}
@Override
public void onBindViewHolder(ListViewHolder holder, int position) {
holder.bind(itemList.get(position));
}
@Override
public int getItemCount() {
return itemList.size();
}
static class ListViewHolder extends RecyclerView.ViewHolder {
ItemListBinding binding;
public ListViewHolder(View itemView) {
super(itemView);
binding = DataBindingUtil.bind(itemView);
}
void bind(Item item) {
binding.setList(item);
binding.executePendingBindings();
}
}
}
Pada ListViewHolder disini tempat kita menginstance kelas ItemListBinding. With Picasso or Glide
Salah satu fitur penting di Data Binding Library adalah BindingAdapter. BindingAdapter adalah sebuah annotation yang memungkinkan kita untuk membuat custom atribut xml. Pada kasus ini misalkan kita ingin menampilkan image dari url menggunakan library image loader(Picasso atau Glide). Penggunaan BindingAdapter yakni dengan membuat sebuah method static kemudian mendefinisikan annotation @BindingAdapter. Contohnya berikut :
private String imgUrl;
public String getImgUrl() {
return imgUrl;
}
@BindingAdapter({"bind:imageUrl"})
public static void setImageUrlWithPicasso(ImageView imageView, String imageUrl) {
Picasso.with(imageView.getContext())
.load(imageUrl)
.into(imageView);
}
bind:imageUrl merupakan custom atribut xml yang akan dipanggil di layout.Lalu, di layout kita tinggal memanggil atribut tersebut sepert ini :
...
<ImageView
android:id="@+id/img_profile"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:imageUrl="@{user.imgUrl}"/>
...
Terakhir adalah mencoba menjalankan app yang kita buat dengan Data Binding. Maka hasilnya seperti berikut :
Untuk Source code lengkapnya dapat dilihat di https://github.com/wimsonevel/AndroidDataBinding
Sekian dari saya dan semoga bermanfaat.
Terima Kasih ^^
0 Komentar
Penulisan markup di komentar