Android Kotlin Fundamentals 02.4: ข้อมูลเบื้องต้นเกี่ยวกับการผูกข้อมูล

Codelab นี้เป็นส่วนหนึ่งของหลักสูตรพื้นฐานเกี่ยวกับ Kotlin ใน Android คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้ หากทํางานผ่าน Codelab ตามลําดับ Codelab ของหลักสูตรทั้งหมดจะแสดงอยู่ในหน้า Landing Page ของ Codelab ของ Android Kotlin Fundamentals

ข้อมูลเบื้องต้น

ใน Codelab ก่อนหน้าในหลักสูตรนี้ คุณได้ใช้ฟังก์ชัน findViewById() เพื่อรับข้อมูลอ้างอิงเกี่ยวกับการดู เมื่อแอปของคุณมีลําดับชั้นของมุมมองที่ซับซ้อน findViewById() จะมีราคาสูงและชะลอการทํางานของแอป เนื่องจาก Android จะข้ามลําดับชั้นของมุมมองตั้งแต่รากไปจนถึงจนกว่าจะพบมุมมองที่ต้องการ โชคดีที่ยังมีวิธีที่ดีกว่า

หากต้องการตั้งค่าข้อมูลพร็อพเพอร์ตี้ ให้ใช้ทรัพยากรสตริงและตั้งค่าข้อมูลจากกิจกรรม แต่จะมีประสิทธิภาพมากกว่าหากมุมมองรู้ข้อมูล โชคดีจริงๆ ที่เราสามารถทําได้

ใน Codelab นี้ คุณรู้วิธีใช้การเชื่อมโยงข้อมูลเพื่อขจัดความจําเป็นในการใช้ findViewById() และยังดูวิธีใช้การเชื่อมโยงข้อมูลเพื่อเข้าถึงข้อมูลจากข้อมูลพร็อพเพอร์ตี้โดยตรงได้ด้วย

สิ่งที่ควรทราบอยู่แล้ว

คุณควรทําความคุ้นเคยกับสิ่งต่อไปนี้

• กิจกรรมคืออะไร และวิธีตั้งค่ากิจกรรมด้วยเลย์เอาต์ใน onCreate()
• การสร้างมุมมองข้อความและตั้งค่าข้อความที่มุมมองข้อความแสดง
• การใช้ findViewById() เพื่อดูข้อมูลอ้างอิง
• การสร้างและแก้ไขเลย์เอาต์ XML พื้นฐานสําหรับข้อมูลพร็อพเพอร์ตี้

สิ่งที่คุณจะได้เรียนรู้

• วิธีใช้ Data Binding Library เพื่อกําจัดการเรียกที่ไม่มีประสิทธิภาพไปยัง findViewById()
• วิธีเข้าถึงข้อมูลแอปจาก XML โดยตรง

สิ่งที่คุณจะทํา

• แก้ไขแอปเพื่อใช้การเชื่อมโยงข้อมูลแทน findViewById() และเพื่อเข้าถึงข้อมูลจากไฟล์ XML เลย์เอาต์โดยตรง

ใน Codelab นี้ คุณจะต้องเริ่มต้นด้วยแอปเกี่ยวกับ Me จากนั้นเปลี่ยนแอปให้ใช้การเชื่อมโยงข้อมูล แอปจะมีลักษณะเหมือนเดิมเมื่อคุณดําเนินการเสร็จแล้ว

สิ่งที่เกี่ยวกับแอป MeMe มีดังนี้

• เมื่อผู้ใช้เปิดแอป แอปจะแสดงชื่อ ช่องสําหรับป้อนชื่อเล่น ปุ่มเสร็จสิ้น รูปภาพดาว และข้อความแบบเลื่อนได้
• ผู้ใช้สามารถป้อนชื่อเล่นและแตะปุ่มเสร็จสิ้น ระบบจะแทนที่ช่องและปุ่มที่แก้ไขได้ด้วยมุมมองข้อความที่แสดงชื่อเล่นที่ป้อน
  
  
  

