(Tutorial Android) Method Binding For Android Views Using Butter Knife



Butter Knife merupakan library binding untuk Android. Pada umumnya di aplikasi android, kita memakai method findViewById() untuk menginstance atau memanggil setiap view yang ada pada layout yang akan kita gunakan. Dengan memakai Butter Knife kita sanggup mem-binding istilahnya view-view yang ada pada layout. Butter Knife memakai annotation processing untuk menginstance suatu view ke activity maupun fragment. Selain itu juga annotations sanggup dipakai untuk handling events sepeti OnClick, OnItemClick dan sebagainya.

Butter Knife dikembangkan oleh Jake Wharton, orang yang berkontribusi besar dalam pengembangan library ini. Library ini sangat bermanfaat menyerupai menciptakan coding menjadi lebih clean, mudah dan menjadi solusi untuk permasalahan layout yang kompleks.

Di tutorial kali ini aku akan membahas penggunaan Butterknife di aplikasi android.

Terlebih dahulu kita harus menambahkan dependencies di gradle menyerupai berikut.

Top-level
dependencies {     ....     classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8' } repositories {     ....     mavenCentral() } 

Module-level
apply plugin: 'com.neenbedankt.android-apt'  dependencies {     compile fileTree(dir: 'libs', include: ['*.jar'])     testCompile 'junit:junit:4.12'     compile 'com.android.support:appcompat-v7:23.3.0'      //Butterknife     compile 'com.jakewharton:butterknife:8.0.1'     apt 'com.jakewharton:butterknife-compiler:8.0.1' } 

Buat layout dengan nama activity_main.xml yang terdiri dari TextView, ImageView dan Button.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:orientation="vertical"     tools:context="com.example.wim.android_butterknife.MainActivity">      <TextView         android:id="@+id/title"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />      <ImageView         android:id="@+id/imageView"         android:layout_width="match_parent"         android:layout_height="300dp"         android:layout_marginTop="@dimen/activity_vertical_margin"         android:scaleType="centerCrop"/>      <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="@dimen/activity_vertical_margin"         android:text="Click Me!"         android:id="@+id/button" />   </LinearLayout>  

Tambahkan string resource di strings.xml (Karena kita akan coba inject dari string resource)
<string name="title">Butterknife Tutorial</string> 

Kemudian tambahkan foto atau gambar sembarang di drawable.

Nah sebelum itu aku bahas penggunaan Butter Knife itu sendiri.
- Penggunaannya di views memakai annotation @BindView


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

- Penggunaannya di resource memakai annotation menyerupai @BindBool, @BindColor, @BindDimen, @BindDrawable, @BindInt atau @BindString.

Contoh :
@BindString(R.string.title) String title; 

- Penggunaannya untuk event handling memakai annotation menyerupai @OnClick, @OnItemClick dan lain-lain sesuai dengan method event.

Contoh :
@OnClick(R.id.button) void buttonClick(){      } 

Ketika memakai annotation di atas, maka di dalam method onCreate(Activity) atau onCreateView(Fragment) harus memanggil method Butterknife.bind().

Activity :
ButterKnife.bind(this); 

Fragment :
ButterKnife.bind(this, view); 

Dokumentasi lengkap sanggup dilihat di http://jakewharton.github.io/butterknife/

Sekarang kita coba penggunaannya di Activity.
Buat activity dengan nama MainActivity, lalu tambahkan arahan berikut :
package com.example.wim.android_butterknife;  import android.graphics.drawable.Drawable; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast;  import butterknife.BindColor; import butterknife.BindDrawable; import butterknife.BindString; import butterknife.BindView; import butterknife.ButterKnife; import butterknife.OnClick;  public class MainActivity extends AppCompatActivity {      @BindView(R.id.title) TextView txtTitle;     @BindView(R.id.imageView) ImageView img;     @BindView(R.id.button) Button btn;      @BindDrawable(R.drawable.gambar) Drawable gambar;     @BindString(R.string.title) String title;     @BindColor(R.color.colorPrimary) int color;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          ButterKnife.bind(this);          txtTitle.setText(title);         img.setImageDrawable(gambar);         btn.setBackgroundColor(color);     }      @OnClick(R.id.button)     void buttonClick(){         Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();     } }  

Jalankan dan jadinya menyerupai berikut :



Source code sanggup dilihat di https://github.com/andronut/Android-Butterknife

Sekian tutorial kali ini.
Semoga bermanfaat.
Happy Coding :)

Comments

Popular posts from this blog

Tugas Komplemen Terakhir

Transmisi Data

Konsep Oop Encapsulation