Data Binding Android

https://goo.gl/qvvQN1

Data Binding Library คือ การผูก ข้อมูลเข้ากับ UI เช่น TextView หรือ EditTextให้สัมพันธ์กัน และเมื่อมีการเปลี่ยนเปลี่ยนข้อมูล UI ก็จะทำการอัพเดทข้อมูลให้อัตโนมัติ

เรามาเริ่มจากปัญหาว่าทำไมผมจึงหันมาใช้ Data Binding ละ เพราะมันทำให้เราประหยัดเวลา และลดจำนวนบรรทัดโค้ดที่ แมร่ง! น่าเบื่อชิป ลงไปได้จำนวนหนึ่งเลยนะ เออ มันก็คือการลด จำนวนตัวแปร และลดการทำการ findViewById() และผมโคตรจะมั่นใจเลยว่า Activity หนึ่งคงไม่มี Component อันเดียวหรอกเนอะ

ถึงเวลาวิธีบอกลา findViewById(…) แล้ว !

ขั้นตอนแรก เราก็ต้องทำการ Enable การใช้งาน Data Binding โดยทำการเปิดไฟล์ build.gradle ของโมดูลที่ต้องการ ยกตัวอย่าง เช่น module app แล้วให้ทำการเพิ่มคำสั่ง ลงในช่องของ android ดังนี้

build.gradle (Module: app)

เสร็จแล้วก็ กด Sync now ก็เป็นอันสิ้นเสร็จพิธี !!! ดีงามพระรามแปด

ต่อไปก็ต้องมาเปลี่ยนโครงส้ราง XML ของ Layout ให้ทำการใช้งาน Data Binding ได้แทนการ Inflate แบบเดิม โดยทำการเพิ่ม tag <layout>…</layout> ให้เป็น Root Element ดังนี้

activity_main.xml

จะเห็นว่าผมมีการ TextView ตัวหนึ่งที่มี id คือ tv_title และเมื่อผมต้องการเข้าถึง TextView ตัวนี้แบบ หล่อๆ ก็มีวิธีดังนี้

MainActivity.class

จะเห็นได้ว่าผมทำการสร้างตัวแปร binding จาก class ActivityMainBinding แต่
เด๋วก่อน ไอ่ class ที่ว่ามันมาจากไหน มันเป็นคลาสที่ถูกสร้างขึ้นมาโดยอัตโนมัติ จาก Data Binding Library แล้ว จะรู้ได้ไงว่ามันสร้างให้แล้วให้ชื่อของ file .xml ที่เราทำการใช้งาน Data binding แล้วเติมคำว่า Binding ลงไป โดยต้องเป็น Camel case เช่น activity_main.xml ก็ต้องเป็น ActivityMain แล้วกด Ctrl+Space เอานะอย่าพิมพ์เลย หรือ photo_item.xml ก็จะเป็น PhotoItemBinding จากนั้นก็สามารถเข้าถึง UI ได้แบบหล่อๆ แล้ว ถ้าสังเกตดีๆ จะเห็นว่า Data Binding นั้นแอบสร้างตัวแปร ของ TextView ที่มี id ชื่อว่า tv_title ให้อยู่ในรูปแบบของ Camel case
เมพขิงๆๆ

Fragment ก็ทำได้นะ หรือจะเป็น Custom ViewGroup ก็ได้เช่นกัน

FragmentExample.class

การ Inflate ของ Custom ViewGroup ก็จะทำแบบนี้ แทน

เอ๊ะ! แล้วมัน Data Binding ยังไงล่ะเนี่ย เอาล่ะมาทำการ Binding Data ให้เข้ากับ UI กันเลยดีกว่า ขั้นตอนแรกก็ต้องทำการสร้าง Model Data ขึ้นมาเพื่อทดสอบ

UserModel.class

แล้วทำการเพิ่ม Tag <data>…</data> และ Tag <variable>…</variable> ลงไปในไฟล์ .xml โดยจะมี Attribute คือ name และ type

activity.xml

- name คือ ชื่อตัวแปรไว้ใช้ในการอ้างอิง Model Data ของเรา (อะไรก็ได้)
- type คือ ชื่อ namespace ของ Model Data ที่ต้องการจะ Binding

และเราก็สามารถผูก Data ให้เข้ากับ UI เช่น TextView ได้โดยการใส่ Attribute android:text=“@{name.แล้วตามด้วยชื่อตัวแปรใน Model ที่ต้องการแสดง}”
หากต้องการจะแสดง อายุ ก็ให้เปลี่ยนเป็น “@{String.valueOf(data.age)}”

*กรณีที่เป็นตัวเลขต้องมี String.valueOf() เพื่อแปลงตัวเลขให้เป็น String

ขั้นตอนสุดท้ายลองมาสร้าง Object แล้วทำการ Binding Data เอ้าลุย!

MainActivity.class

กด Run ได้เลย 321 แยก….

รูปแมร่งโคตรใหญ่

ก็จะเห็นได้ว่า TextView มีการแสดงค่าตามตัวแปร ไม่ต้องใช้ TextView.setText(); และเมื่อมีการเปลี่ยนแปลงค่า ก็ให้ทำการ setData ใหม่เข้าไป UI ก็จะเปลี่ยนไปตามค่าที่อัพเดทให้เองโดยอัตโนมัติ เสร็จแล้วชีวิตสบายขึ้นเยอะเลย

สรุป การใช้ Data Binding นั่นทำให้เราประหยัดเวลาในการ Initialize Data ลงไปได้เยอะ Code ดู​สะอาดมากขึ้น ตัวแปรไม่บวม ถือว่าเข้ามาช่วยชีวิตให้ดูหล่อขึ้นมาเลยทีเดียว เฟียวฟาวมะพร้าวแก้ว ^^