คุณจะใช้โค้ดที่สร้างไว้ใน Codelab ก่อนหน้านี้ หรือดาวน์โหลดโค้ด AboutMeDataBinding-Starter จาก GitHub ก็ได้

โค้ดที่คุณเขียนใน Codelab ก่อนหน้านี้จะใช้ฟังก์ชัน findViewById() เพื่อขอการอ้างอิงการดู

ทุกครั้งที่คุณใช้ findViewById() เพื่อค้นหามุมมองหลังจากที่มีการสร้างหรือสร้างใหม่ ระบบ Android จะข้ามลําดับชั้นของการดูในรันไทม์เพื่อค้นหา แม้แอปจะมียอดดูเพียงไม่กี่ครั้ง ก็ไม่เป็นปัญหา อย่างไรก็ตาม แอปเวอร์ชันที่ใช้งานจริงอาจมียอดดูหลายสิบรูปแบบในเลย์เอาต์ และแม้จะมีการออกแบบที่ดีที่สุด แต่ก็ยังมีมุมมองที่ซ้อนกันด้วย

ลองนึกถึงเลย์เอาต์เชิงเส้นที่มีมุมมองการเลื่อนที่มีมุมมองข้อความ สําหรับลําดับชั้นของมุมมองขนาดใหญ่หรือลึก การค้นหามุมมองอาจใช้เวลามากพอที่จะทําให้แอปช้าลงอย่างเห็นได้ชัด การแคชมุมมองในตัวแปรช่วยคุณได้ แต่คุณยังคงต้องเริ่มต้นตัวแปรสําหรับแต่ละข้อมูลพร็อพเพอร์ตี้ในเนมสเปซแต่ละรายการ ซึ่งมียอดดูมากมายและหลายกิจกรรมก็รวมอยู่เช่นกัน

วิธีแก้ไขอย่างหนึ่งคือการสร้างออบเจ็กต์ที่มีการอ้างอิงถึงข้อมูลพร็อพเพอร์ตี้แต่ละรายการ ทั้งออบเจ็กต์นี้เรียกว่าออบเจ็กต์ Binding เทคนิคนี้เรียกว่าการเชื่อมโยงข้อมูล เมื่อสร้างออบเจ็กต์การเชื่อมโยงสําหรับแอปแล้ว คุณจะเข้าถึงข้อมูลพร็อพเพอร์ตี้และข้อมูลอื่นๆ ผ่านออบเจ็กต์การเชื่อมโยงได้โดยไม่ต้องข้ามลําดับชั้นของมุมมองหรือค้นหาข้อมูล

การเชื่อมโยงข้อมูลมีประโยชน์ดังนี้

• โค้ดสั้น อ่านง่ายขึ้น และดูแลได้ง่ายกว่าโค้ดที่ใช้ findByView()
• ข้อมูลและมุมมองมีการแยกออกอย่างชัดเจน ประโยชน์ของการเชื่อมโยงข้อมูลจะมีความสําคัญมากขึ้นเรื่อยๆ ในหลักสูตรนี้
• ระบบ Android จะข้ามลําดับชั้นการดูเพียงครั้งเดียวเพื่อดูแต่ละมุมมอง และจะเกิดขึ้นในช่วงเริ่มต้นแอป ไม่ใช่ขณะรันไทม์เมื่อผู้ใช้โต้ตอบกับแอป
• คุณจะได้รับประเภทความปลอดภัยสําหรับการเข้าถึงข้อมูลพร็อพเพอร์ตี้ (ความปลอดภัยของประเภทหมายความว่าคอมไพเลอร์จะตรวจสอบประเภทขณะคอมไพล์ และจะเกิดข้อผิดพลาดหากคุณพยายามกําหนดประเภทที่ไม่ถูกต้องให้กับตัวแปร)

ในงานนี้ คุณจะได้ตั้งค่าการเชื่อมโยงข้อมูล และใช้การเชื่อมโยงข้อมูลเพื่อแทนที่การเรียกไปยัง findViewById() ด้วยการเรียกออบเจ็กต์การเชื่อมโยง

