Day 9 - Butter Knife

สวัสดีครับ บทความนี้เป็นบทความที่ 9 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

• Day 1 : AndroidStaggered Grid
• Day 2 : Paralloid
• Day 3 : Retrofit
• Day 4 : SwipeRefreshLayout
• Day 5 : Android GraphView
• Day 6 : Holo Color Picker
• Day 7 : Android Async Http
• Day 8 : Crashlytics
• Day 9 : Butter Knife
• Day 10 : Android Annotations
• Day 11 : DateTimePicker
• Day 12 : Circular Progress Button
• Day 13 : ViewPager
• Day 14 : ViewPagerIndicator
• Day 15 : FadingActionBar
• Day 16 : AutofitTextView
• Day 17 : SwipeListView
• Day 18 : ShowcaseView
• Day 19 : GreenDAO
• Day 20 : AndroidViewAnimation
• Day 21 : ActiveAndroid
• Day 22 : Twitter4J
• Day 23 : ListViewAnimations
• Day 24 : AndEngine
• Day 25 : EazeGraph
• Day 26 : Cardslib
• Day 27 : AdapterKit
• Day 28 : WeatherLib
• Day 29 : FlatUI
• Day 30 : Android Firebase

สำหรับวันนี้ขอนำเสนอเรื่อง Butter Knife ครับ

Butter Knife คืออะไร?

Butter Knife , View “injection” library for Android มันคือ Library สำหรับการ Inject View (Inject แปลตรงๆก็คือการฉีด) ให้เราอัตโนมัติ โดย Butter Knife จะทำหน้าที่หน้า View ให้เราเอง และทำการ cast View ให้เราเอง

สำหรับใครที่ไม่เข้าใจเรื่อง Injection แนะนำให้อ่าน Inversion of Control หรือ Dependencies Injection ประกอบครับ

ยอมรับเลยว่าผมไม่เคยใช้ Annotation บน Android มาก่อนเลย นอกจาก @Override กับ @Deprecated นะ :D เมื่อลองใช้ Butter Knife แล้ว ทำให้หวนนึกถึงอดีตที่เคยเขียน Java Spring ครับ คุ้นเคยกับการใช้ @Autowired, @Qualifier, @RequestMapping, @Service, @Controller อุ้ย เยอะแยะ พูดแล้วก็คิดถึง ฮ่าๆ แต่ว่าหากใครไม่คุ้นเคยกับ Annotation เมื่อมาลองจับ Butter Knife ครั้งแรก คิดว่าน่าจะไม่ยากเท่าไหร่นะครับ ลองอ่านบทความนี้ดูครับ เผื่ออาจจะสนใจขึ้นมา

Installation

ขั้นตอนการติดตั้ง Library ตัวนี้ ทำได้ไม่ยากครับ ดาวน์โหลดไฟล์ .jar จากที่นี่ butterknife-5.1.1.jar หรือจะเป็น gradle ก็เปิดไฟล์ build.gradle แล้วเพิ่ม dependencies นี้ลงไป

1
dependencies {
2
    compile 'com.jakewharton:butterknife:5.1.1'
3
}

Getting Started

โปรเจ็คนี้ผมใช้ไฟล์ 2 ไฟล์ครับ คือ ButterKnifeActivity.java และ activity_butter_knife.xml สำหรับเลเอาท์

ไฟล์ activity_butter_knife.xml มี TextView 2 อัน และ Button 1 อัน ดังนี้

1
<?xml version="1.0" encoding="utf-8"?>
2

3
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4
              android:padding="16dp"
5
              android:layout_width="match_parent"
6
              android:layout_height="match_parent">
7

8
    <TextView
9
        android:layout_width="wrap_content"
10
        android:layout_height="wrap_content"
11
        android:layout_alignParentTop="true"
12
        android:layout_alignParentLeft="true"
13
        android:id="@+id/greeting"/>
14

15
    <TextView
16
        android:layout_width="wrap_content"
