ภาพรวม
ตัวอย่างนี้สาธิตการใช้ ButterKnife Library สำหรับ View Binding เพื่อลด Boilerplate Code ของ findViewById โดยใช้ Annotation @BindView
⚠️ สถานะปัจจุบัน: Deprecated / Maintenance Mode
ButterKnife อยู่ใน Maintenance Mode แล้ว** (ตั้งแต่ 2020) และแนะนำให้ย้ายไปใช้:
- View Binding (Built-in, Official, ไม่ต้อง Annotation Processor)
- Data Binding (Official, รองรับ Two-way Binding)
- Kotlin Synthetics (Deprecated แล้ว)
บทความนี้เก็บไว้เพื่ออ้างอิง Legacy Codebase เท่านั้น
ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่
Android Studio → File → New Project → Empty Activity
ขั้นตอนที่ 2: เพิ่ม Dependency (build.gradle Module: app)
dependencies {
// ButterKnife (Version สุดท้าย 10.2.3)
implementation 'com.jakewharton:butterknife:10.2.3'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.3'
// สำหรับ Kotlin ใช้ kapt แทน annotationProcessor
// kapt 'com.jakewharton:butterknife-compiler:10.2.3'
}
ขั้นตอนที่ 3: จัดรูปแบบหน้าจอ (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="..........."
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="..........."
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="..........."
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:id="@+id/btnLoadText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Load Text"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
ขั้นตอนที่ 4: เขียนโค้ด MainActivity.java
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
public class MainActivity extends AppCompatActivity {
// Bind Views ด้วย Annotation
@BindView(R.id.textView1) TextView textView1;
@BindView(R.id.textView2) TextView textView2;
@BindView(R.id.textView3) TextView textView3;
@BindView(R.id.btnLoadText) Button btnLoadText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// สำคัญ: ต้องเรียก ButterKnife.bind(this) หลัง setContentView
ButterKnife.bind(this);
// ไม่ต้องใช้ findViewById แล้ว!
}
// จัดการ Click ด้วย @OnClick
@OnClick(R.id.btnLoadText)
public void onLoadTextClick() {
textView1.setText("Hi, How are you?");
textView2.setText("Have a nice day!");
textView3.setText("You are so good.");
Toast.makeText(this, "Text loaded via ButterKnife", Toast.LENGTH_SHORT).show();
}
// จัดการ Click หลาย View พร้อมกัน
@OnClick({R.id.textView1, R.id.textView2, R.id.textView3})
public void onTextViewClick(View view) {
switch (view.getId()) {
case R.id.textView1:
Toast.makeText(this, "Text 1 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.textView2:
Toast.makeText(this, "Text 2 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.textView3:
Toast.makeText(this, "Text 3 clicked", Toast.LENGTH_SHORT).show();
break;
}
}
@Override
protected void onDestroy() {
super.onDestroy();
// ButterKnife จัดการ Unbind เองใน Activity แต่ Fragment ต้อง Unbind เอง
}
}
ขั้นตอนที่ 5: AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="app.com.sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
</intent-filter>
</activity>
</application>
</manifest>
การทดสอบ
รันแอป → กดปุ่ม "Load Text" → ข้อความจะเปลี่ยนใน TextView ทั้ง 3 อัน
ButterKnife Annotations สำคัญ
| Annotation | ใช้สำหรับ | ตัวอย่าง |
|---|---|---|
@BindView | Bind View (findViewById) | @BindView(R.id.textView) TextView tv; |
@BindViews | Bind หลาย View เป็น List | @BindViews({R.id.tv1, R.id.tv2}) List |
@OnClick | Click Listener | @OnClick(R.id.btn) void onClick() |
@OnLongClick | Long Click Listener | @OnLongClick(R.id.view) boolean onLongClick() |
@OnTextChanged | TextWatcher | @OnTextChanged(R.id.et) void onTextChanged(CharSequence s) |
@BindString | String Resource | @BindString(R.string.app_name) String appName; |
@BindColor | Color Resource | @BindColor(R.color.primary) int color; |
@BindDimen | Dimension Resource | @BindDimen(R.dimen.padding) float padding; |
@BindDrawable | Drawable Resource | @BindDrawable(R.drawable.ic_icon) Drawable icon; |
@BindFont | Font Resource (API 26+) | @BindFont(R.font.my_font) Typeface font; |
🔄 การย้ายจาก ButterKnife ไป View Binding (แนะนำ)
1. เปิดใช้งานใน build.gradle
android {
...
buildFeatures {
viewBinding true
}
}
2. ใช้งานใน Activity
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
// เข้าถึง View ผ่าน binding
binding.textView1.setText("Hello View Binding!");
binding.btnLoadText.setOnClickListener(v -> {
binding.textView2.setText("Clicked!");
});
}
@Override
protected void onDestroy() {
super.onDestroy();
binding = null; // ป้องกัน Memory Leak
}
}
3. ใช้งานใน Fragment
public class MyFragment extends Fragment {
private FragmentMyBinding binding;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
binding = FragmentMyBinding.inflate(inflater, container, false);
return binding.getRoot();
}
@Override
public void onDestroyView() {
super.onDestroyView();
binding = null; // สำคัญมาก! Fragment มี View Lifecycle แยกต่างหาก
}
}
เปรียบเทียบ ButterKnife vs View Binding
| Feature | ButterKnife | View Binding |
|---|---|---|
| Type Safety | ✅ (Annotation Processor) | ✅ (Generated Class) |
| Null Safety | ❌ (Runtime Crash) | ✅ (Compile Time) |
| Build Speed | ช้ากว่า (Annotation Processing) | เร็วกว่า (No Annotation Processor) |
| Layout Inflation | Manual (setContentView) | Auto (Binding.inflate) |
| Fragment Support | Manual Unbind | Auto (onDestroyView) |
| Maintenance | ❌ Deprecated | ✅ Active (Google) |