ขั้นตอนที่ 1: เปิดใช้การเชื่อมโยงข้อมูล

หากต้องการใช้การเชื่อมโยงข้อมูล คุณต้องเปิดใช้การเชื่อมโยงข้อมูลในไฟล์ Gradle เนื่องจากไม่ได้เปิดใช้โดยค่าเริ่มต้น เนื่องจากการเชื่อมโยงข้อมูลจะเพิ่มเวลาคอมไพล์และอาจส่งผลต่อเวลาเริ่มต้นของแอป

1. หากไม่มีแอป "เกี่ยวกับฉัน" จาก Codelab ก่อนหน้า ให้รับโค้ด AboutMeDataBinding-Starter จาก GitHub เปิดใน Android Studio
2. เปิดไฟล์ build.gradle (Module: app)
3. ในส่วน android ก่อนวงเล็บปีกกา ให้เพิ่มส่วน dataBinding และตั้งค่า enabled เป็น true

dataBinding {
    enabled = true
}

4. เมื่อระบบแจ้ง ให้ซิงค์โปรเจ็กต์ หากระบบไม่ถาม ให้เลือกไฟล์และซิงค์โปรเจ็กต์กับไฟล์ Gradle
5. คุณสามารถเรียกใช้แอปได้แต่จะไม่เห็นการเปลี่ยนแปลงใดๆ

ขั้นตอนที่ 2: เปลี่ยนไฟล์เลย์เอาต์เพื่อใช้กับการเชื่อมโยงข้อมูล

หากต้องการใช้งานการเชื่อมโยงข้อมูล คุณจะต้องรวมเลย์เอาต์ XML ด้วยแท็ก <layout> การดําเนินการนี้จึงทําให้คลาสระดับรากไม่ใช่กลุ่มการดูอีกต่อไป แต่เป็นเลย์เอาต์ที่มีกลุ่มข้อมูลพร็อพเพอร์ตี้และมุมมองแทน จากนั้นออบเจ็กต์การเชื่อมโยงอาจทราบเกี่ยวกับเลย์เอาต์และมุมมองของเลย์เอาต์

1. เปิดไฟล์ activity_main.xml
2. เปลี่ยนไปที่แท็บข้อความ
3. เพิ่ม <layout></layout> เป็นแท็กด้านนอกสุดรอบ <LinearLayout>

<layout>
   <LinearLayout ... >
   ...
   </LinearLayout>
</layout>

4. เลือก Code > Reformat code เพื่อแก้ไขการเยื้องโค้ด
   
   การประกาศเนมสเปซสําหรับเลย์เอาต์ต้องอยู่ภายในแท็กด้านนอกสุด

5. ตัดการประกาศเนมสเปซจาก <LinearLayout> และวางลงในแท็ก <layout> แท็ก <layout> ที่เปิดควรมีลักษณะตามที่แสดงด้านล่าง และแท็ก <LinearLayout> ควรมีเฉพาะพร็อพเพอร์ตี้ข้อมูลพร็อพเพอร์ตี้เท่านั้น

<layout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">

6. สร้างและเรียกใช้แอปเพื่อยืนยันว่าคุณทําถูกต้องแล้ว

ขั้นตอนที่ 3: สร้างออบเจ็กต์การเชื่อมโยงในกิจกรรมหลัก

เพิ่มการอ้างอิงไปยังออบเจ็กต์การเชื่อมโยงไปยังกิจกรรมหลัก เพื่อให้คุณใช้เข้าถึงการเข้าถึงข้อมูลพร็อพเพอร์ตี้ได้ ดังนี้

1. เปิดไฟล์ MainActivity.kt
2. ก่อน onCreate() ให้สร้างตัวแปรสําหรับออบเจ็กต์การเชื่อมโยงที่ระดับบนสุด ตัวแปรนี้ชื่อว่า binding เอง
   
   ประเภท binding ซึ่งเป็นคลาส ActivityMainBinding สร้างขึ้นโดยคอมไพเลอร์สําหรับกิจกรรมหลักนี้โดยเฉพาะ ชื่อดังกล่าวมาจากชื่อไฟล์เลย์เอาต์ กล่าวคือ activity_main + Binding