17
        android:layout_height="wrap_content"
18
        android:layout_marginTop="16dp"
19
        android:layout_below="@id/greeting"
20
        android:id="@+id/name"/>
21

22
    <Button
23
        android:layout_width="wrap_content"
24
        android:layout_height="wrap_content"
25
        android:text="@string/button_click"
26
        android:paddingLeft="32dp"
27
        android:paddingRight="32dp"
28
        android:layout_alignParentBottom="true"
29
        android:layout_centerHorizontal="true"
30
        android:id="@+id/button_click"/>
31
</RelativeLayout>

ใส่ references ให้ String นิดนึง (ไม่ชอบ hard code)

ไฟล์ res/values/strings.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
    <string name="button_click">Click</string>
4
</resources>

@InjectView

โดยปกติเวลาเราๆเขียนแอพ เวลาเราจะเชื่อม View ที่เราทำไว้ใน Layout ปกติเราจะใช้โค๊ดแบบนี้ใช่มั้ยครับ?

1
public class ButterKnifeActivity extends ActionBarActivity {
2

3
    @Override
4
    protected void onCreate(Bundle savedInstanceState) {
5
        super.onCreate(savedInstanceState);
6

7
        setContentView(R.layout.day9_activity_butter_knife);
8

9
        TextView greeting = (TextView) findViewById(R.id.greeting);
10
        TextView name = (TextView) findViewById(R.id.name);
11
        Button buttonClick = (Button) findViewById(R.id.button_click);
12
        buttonClick.setOnClickListener(new View.OnClickListener() {
13
            @Override
14
            public void onClick(View v) {
15

16
            }
17
        });
18
    }
19

20
}

ที่นี้ ถ้าเราใช้ Butter Knife เราใช้โค๊ดแค่นี้

