Indonesian (Bahasa Indonesia) translation by Amri Shodiq (you can also view the original English article)
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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post