private lateinit var binding: ActivityMainBinding

3. หากมีข้อความแจ้งจาก Android Studio ให้นําเข้า ActivityMainBinding หากไม่ได้รับข้อความแจ้ง ให้คลิก ActivityMainBinding แล้วกด Alt+Enter (Option+Enter บน Mac) เพื่อนําเข้าคลาสที่ขาดหายไปนี้ (ดูแป้นพิมพ์ลัดอื่นๆ ได้ที่แป้นพิมพ์ลัด)
   
   คําสั่ง import ควรมีลักษณะคล้ายกับคําสั่งที่แสดงด้านล่าง

import com.example.android.aboutme.databinding.ActivityMainBinding

ถัดไป คุณจะแทนที่ฟังก์ชัน setContentView() ปัจจุบันด้วยคําสั่งที่มีลักษณะดังนี้

• สร้างออบเจ็กต์การเชื่อมโยง
• ใช้ฟังก์ชัน setContentView() จากคลาส DataBindingUtil เพื่อเชื่อมโยงเลย์เอาต์ activity_main กับ MainActivity ฟังก์ชัน setContentView() นี้ยังดูแลการตั้งค่าการเชื่อมโยงข้อมูลพร็อพเพอร์ตี้บางรายการด้วย

4. ใน onCreate() ให้แทนที่การเรียก setContentView() ด้วยบรรทัดโค้ดต่อไปนี้

binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

5. นําเข้า DataBindingUtil

import androidx.databinding.DataBindingUtil

ขั้นตอนที่ 4: ใช้ออบเจ็กต์การเชื่อมโยงเพื่อแทนที่การเรียกไปยัง FindViewById()

คุณสามารถแทนที่การเรียกทั้งหมดไปยัง findViewById() ด้วยการอ้างอิงไปยังข้อมูลพร็อพเพอร์ตี้ที่อยู่ในออบเจ็กต์การเชื่อมโยงได้แล้ว เมื่อมีการสร้างออบเจ็กต์การเชื่อมโยง คอมไพเลอร์จะสร้างชื่อของข้อมูลพร็อพเพอร์ตี้ในออบเจ็กต์การเชื่อมโยงจากรหัสของมุมมองในเลย์เอาต์ โดยแปลงข้อมูลเหล่านั้นเป็นเคสอูฐ ตัวอย่างเช่น done_button คือ doneButton ในออบเจ็กต์การเชื่อมโยง nickname_edit จะกลายเป็น nicknameEdit และ nickname_text จะกลายเป็น nicknameText

1. ใน onCreate() ให้แทนที่โค้ดที่ใช้ findViewById() เพื่อค้นหา done_button ด้วยโค้ดที่อ้างอิงปุ่มในออบเจ็กต์การเชื่อมโยง
   
   แทนที่โค้ดนี้: findViewById<Button>(R.id.done_button)
   ด้วย: binding.doneButton
   
   โค้ดที่ตั้งค่าเสร็จแล้วสําหรับ Listener การคลิกใน onCreate() ควรมีลักษณะดังนี้

binding.doneButton.setOnClickListener {
   addNickname(it)
}

2. ทําเช่นเดียวกันกับการเรียกทั้งหมดไปยัง findViewById() ในฟังก์ชัน addNickname()
   แทนที่ทุกรายการของ findViewById<View>(R.id.id_view) ด้วย binding.idView โดยทําดังต่อไปนี้
   