1
public class ButterKnifeActivity extends ActionBarActivity {
2

3
    @InjectView(R.id.greeting) TextView mGreeting;
4
    @InjectView(R.id.name) TextView mName;
5
    @InjectView(R.id.button_click) Button mButtonClick;
6

7
    @Override
8
    protected void onCreate(Bundle savedInstanceState) {
9
        super.onCreate(savedInstanceState);
10
        setContentView(R.layout.day9_activity_butter_knife);
11
        ButterKnife.inject(this);
12
    }

อธิบายคือ Butter Knife จะใช้ annotation @InjectView(view_id) โดยมี parameter เป็น id ของ View ที่เราต้องการหา ตามด้วย View และตัวแปรที่ต้องการครับ อย่างเช่น

1
@InjectView(R.id.greeting) TextView mGreeting;

มันก็คือการหา View ที่ชื่อ greeting ในไฟล์ day9_activity_butter_knife จากนั้นก็จะ cast มาใส่ TextView ของเราที่ชื่อ mGreeting

ฉะนั้น @InjectView() : ก็คล้ายๆกับการ findViewById() ส่วนการ cast มาใส่ TextView ก็เหมือนกับการใช้ (TextView) findViewById();

อ้อแล้วก็ ButterKnife.inject(this); อันนี้จะขาดไม่ได้เลย มันคือการสั่งให้ Butter Knife inject View ในเลเอาท์นี้ให้เราหน่อยนะ เปรียบเสมือนเราลืมทำการ setContentView() นั่นแหละ

@OnClick

หลายคนอาจจะสงสัย ถ้าเรา Inject View ได้แล้ว แล้วเราสามารถจะ setListener ให้กับ Button ได้มั้ย? คำตอบคือได้ครับ โดยใช้ @OnClick อย่างเช่น ปกติโค๊ดเราเป็นแบบนี้

1
 Button buttonClick = (Button) findViewById(R.id.button_click);
2
buttonClick.setOnClickListener(new View.OnClickListener() {
3
    @Override
4
    public void onClick(View v) {
5
        // sayHello();
6
    }
7
});

เมื่อเราใ้ช้ Butter Knife จะเหลือแค่นี้

1
@InjectView(R.id.button_click) Button mButtonClick;
2

3
@OnClick(R.id.button_click)
4
public void sayHello() {
5

6
}

อธิบายเพิ่มเติมคือ เราสร้างเมธอดขึ้นมาใหม่ สมมติเมธอดเอาไว้โชว์ Toast จากนั้นใช้ @OnClick() แล้วส่ง parameter เป็นชื่อ view_id ไป ตัว Butter Knife มันก็จะไปทำการ setListerner() ให้เราเอง

ลองเปรียบเทียบดูครับ อันบนกับอันล่าง อันไหนน่าใช้กว่ากัน :D

@InjectViews

เห็นหัวข้ออย่าสับสนนะครับ เขียนผิดหรือเปล่า ทำไมเขียน @InjectViews ซ้ำ ที่จริงไม่ซ้ำกันนะครับ มี s กับ ไม่มี s สำหรับ @InjectViews อันนี้ เราสามารถให้มัน inject ทีเดียว หลายๆ View ได้เลย อย่างเช่น กรณีที่เรามี TextView, Button ในหน้าเลเอาท์นั้นๆ เยอะมากๆ ต้องมา @InjectView() ทุกๆอัน ก็ชักช้า เราสามารถทำแบบนี้ได้

1
@InjectViews({R.id.greeting, R.id.name})
2
List<TextView> mTextViews;
3

4
mTextViews.get(0).setText("Hello");
5
mTextViews.get(1).setText("Jane Doe");

โดยการส่ง parameter เป็น array ที่มีไอดีอยู่ จากนั้น ตามด้วย List<TextView> เวลาเรียกใช้ก็แค่ระบุ index ของ List

findById

สุดท้ายครับ findById ของ Butter Knife จะทำหน้าที่เหมือนตัว findViewById() แบบปกติครับ แต่ว่าของ Butter Knife จะมีการ casting ให้เราอัตโนมัติครับ เช่น

1
TextView greeting = (TextView) findViewById(R.id.greeting);
2
Button buttonClick = (Button) findViewById(R.id.button_click);

แบบนี้ เราต้องมา cast greeting จาก View ไปเป็น TextView และ buttonClick ไปเป็น Button เอง แต่ถ้าใช้ Butter Knife จะเป็นแบบนี้

1
TextView greeting = ButterKnife.findById(this, R.id.greeting);
2
Button buttonClick = ButterKnife.findById(this, R.button_click);

โดย this หมายถึงหา View ใน Activity ของเรานะครับ

สรุป

จากที่เขียนมาทั้งหมดก็ยังเป็นแค่ Basic อยู่ ใครอยากรู้รายละเอียดแบบลึกขึ้น ก็แนะนำอ่านจากต้นฉบับเลยครับ Butter Knife

หลังจากได้ทดลองใช้ Butter Knife แล้วรู้สึกว่าก็โอเคนะครับ ใช้งานค่อนข้างง่าย ยอมรับเลยว่าไม่เคยใช้มาก่อนเลย นี้เพิ่งใช้ครั้งแรก แล้วก็เขียนบทความเลย อาจจะเพราะเคยใช้ annotation บน Spring มาก่อนรึเปล่าไม่แน่ใจนะครับ

รู้สึกว่า มันทำให้โค๊ดดูสะอาดตาขึ้นเยอะครับ แต่จริงๆ ผมก็ยังชอบใช้ findViewById() นะ ก่อนที่จะมาลอง Butter Knife ผมได้เห็นอันที่คล้ายๆกันแล้วเช่น Dagger, Roboguice, Android Annotations เดี่ยวอาจจะลองเล่น แล้วเอามาเปรียบเทียบกันดูครับ ว่าอันไหนใช้ง่าย หรือว่ามีอันไหนมีฟังค์ชันที่พิเศษที่อันอื่นไม่มี ไว้คอยติดตามบทความถัดไปนะครับ ขอบคุณครับ

สุดท้าย Source Code อัพเดทล่าสุด