Dalam tip ini, Anda akan belajar cara mengintegrasikan library Butter Knife dalam proyek Anda untuk memudahkan inisiasi view-view dari layout Anda ke kode program aplikasi Anda.

Perkenalan

Dalam setiap aplikasi Android, Anda harus menggunakan method findViewById() untuk tiap view di layout yang ingin Anda gunakan di aplikasi. Tapi, ketika desain layout aplikasinya semakin rumit, pemanggilan method in menjadi terlalu banyak perulangan. Di sinilah peran library Butter Knife.

Library Butter Knife yang ditulis dan dikelola oleh Jake Wharton (Square Inc.), memiliki annotation yang membantu developer menginisiasi view-view nya dari activity dan fragment. Selain itu juga punya annotation untuk menangani even seperti onClick(), onLongClick(), dsb.

Dalam sample proyek di tutorial ini, Anda bisa lihat aplikasi dengan satu activity dan satu fragment yang diimplementasi dengan Butter Knife dan satu lagi yang diimplementasi dengan cara biasa. Mari kita pelajari langkah-langkah untuk mengintegrasikan Butter Knife.

1. Menggunakan Library Butter Knife

Langkah 1: Tambahkan Dependency

Tambahkan baris berikut di file build.gradle proyek:

compile 'com.jakewharton:butterknife:6.1.0'

Berikutnya, sinkronisasi proyek Anda dengan file ini dengan menekan tombol synchronize.

Langkah 2: Gunakan Annotation

Di setiap activity atau fragment, Anda harus membuang, atau memberi tanda comment, setiap pemanggilan method findViewById() dan tambahkan annotation @InjectView sebelum deklarasi variabel, untuk mengindikasikan identifier view tersebut.

@InjectView(R.id.sample_textview)
TextView sample_textview;

Langkah 3: Masukkan View

Di dalam method onCreate() milik activity, sebelum menggunakan view apapun, panggul inject di object Butterknife.

ButterKnife.inject(this);

Jika Anda menggunakan fragmen, Anda harus menyebutkan view-view nya di method onCreateView() seperti berikut ini.

View view = inflater.inflate(R.layout.sample_fragment, null);
ButterKnife.inject(this, view);

Sekarang Anda dapat mulai menggunakan view-view tersebut di dalam kode aplikasi Anda. Butter Knife akan menangani instansiasi setiap view-nya untuk Anda.

Hanya itu yang perlu dilakukan untuk menggunakan library Butter Knife di activity atau fragment. di bagian berikutnya, saya akan tunjukkan bagaimana menggunakan Butter Knife di list view.

2. Menggunakan Butter Knife dengan List View

Class ListView memiliki cara khusus untuk implementasi, karena Anda menginstansiasi view-view nya di dalam adapter. Untuk mengintegrasikan Butter Knife di dalam list view, Anda pertama harus membuat custom layout dulu untuk item-item di dalam list view tersebut. Saya akan menyebutnya list_view_item dan menambahkan layout berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:background="@android:color/white">
    <ImageView
        android:id="@+id/image_in_item"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <TextView
        android:id="@+id/textview_in_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_toRightOf="@+id/image_in_item"
        android:layout_marginLeft="10dp"/>
</RelativeLayout>

Dalam layout sederhana ini, kita akan menampilkan sebuah gambar dan beberapa teks. Berikutnya, kita perlu membuat adapter untuk list view-nya. Mari namakan ListViewAdapter.

public class ListViewAdapter extends BaseAdapter {

    LayoutInflater inflater;

    public ListViewAdapter(LayoutInflater inflater){
        this.inflater = inflater;
    }

    @Override
    public int getCount() {
        return 5;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return null;
    }

    static class ViewHolder{

        public ViewHolder(View view){
            
        }
    }
}

Di dalam class adapter, ada static class bernama ViewHolder. Kita akan gunakan class ini untuk menampung view-view tersebut. Mari kita implementasikan class ViewHolder seperti berikut:

static class ViewHolder{
    @InjectView(R.id.image_in_item)
    ImageView image;
    @InjectView(R.id.textview_in_item)
    TextView text;

    public ViewHolder(View view){
        ButterKnife.inject(this, view);
    }
}

Yang perlu kita lakukan adalah memodifikasi method getView() seperti berikut ini:

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;

    View view = inflater.inflate(R.layout.list_view_item, parent, false);
    holder = new ViewHolder(view);

    Picasso.with(inflater.getContext())
        .load("http://lorempixel.com/200/200/sports/" + (position+1))
        .into(holder.image);

    holder.text.setText("This is a text for the image number: "+position);

    return view;
}

Di dalam method ini, saya meng-inflate custom layout di dalam variabel view dan menggunakannya untuk membuat sebuah objek dari class ViewHolder. Perhatikan bahwa kita menggunakan class Picasso untuk memuat gambar dari internet dan mengisi text view dengan suatu text. Anda bisa menemukan tutorial tentang Picasso jika Anda ingin lebih terbiasa dengan library ini.

Jangan lupa menambahkan permission android.permission.INTERNET di Android manifest. Jika tidak, Picasso tidak akan dapat terhubung ke web untuk memuat gambar-gambar-nya dari internet.

<uses-permission android:name="android.permission.INTERNET"/>

Terakhir, yang perlu Anda lakukan adalah menginstansiasi list view dan menempelkan adapternya. Saya akan melakukan ini di activity baru, ListViewActivity, seperti berikut. Anda dapat lihat contoh implementasi ini di source file tutorial ini.

public class ListViewActivity extends ActionBarActivity {

    @InjectView(R.id.listView)
    ListView list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view);

        ButterKnife.inject(this);

        list.setAdapter(new ListViewAdapter((LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE)));
    }
}

3. Event

Anda dapat menggunakan annotation Butter Knife untuk event juga. Pilih annotation yang ingin Anda gunakan, sesuai event yang ingin Anda respon, dan letakkan sebelum method yang ingin Anda eksekusi ketika event tersebut terjadi.

@OnClick(R.id.sample_textview)
public void showToastMessage(){
    Toast.makeText(MainActivity.this, "This is a message from the activity", Toast.LENGTH_SHORT).show();
}

Kesimpulan

Anda bisa menggunakan method inject() Butter Knife dimanapun Anda suka jika ingin menghemat waktu dan perulangan, daripada menggunakan method findViewById(), untuk menginstansiasi view-view di layout. Silakan bagikan kepada teman-teman Anda jika tip ini dirasa membantu.