• ลบคําจํากัดความของตัวแปร editText และ nicknameTextView รวมถึงการเรียกใช้ findViewById() วิธีนี้จะแสดงข้อผิดพลาดให้คุณ
• แก้ไขข้อผิดพลาดโดยดูมุมมอง nicknameText, nicknameEdit และ doneButton จากออบเจ็กต์ binding แทนตัวแปร (ลบแล้ว)
• แทนที่ view.visibility ด้วย binding.doneButton.visibility การใช้ binding.doneButton แทน view ที่ผ่านเข้ามาจะทําให้โค้ดมีความสม่ําเสมอมากขึ้น
  
  ผลลัพธ์จะเป็นโค้ดต่อไปนี้

binding.nicknameText.text = binding.nicknameEdit.text
binding.nicknameEdit.visibility = View.GONE
binding.doneButton.visibility = View.GONE
binding.nicknameText.visibility = View.VISIBLE

• ฟังก์ชันการทํางานจะไม่มีการเปลี่ยนแปลง คุณสามารถกําจัดพารามิเตอร์ view และอัปเดตการใช้ view ทั้งหมดเพื่อใช้ binding.doneButton ในฟังก์ชันนี้ได้แล้ว

3. nicknameText ต้องมี String และ nicknameEdit.text คือ Editable เมื่อใช้การเชื่อมโยงข้อมูล คุณจะต้องแปลง Editable เป็น String อย่างชัดเจน

binding.nicknameText.text = binding.nicknameEdit.text.toString()

4. คุณลบการนําเข้าที่เป็นสีเทาได้
5. สร้าง Kotlinic โดยใช้ apply{}

binding.apply {
   nicknameText.text = nicknameEdit.text.toString()
   nicknameEdit.visibility = View.GONE
   doneButton.visibility = View.GONE
   nicknameText.visibility = View.VISIBLE
}

6. สร้างและเรียกใช้แอป... ซึ่งแอปควรมีหน้าตาและทํางานเหมือนกันทุกประการ

เคล็ดลับ: หากพบข้อผิดพลาดคอมไพเลอร์หลังจากทําการเปลี่ยนแปลง ให้เลือก Build > Clean Project ตามด้วย Build > Rebuild Project ซึ่งโดยปกติจะเป็นการอัปเดตไฟล์ที่สร้างขึ้น มิเช่นนั้น ให้เลือกไฟล์และแคช แคชไม่ถูกต้อง/รีสตาร์ท เพื่อล้างข้อมูลที่ครอบคลุมมากขึ้น

เคล็ดลับ: ก่อนหน้านี้คุณได้เรียนรู้เกี่ยวกับออบเจ็กต์ Resources ที่มีการอ้างอิงทรัพยากรทั้งหมดในแอป ลองนึกถึงออบเจ็กต์ Binding ในลักษณะเดียวกันเมื่ออ้างอิงข้อมูลพร็อพเพอร์ตี้ แต่ออบเจ็กต์ Binding มีความซับซ้อนมากกว่ามาก

คุณสามารถใช้ประโยชน์จากการเชื่อมโยงข้อมูลเพื่อทําให้คลาสข้อมูลใช้ได้ในข้อมูลพร็อพเพอร์ตี้โดยตรง เทคนิคนี้จะช่วยลดความซับซ้อนของโค้ด และมีประโยชน์มากสําหรับการจัดการกรณีที่ซับซ้อนขึ้น

สําหรับตัวอย่างนี้ แทนที่จะสร้างชื่อและชื่อเล่นโดยใช้ทรัพยากรสตริง คุณจะสร้างคลาสข้อมูลสําหรับชื่อและชื่อเล่นได้ คุณทําให้คลาสข้อมูลใช้ได้ในข้อมูลพร็อพเพอร์ตี้ด้วยการเชื่อมโยงข้อมูล

ขั้นตอนที่ 1: สร้างคลาสข้อมูล MyName

1. เปิดไฟล์ MyName.kt ใน Android Studio ในไดเรกทอรี java หากไม่มีไฟล์นี้ ให้สร้างไฟล์ Kotlin ใหม่และตั้งชื่อว่า MyName.kt
2. กําหนดคลาสข้อมูลสําหรับชื่อและชื่อเล่น ใช้สตริงว่างเป็นค่าเริ่มต้น

