Butterknife Views Binding Android

Setiap membuat aplikasi android, kita pasti menggunakan method findViewById() untuk mendefenisikan view-view yang telah kita buat pada file xml. Kalau view nya masih beberapa layout mungkin masih enak untuk penulisan nya, tapi kalau sudah mulai rumit akan memakan waktu lama dan rawan sekali kesalahan.

Disinilah peran library butterknife, dengan annotation @Bindview bisa mendeteksi view-view xml, bukan untuk view saja annotation butterknife juga bisa menangani onclick(), onitemclick(), etc.

Annotation

@BindView -> digunakan untuk view
@BindViews ->digunakan untuk view array
@BindDrawable -> digunakan untuk drawable
@BindColor -> digunakan untuk color
@BindDimen -> digunakan dimen
@BindInt ->digunakan Integer xml
@BindString -> digunakan string xml
@OnClick -> listener onClick()
@OnItemSelected -> listener OnItemSelected()

Selanjutnya kita akan mencoba implementasikan annotation diatas dalam project android.

Pertama-tama kita harus import library butterknife dengan kode berikut

implementation 'com.jakewharton:butterknife:9.0.0-rc1'
annotationProcessor 'com.jakewharton:butterknife-compiler:9.0.0-rc1'

1 2	implementation 'com.jakewharton:butterknife:9.0.0-rc1' annotationProcessor 'com.jakewharton:butterknife-compiler:9.0.0-rc1'

Setelah sync grandle kita akan membuat view seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtCategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtTitle" />

    <TextView
        android:id="@+id/txtDesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtCategory" />

    <Button
        android:id="@+id/btnButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="@string/click_me"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtDesc" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.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">

<TextView

android:id="@+id/txtTitle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:layout_marginEnd="8dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:id="@+id/txtCategory"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:layout_marginEnd="8dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/txtTitle" />

<TextView

android:id="@+id/txtDesc"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:layout_marginEnd="8dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/txtCategory" />

<Button

android:id="@+id/btnButton"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:layout_marginEnd="8dp"

android:text="@string/click_me"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/txtDesc" />

</android.support.constraint.ConstraintLayout>

Pada Main Activity kita deklarasi view-view tadi dengan menggunakan butterknife

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.txtTitle)TextView title;
    @BindView(R.id.txtCategory)TextView category;
    @BindView(R.id.txtDesc)TextView desc;
    @BindView(R.id.btnButton)Button clickMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }
}

public class MainActivity extends AppCompatActivity {

@BindView(R.id.txtTitle)TextView title;

@BindView(R.id.txtCategory)TextView category;

@BindView(R.id.txtDesc)TextView desc;

@BindView(R.id.btnButton)Button clickMe;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ButterKnife.bind(this);

}

Untuk fragment silahkan menggunakan kode berikut

ButterKnife.bind(this, view);

1	ButterKnife.bind(this, view);

Kita akan mencoba menangi method onClick() dengan butterknife

@OnClick(R.id.btnButton)
    public void setClickMe(){
        title.setText("Devtrik");
        category.setText("Website");
        desc.setText("Komputer");
        Toast.makeText(this,"success ", Toast.LENGTH_LONG).show();
    }

@OnClick(R.id.btnButton)

public void setClickMe(){

title.setText("Devtrik");

category.setText("Website");

desc.setText("Komputer");

Toast.makeText(this,"success ", Toast.LENGTH_LONG).show();

}

Ketika button Click Me di klik makan textview yang kita buat akan mengganti txtTitle dengan Devtrik, category dengan Website, desc dengan Komputer dan akan memunculkan pesan success.

@OnClick hanya salah satu contoh dari annotation dari butterknife untuk annotation lainnya hampir sama, selamat mencoba.

Kasmadi