Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีใช้ ButterKnife ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตการใช้ 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 ใน Android วิธีใช้ ButterKnife ใน Android

ButterKnife Annotations สำคัญ

Annotationใช้สำหรับตัวอย่าง
@BindViewBind View (findViewById)@BindView(R.id.textView) TextView tv;
@BindViewsBind หลาย View เป็น List@BindViews({R.id.tv1, R.id.tv2}) List views;
@OnClickClick Listener@OnClick(R.id.btn) void onClick()
@OnLongClickLong Click Listener@OnLongClick(R.id.view) boolean onLongClick()
@OnTextChangedTextWatcher@OnTextChanged(R.id.et) void onTextChanged(CharSequence s)
@BindStringString Resource@BindString(R.string.app_name) String appName;
@BindColorColor Resource@BindColor(R.color.primary) int color;
@BindDimenDimension Resource@BindDimen(R.dimen.padding) float padding;
@BindDrawableDrawable Resource@BindDrawable(R.drawable.ic_icon) Drawable icon;
@BindFontFont 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

FeatureButterKnifeView Binding
Type Safety✅ (Annotation Processor)✅ (Generated Class)
Null Safety❌ (Runtime Crash)✅ (Compile Time)
Build Speedช้ากว่า (Annotation Processing)เร็วกว่า (No Annotation Processor)
Layout InflationManual (setContentView)Auto (Binding.inflate)
Fragment SupportManual UnbindAuto (onDestroyView)
Maintenance❌ Deprecated✅ Active (Google)