data class MyName(var name: String = "", var nickname: String = "")

ขั้นตอนที่ 2: เพิ่มข้อมูลในเลย์เอาต์

ในไฟล์ activity_main.xml ปัจจุบันชื่อนั้นอยู่ใน TextView จากทรัพยากรสตริง คุณต้องแทนที่การอ้างอิงด้วยชื่อด้วยการอ้างอิงข้อมูลในระดับข้อมูล

1. เปิด activity_main.xml ในแท็บข้อความ
2. ระหว่างแท็ก <layout> และ <LinearLayout> ให้ใส่แท็ก <data></data> ที่ด้านบนของเลย์เอาต์ ซึ่งเป็นที่ที่คุณจะเชื่อมต่อมุมมองกับข้อมูล

<data>
  
</data>

ภายในแท็กข้อมูล คุณจะประกาศตัวแปรที่มีชื่อซึ่งอ้างอิงถึงคลาสได้

3. ในแท็ก <data> ให้เพิ่มแท็ก <variable>
4. เพิ่มพารามิเตอร์ name เพื่อตั้งชื่อตัวแปร "myName" เพิ่มพารามิเตอร์ type และตั้งค่าประเภทให้เป็นชื่อที่สมบูรณ์ในตัวเองของคลาสข้อมูล MyName (ชื่อแพ็กเกจ + ชื่อตัวแปร)

<variable
       name="myName"
       type="com.example.android.aboutme.MyName" />

ตอนนี้คุณสามารถอ้างอิงตัวแปร myName แทนการใช้ทรัพยากรสตริงสําหรับชื่อได้แล้ว

5. แทนที่ android:text="@string/name" ด้วยรหัสด้านล่าง

@={} คือคําสั่งที่ใช้รับข้อมูลที่อ้างอิงภายในวงเล็บปีกกา

myName อ้างอิงตัวแปร myName ที่คุณกําหนดไว้ก่อนหน้านี้ ซึ่งชี้ไปยังคลาสข้อมูล myName และดึงข้อมูลพร็อพเพอร์ตี้ name จากชั้นเรียน

android:text="@={myName.name}"

ขั้นตอนที่ 3: สร้างข้อมูล

ตอนนี้คุณมีการอ้างอิงข้อมูลในไฟล์เลย์เอาต์แล้ว ต่อไป คุณจะต้องสร้างข้อมูลจริง

1. เปิดไฟล์ MainActivity.kt
2. เหนือ onCreate() ให้สร้างตัวแปรส่วนตัว หรือที่เรียกว่า myName ตามแบบแผน กําหนดอินสแตนซ์ของคลาสข้อมูล MyName ให้กับตัวแปรโดยส่งผ่านชื่อ

private val myName: MyName = MyName("Aleks Haecky")

3. ใน onCreate() ให้ตั้งค่าของตัวแปร myName ในไฟล์เลย์เอาต์เป็นค่าของตัวแปร myName ที่คุณเพิ่งประกาศ คุณจะเข้าถึงตัวแปรใน XML โดยตรงไม่ได้ โดยจะต้องเข้าถึงได้ผ่านออบเจ็กต์การเชื่อมโยง

binding.myName = myName

4. การดําเนินการนี้อาจแสดงข้อผิดพลาด เนื่องจากคุณต้องรีเฟรชออบเจ็กต์การเชื่อมโยงหลังจากทําการเปลี่ยนแปลง สร้างแอปของคุณและข้อผิดพลาดควรหายไป

ขั้นตอนที่ 4: ใช้คลาสข้อมูลสําหรับชื่อเล่นใน TextView

ขั้นตอนสุดท้ายคือการใช้คลาสข้อมูลสําหรับชื่อเล่นใน TextView

1. เปิด activity_main.xml
2. ในมุมมองข้อความ nickname_text ให้เพิ่มพร็อพเพอร์ตี้ text อ้างอิง nickname ในคลาสข้อมูลดังที่แสดงด้านล่าง

android:text="@={myName.nickname}"

3. ใน ActivityMain ให้แทนที่
   nicknameText.text = nicknameEdit.text.toString()
   ด้วยรหัสเพื่อกําหนดชื่อเล่นในตัวแปร myName

myName?.nickname = nicknameEdit.text.toString()

หลังจากตั้งชื่อเล่นแล้ว คุณต้องให้โค้ดรีเฟรช UI ด้วยข้อมูลใหม่ ในการดําเนินการนี้ คุณต้องยกเลิกนิพจน์การเชื่อมโยงทั้งหมด เพื่อให้ระบบสร้างนิพจน์เหล่านี้ขึ้นใหม่ด้วยข้อมูลที่ถูกต้อง

4. เพิ่ม invalidateAll() หลังจากตั้งชื่อเล่นเพื่อให้ UI รีเฟรชด้วยค่าในออบเจ็กต์การเชื่อมโยงที่อัปเดต

binding.apply {
   myName?.nickname = nicknameEdit.text.toString()
   invalidateAll()
   ...
}

5. สร้างและเรียกใช้แอป ซึ่งแอปควรทํางานเหมือนกับก่อนหน้านี้

โปรเจ็กต์ Android Studio: AboutMeDataBinding

ขั้นตอนการใช้การเชื่อมโยงข้อมูลเพื่อแทนที่การเรียกไปยัง findViewById():

1. เปิดใช้การเชื่อมโยงข้อมูลในส่วน Android ของไฟล์ build.gradle:
   dataBinding { enabled = true }
2. ใช้ <layout> เป็นมุมมองรูทในเลย์เอาต์ XML
3. กําหนดตัวแปรการเชื่อมโยง:
   private lateinit var binding: ActivityMainBinding
4. สร้างออบเจ็กต์การเชื่อมโยงใน MainActivity โดยแทนที่ setContentView:
   binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
5. แทนที่การเรียกไปยัง findViewById() ด้วยการอ้างอิงไปยังมุมมองในออบเจ็กต์การเชื่อมโยง เช่น
   findViewById<Button>(R.id.done_button) ⇒ binding.doneButton
   (ในตัวอย่างนี้ ชื่อของอูฐจะสร้างจากอูฐจาก id ของมุมมอง&ใน 39)

ขั้นตอนในการผูกข้อมูลพร็อพเพอร์ตี้

1. สร้างคลาสข้อมูลสําหรับข้อมูลของคุณ
2. เพิ่มบล็อก <data> ในแท็ก <layout>
3. กําหนด <variable> โดยใช้ชื่อและประเภทเป็นคลาสข้อมูล

<data>
   <variable
       name="myName"
       type="com.example.android.aboutme.MyName" />
</data>

4. ใน MainActivity ให้สร้างตัวแปรด้วยอินสแตนซ์ของคลาสข้อมูล เช่น
   private val myName: MyName = MyName("Aleks Haecky")

5. ในออบเจ็กต์การเชื่อมโยง ให้ตั้งค่าตัวแปรเป็นตัวแปรที่คุณเพิ่งสร้าง:
   binding.myName = myName

6. ใน XML ให้ตั้งค่าเนื้อหาของข้อมูลพร็อพเพอร์ตี้เป็นตัวแปรที่คุณระบุไว้ในบล็อก <data> ใช้สัญลักษณ์จุดเพื่อเข้าถึงข้อมูลภายในคลาสข้อมูล
   android:text="@={myName.name}"

หลักสูตร Udacity:

• การพัฒนาแอป Android ด้วย Kotlin

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

• ไลบรารีการเชื่อมโยงข้อมูล
• ชั้นเรียนการเชื่อมโยงที่สร้างขึ้น
• เริ่มต้นใช้งานการเชื่อมโยงข้อมูล
• เลย์เอาต์และการเชื่อมโยงการเชื่อมโยง

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน Codelab นี้ซึ่งเป็นส่วนหนึ่งของหลักสูตรที่นําโดยผู้สอน สิ่งที่ผู้สอนต้องทํามีดังนี้

• มอบหมายการบ้านหากจําเป็น
• สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานทําการบ้าน
• ตัดเกรดการบ้าน

ผู้สอนจะใช้คําแนะนําเหล่านี้เท่าใดก็ได้หรือตามที่ต้องการก็ได้ และสามารถกําหนดให้การบ้านอื่นๆ ที่ตนคิดว่าเหมาะสมได้

หากคุณใช้ Codelab ด้วยตัวเอง ก็ให้ใช้การบ้านเพื่อทดสอบความรู้ของคุณได้

ตอบคําถามเหล่านี้

คำถามที่ 1

เหตุใดคุณจึงอยากโทรหา findViewById() โดยชัดแจ้งและโดยนัย

• ทุกครั้งที่มีการเรียกใช้ findViewById() จะข้ามลําดับชั้นของมุมมอง
• findViewById() ทํางานในชุดข้อความหลักหรือ UI
• การโทรเหล่านี้อาจทําให้อินเทอร์เฟซผู้ใช้ช้าลง
• แอปของคุณมีแนวโน้มที่จะขัดข้องน้อยลง

คำถามที่ 2

คุณจะอธิบายถึงการเชื่อมโยงข้อมูลอย่างไร

ต่อไปนี้คือสิ่งที่คุณสามารถพูดได้เกี่ยวกับการเชื่อมโยงข้อมูล

• แนวคิดหลักเกี่ยวกับการเชื่อมโยงข้อมูลคือการสร้างออบเจ็กต์ที่เชื่อมต่อ/แมป/เชื่อมโยงข้อมูลระยะไกล 2 ส่วนเข้าด้วยกันเมื่อรวบรวมข้อมูล เพื่อที่จะได้ไม่ต้องค้นหาข้อมูลขณะรันไทม์
• วัตถุที่แสดงการเชื่อมโยงเหล่านี้แก่คุณเรียกว่าออบเจ็กต์การเชื่อมโยง
• คอมไพเลอร์สร้างการเชื่อมโยง

คำถามที่ 3

ข้อใดต่อไปนี้ไม่ใช่ประโยชน์ของการผูกข้อมูล

• โค้ดสั้น อ่านง่ายขึ้น และดูแลรักษาได้ง่ายกว่า
• ข้อมูลและมุมมองมีการแยกออกอย่างชัดเจน
• ระบบ Android จะข้ามลําดับชั้นการดูเพียงครั้งเดียวเพื่อดูแต่ละมุมมอง
• การเรียกใช้ findViewById() จะทําให้คอมไพเลอร์เกิดข้อผิดพลาด
• พิมพ์ความปลอดภัยเพื่อเข้าถึงข้อมูลพร็อพเพอร์ตี้

คำถามที่ 4

แท็ก <layout> มีฟังก์ชันการทํางานอะไรบ้าง

• คุณใส่ไว้ในมุมมองรูทของเลย์เอาต์
• ระบบจะสร้างการเชื่อมโยงสําหรับข้อมูลพร็อพเพอร์ตี้ทั้งหมดในเลย์เอาต์
• โดยจะกําหนดมุมมองระดับบนสุดในรูปแบบ XML ที่ใช้การเชื่อมโยงข้อมูล
• คุณใช้แท็ก <data> ภายใน <layout> เพื่อเชื่อมโยงตัวแปรกับคลาสข้อมูลได้

คำถามที่ 5

วิธีใดที่ถูกต้องในการอ้างอิงข้อมูลที่เชื่อมโยงในเลย์เอาต์ XML

• android:text="@={myDataClass.property}"
• android:text="@={myDataClass}"
• android:text="@={myDataClass.property.toString()}"
• android:text="@={myDataClass.bound_data.property}"

เริ่มบทเรียนถัดไป: 3.1: สร้างส่วนย่อย

สําหรับลิงก์ไปยัง Codelab อื่นๆ ในหลักสูตรนี้ โปรดดูหน้า Landing Page ของ Codelab ของ Android Kotlin Fundamentals