สร้างแอปลูกเต๋าแบบอินเทอร์แอกทีฟพื้นฐาน

ใน Codelab นี้ คุณจะต้องสร้างแอปลูกเต๋า Android ที่ผู้ใช้สามารถคลิก Button ในแอปเพื่อทอยลูกเต๋า ผลลัพธ์ของม้วนจะแสดงเป็น TextView บนหน้าจอ

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

สิ่งที่ต้องมีก่อน

• วิธีสร้างและเรียกใช้แอป " Hello, World!" ใน Android Studio
• คุ้นเคยกับการใช้ TextViews และ ImageViews ในแอป
• วิธีแก้ไขแอตทริบิวต์ของ TextView ในเครื่องมือแก้ไขเลย์เอาต์
• วิธีแยกข้อความเป็นทรัพยากรสตริงเพื่อให้แปลแอปและนําสตริงมาใช้ซ้ําได้ง่ายขึ้น
• ข้อมูลเบื้องต้นเกี่ยวกับโปรแกรม Kotlin ตามการสอนใน Codelab ก่อนหน้านี้

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

• วิธีเพิ่ม Button ในแอป Android
• วิธีเพิ่มลักษณะการทํางานเมื่อแตะ Button ในแอป
• วิธีเปิดและแก้ไขโค้ด Activity ของแอป
• วิธีแสดงข้อความ Toast
• วิธีอัปเดตเนื้อหาของ TextView ขณะแอปกําลังทํางาน

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

• แอปลูกเต๋า Android ที่มี Button เพื่อทอยลูกเต๋าและอัปเดตข้อความบนหน้าจอด้วยผลลัพธ์ของลูกกลิ้ง

สิ่งที่ต้องมี

• คอมพิวเตอร์ที่ติดตั้ง Android Studio

แอปจะมีลักษณะเช่นนี้เมื่อดําเนินการ Codelab เสร็จสิ้นแล้ว

สร้างโปรเจ็กต์กิจกรรมที่ว่างเปล่า

1. หากคุณเปิดโปรเจ็กต์เดิมไว้ใน Android Studio แล้ว ให้ไปที่ File > New > New Project... เพื่อเปิดหน้าจอ Create New Project
2. ใน Create New Project ให้สร้างโปรเจ็กต์ Kotlin ใหม่โดยใช้เทมเพลต Empty Activity
3. เรียกแอป "Dice Roller" ที่ระดับ API ต่ําสุด 19 (KitKat)

สําคัญ: หากยังไม่คุ้นเคยกับการสร้างโปรเจ็กต์ใหม่ใน Android Studio โปรดดูรายละเอียดที่หัวข้อสร้างและเรียกใช้แอป Android เป็นครั้งแรก

4. เรียกใช้แอปใหม่และควรเป็นแบบนี้
   

เปิดเครื่องมือแก้ไขเลย์เอาต์

1. ในหน้าต่างโปรเจ็กต์ ให้ดับเบิลคลิก activity_main.xml (app > res > layout > activity_main.xml) เพื่อเปิด คุณควรเห็น Layout Editor โดยมีเฉพาะ " Hello World" TextView ตรงกลางแอป
   

จากนั้นคุณจะเพิ่ม Button ไปยังแอป โดย Button คือองค์ประกอบของอินเทอร์เฟซผู้ใช้ (UI) ใน Android ที่ผู้ใช้แตะเพื่อดําเนินการได้

ในงานนี้ คุณเพิ่ม Button ใต้ " Hello World" TextView TextView และ Button จะอยู่ใน ConstraintLayout ซึ่งเป็นประเภท ViewGroup

เมื่อมี Views ภายใน ViewGroup ระบบจะถือว่า Views เป็นย่อยของผู้ปกครองViewGroup ในกรณีที่เป็นแอปของคุณ TextView และ Button จะถือว่าเป็นผู้เผยแพร่โฆษณาระดับบนสุด ConstraintLayout

เพิ่ม Button เป็นผู้เผยแพร่โฆษณารายย่อยของ ConstraintLayout ที่มีอยู่ในแอป

หมายเหตุ: ในแผนผังต้นไม้ ในลําดับชั้นของการดู มุมมองของผู้ปกครองอาจเป็นมุมมองย่อย และมุมมองของเด็กอาจเป็นผู้ปกครองของเด็กๆ คนอื่น

เพิ่มปุ่มลงในเลย์เอาต์

1. ลาก Button จากจานสีไปยังมุมมองการออกแบบ โดยวางตําแหน่งไว้ใต้ "สวัสดีโลก&quotTextView
   
2. ยืนยันว่า Palette ใน Component Tree ยืนยันว่า Button และ TextView อยู่ภายใต้ ConstraintLayout (เป็นระดับล่างของ ConstraintLayout)
3. ตรวจสอบข้อผิดพลาดว่า Button ไม่ได้ถูกจํากัด เนื่องจาก Button อยู่ภายใน ConstraintLayout คุณจึงต้องกําหนดข้อจํากัดในแนวตั้งและแนวนอนเพื่อวางตําแหน่ง

วางตําแหน่งปุ่ม

ในขั้นตอนนี้ คุณจะต้องเพิ่มข้อจํากัดแนวตั้งจากด้านบนของ Button ไปที่ด้านล่างของ TextView การดําเนินการนี้จะวาง Button ไว้ต่ํากว่า TextView

1. ในมุมมองการออกแบบที่ขอบด้านบนของ Button ให้กดวงกลมสีขาวค้างไว้ด้วยเส้นขอบสีน้ําเงิน ลากตัวชี้ จากนั้นลูกศรจะไปตามตัวชี้ ปล่อยเมื่อมาถึงขอบด้านล่างของ " Hello World" TextView การดําเนินการนี้จะกําหนดข้อจํากัดด้านเลย์เอาต์ และ Button จะเลื่อนไปต่ํากว่า TextView
   
2. ดูแอตทริบิวต์ทางด้านขวาของเครื่องมือแก้ไขเลย์เอาต์
3. ในวิดเจ็ตข้อจํากัด ให้สังเกตว่ามีข้อจํากัดของเลย์เอาต์ใหม่ที่ตั้งค่าไว้ที่ด้านล่างของ TextView, ด้านบน → BottomOf textView (0dp) (0dp) หมายความว่ามีระยะขอบ 0 นอกจากนี้ คุณยังมีข้อผิดพลาดเนื่องจากไม่มีข้อจํากัดในแนวนอน
   
4. เพิ่มข้อจํากัดในแนวนอนจากด้านซ้ายของ Button ทางด้านซ้ายของ ConstraintLayout ระดับบนสุด
5. ทําซ้ําทางด้านขวาโดยเชื่อมต่อขอบด้านขวาของ Button กับขอบด้านขวาของ ConstraintLayout ผลลัพธ์ที่ได้ควรมีลักษณะดังนี้

6. หากเลือก Button ไว้ วิดเจ็ตข้อจํากัดควรมีลักษณะดังนี้ สังเกตเห็นข้อจํากัดเพิ่มเติม 2 รายการที่เพิ่มเข้ามา ได้แก่ Start → StartOfParent (0dp) และ End → EndOfParent (0dp) ซึ่งหมายความว่า Button จะมีจุดศูนย์กลางอยู่ที่ ConstraintLayout ในระดับบนสุด
   

7. เรียกใช้แอปที่ได้ ภาพหน้าจอควรมีลักษณะดังนี้ คลิกที่ Button ได้ แต่ก็ยังทําอะไรไม่ได้ มาลุยกันต่อเลย

เปลี่ยนข้อความของปุ่ม

คุณจะทําการเปลี่ยนแปลง UI อีก 2-3 รายการในเครื่องมือแก้ไขเลย์เอาต์

แทนที่จะให้ป้ายกํากับ Button แสดง "Button" ให้เปลี่ยนเป็นสิ่งที่บ่งชี้ว่าปุ่มจะทํา: "Roll"

1. ในเลย์เอาต์เลย์เอาต์ที่เลือก Button ไว้ ให้ไปที่แอตทริบิวต์ เปลี่ยนข้อความเป็นRoll และกดแป้น Enter (Return ใน Mac)

2. ในแผนผังคอมโพเนนต์ สามเหลี่ยมคําเตือนสีส้มจะปรากฏถัดจาก Button หากวางเมาส์เหนือตัวชี้เหนือรูปสามเหลี่ยม จะมีข้อความปรากฏขึ้น Android Studio ตรวจพบสตริงฮาร์ดโค้ด ("Roll") ในโค้ดของแอป และแนะนําให้ใช้ทรัพยากรสตริงแทน

การมีสตริงแบบฮาร์ดโค้ดจะทําให้แอปแปลในภาษาอื่นได้ยากขึ้น และการนําสตริงในส่วนต่างๆ ของแอปมาใช้ซ้ําได้ยากขึ้น โชคดีที่ Android Studio มีการแก้ปัญหาให้คุณโดยอัตโนมัติ

3. ในโครงสร้างคอมโพเนนต์ ให้คลิกสามเหลี่ยมสีส้ม

ข้อความเตือนฉบับเต็มจะเปิดขึ้น

4. ที่ด้านล่างของข้อความ ให้คลิกปุ่มแก้ไขที่ด้านล่างของแก้ไขที่แนะนํา (อาจต้องเลื่อนลง)
5. กล่องโต้ตอบแยกทรัพยากรจะเปิดขึ้น การแยกสตริงหมายถึงการใช้ข้อความ "Roll" และสร้างทรัพยากรสตริงชื่อ roll ใน strings.xml (app > res > value > string.xml) ค่าเริ่มต้นจะถูกต้อง จากนั้นคลิกตกลง

6. โปรดสังเกตว่าในแอตทริบิวต์ แอตทริบิวต์ text สําหรับ Button จะพูดว่า @string/roll ซึ่งอ้างอิงถึงทรัพยากรที่คุณเพิ่งสร้าง
   

ในมุมมองการออกแบบ Button ควรพูดว่าม้วน

จัดรูปแบบ TextView

"สวัสดีโลก!" ข้อความมีขนาดเล็กและมีข้อความสําหรับแอปของคุณไม่เพียงพอ ในขั้นตอนนี้ จะแทนที่ข้อความขนาดเล็ก &สวัสดี โลก!" ด้วยตัวเลขสําหรับแสดงค่าแบบเลื่อน และทําให้แบบอักษรมีขนาดใหญ่ขึ้นเพื่อให้มองเห็นได้ง่ายขึ้น

1. ในตัวแก้ไขดีไซน์ ให้เลือก TextView เพื่อให้แอตทริบิวต์ปรากฏในหน้าต่างแอตทริบิวต์
2. เปลี่ยน textSize ของ TextView เป็น 36sp เพื่อให้มีขนาดใหญ่และอ่านได้ง่าย คุณอาจต้องเลื่อนหา textSize

3. ล้างแอตทริบิวต์ข้อความของ TextView คุณไม่จําเป็นต้องแสดงอะไรใน TextView จนกว่าผู้ใช้จะทอยลูกเต๋า

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

.

4. เลือก TextView ในแผนผังคอมโพเนนต์
5. ใต้แอตทริบิวต์ทั่วไป ให้หาแอตทริบิวต์ข้อความและแอตทริบิวต์ข้อความอีกรายการที่มีไอคอนเครื่องมือ แอตทริบิวต์ text คือสิ่งที่จะแสดงแก่ผู้ใช้เมื่อแอปทํางานอยู่ แอตทริบิวต์ text ที่มีไอคอนเครื่องมือคือแอตทริบิวต์ "tools text" สําหรับนักพัฒนาซอฟต์แวร์เท่านั้น
6. ตั้งค่าข้อความเครื่องมือเป็น "1" ใน TextView (เพื่อสมมติว่าคุณมีลูกเต๋า 1 ลูก) "1" จะปรากฏในตัวแก้ไขดีไซน์ภายใน Android Studio เท่านั้น แต่จะไม่ปรากฏในเมื่อคุณเรียกใช้แอปในอุปกรณ์หรือโปรแกรมจําลองจริง

โปรดทราบว่านักพัฒนาแอปเป็นผู้ดูข้อความนี้เท่านั้น คุณจึงไม่จําเป็นต้องสร้างทรัพยากรสตริง

7. ดูที่แอปของคุณในหน้าตัวอย่าง "1" ปรากฏอยู่

8. เรียกใช้แอป นี่คือลักษณะของแอปเมื่อทํางานบนโปรแกรมจําลอง "1" ไม่แสดง นี่คือลักษณะการทํางานที่ถูกต้อง

เยี่ยม คุณทําการเปลี่ยนแปลงเลย์เอาต์เรียบร้อยแล้ว

คุณมีแอปที่มีปุ่ม แต่ถ้าแตะปุ่มดังกล่าว ไม่มีอะไรเกิดขึ้น หากต้องการเปลี่ยนการตั้งค่านี้ คุณจะต้องเขียนโค้ด Kotlin จํานวนหนึ่งที่ทอยลูกเต๋าและอัปเดตหน้าจอเมื่อแตะปุ่ม

ในการเปลี่ยนแปลงนี้ คุณจําเป็นต้องทําความเข้าใจเพิ่มเติมเล็กน้อยเกี่ยวกับวิธีจัดโครงสร้างแอป Android

Activity จะแสดงหน้าต่างที่แอปของคุณวาด UI โดยปกติ Activity จะแสดงเต็มหน้าจอแอปที่ทํางานอยู่ ทุกแอปมีกิจกรรมอย่างน้อย 1 กิจกรรม กิจกรรมระดับบนสุดหรือกิจกรรมแรกมักจะเรียกว่า MainActivity และนําเสนอโดยเทมเพลตโครงการ ตัวอย่างเช่น เมื่อผู้ใช้เลื่อนดูรายการแอปในอุปกรณ์และแตะไอคอนแอป "Dice Roller" ระบบ Android จะเริ่มต้นMainActivityของแอป

ในโค้ด MainActivity คุณจะต้องระบุรายละเอียดเกี่ยวกับเลย์เอาต์ของ Activity&#39 และแนวทางที่ผู้ใช้ควรโต้ตอบด้วย

• ในแอปการ์ดวันเกิดจะมี Activity 1 ข้อความซึ่งแสดงข้อความและรูปภาพวันเกิด
• ในแอปลูกเต๋า มี Activity หนึ่งภาพที่แสดงเลย์เอาต์ TextView และ Button ที่คุณเพิ่งสร้าง

แต่สําหรับแอปที่ซับซ้อนมากขึ้นอาจมีหลายหน้าจอและ Activity มากกว่า 1 จอ Activity แต่ละรายการมีวัตถุประสงค์ที่เฉพาะเจาะจง

เช่น ในแอปแกลเลอรีรูปภาพ คุณอาจมี Activity สําหรับแสดงตารางกริดรูปภาพ Activity ที่สองสําหรับการดูรูปภาพแต่ละรูป และ Activity รายการที่ 3 สําหรับแก้ไขรูปภาพแต่ละรูป

เปิดไฟล์ MainActivity.kt

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

1. ไปที่และเปิดไฟล์ MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt) ข้อมูลที่คุณควรเห็นมีดังต่อไปนี้ หากคุณเห็น import... ให้คลิก ... เพื่อขยายการนําเข้า

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

คุณไม่จําเป็นต้องเข้าใจทุกคําข้างต้นของโค้ดข้างต้น แต่จะต้องมีแนวคิดกว้างๆ ว่าต้องทําอย่างไร ยิ่งคุณทํางานกับโค้ด Android มากเท่าใด ก็ยิ่งคุ้นเคยมากขึ้นเท่านั้น และจะเข้าใจโค้ดดังกล่าวมากขึ้น

2. ดูโค้ด Kotlin สําหรับคลาส MainActivity ซึ่งระบุโดยคีย์เวิร์ด class ตามด้วยชื่อ

class MainActivity : AppCompatActivity() {
    ...
}

3. โปรดทราบว่าไม่มีฟังก์ชัน main() ใน MainActivity
   
   ก่อนหน้านี้ คุณได้ทราบว่าโปรแกรม Kotlin ทุกโปรแกรมต้องมีฟังก์ชัน main() แอป Android ทํางานแตกต่างออกไป แทนที่จะเรียกใช้ฟังก์ชัน main() ระบบ Android จะเรียกใช้เมธอด onCreate() ของ MainActivity เมื่อแอปของคุณเปิดเป็นครั้งแรก
   
4. ค้นหาเมธอด onCreate() ซึ่งมีลักษณะเหมือนโค้ดด้านล่าง

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

คุณจะเรียนรู้เกี่ยวกับ override ใน Codelab ถัดไป (ไม่ต้องกังวลอีกต่อไปตอนนี้) เมธอด onCreate() ที่เหลือจะตั้งค่า MainActivity โดยใช้โค้ดจากการนําเข้าและตั้งค่าเลย์เอาต์เริ่มต้นด้วย setContentView()

5. สังเกตเส้นที่ขึ้นต้นด้วย import
   

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

เปิดใช้การนําเข้าอัตโนมัติ

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

1. ใน Android Studio ให้เปิดการตั้งค่าโดยไปที่ File > Other Settings > Preferences for New Projects
2. ขยายการตั้งค่าอื่นๆ > นําเข้าอัตโนมัติ ในส่วน Java และ Kotlin ให้เลือกเพิ่มการนําเข้าได้ทันทีได้ทันทีและเพิ่มประสิทธิภาพการนําเข้าได้ทันที (สําหรับโปรเจ็กต์ปัจจุบัน) โปรดทราบว่าแต่ละส่วนจะมีช่องทําเครื่องหมาย 2 ช่อง
   
   การตั้งค่าการนําเข้าที่ไม่ชัดเจนจะบอกให้ Android Studio เพิ่มใบแจ้งยอดการนําเข้าโดยอัตโนมัติ ตราบใดที่ระบุได้ว่ารายการใดควรใช้ การตั้งค่าเพิ่มประสิทธิภาพการนําเข้าจะบอกให้ Android Studio นําการนําเข้าที่ไม่ได้ใช้โดยโค้ดของคุณออก
   
3. บันทึกการเปลี่ยนแปลงและปิดการตั้งค่าโดยกดตกลง

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

แสดงข้อความเมื่อคลิกปุ่ม

ในขั้นตอนนี้ คุณจะระบุว่าเมื่อมีการคลิกปุ่ม ข้อความสั้นๆ จะแสดงที่ด้านล่างของหน้าจอ

1. เพิ่มโค้ดต่อไปนี้ลงในเมธอด onCreate() หลังจากการเรียก setContentView() เมธอด findViewById() จะค้นหา Button ในเลย์เอาต์ R.id.button คือรหัสทรัพยากรของ Button ซึ่งเป็นตัวระบุที่ไม่ซ้ํากัน โค้ดจะบันทึกการอ้างอิงออบเจ็กต์ Button ในตัวแปรชื่อ rollButton ไม่ใช่ออบเจ็กต์ Button เอง

val rollButton: Button = findViewById(R.id.button)

หมายเหตุ: Android จะกําหนดหมายเลขรหัสให้กับทรัพยากรในแอปโดยอัตโนมัติ เช่น ปุ่มม้วนมีรหัสทรัพยากร และสตริงสําหรับข้อความของปุ่มจะมีรหัสทรัพยากรด้วย รหัสทรัพยากรอยู่ในรูปแบบ R.<type>.<name> เช่น R.string.roll สําหรับรหัส View <type> คือ id ตัวอย่างเช่น R.id.button

โค้ดจะบันทึกการอ้างอิงไปยังออบเจ็กต์ Button ในตัวแปรชื่อ rollButton ไม่ใช่ออบเจ็กต์ Button เอง

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

โดยเมธอด onCreate() ควรมีลักษณะดังนี้

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. ตรวจสอบว่า Android Studio เพิ่มคําสั่ง import สําหรับ Button โดยอัตโนมัติแล้ว
   โปรดทราบว่ามีคําสั่งนําเข้า 3 รายการในขณะนี้ คําสั่งที่ 3 จะถูกเพิ่มโดยอัตโนมัติ
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

หมายเหตุ: หากเปิดใช้การนําเข้าอัตโนมัติไม่ได้ ระบบจะไฮไลต์ Button เป็นสีแดง คุณเพิ่มการนําเข้าที่ถูกต้องได้โดยใส่เคอร์เซอร์ข้อความภายในคําว่า Button แล้วกด Alt+Enter (Option+Enter ใน Mac)

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

3. ใช้ออบเจ็กต์ rollButton และตั้งค่า Listener การคลิกบนออบเจ็กต์โดยเรียกเมธอด setOnClickListener()

rollButton.setOnClickListener {
}

ขณะที่พิมพ์ Android Studio อาจแสดงคําแนะนําหลายรายการ ในกรณีนี้ ให้เลือกตัวเลือก setOnClickListener {...}

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

4. สร้าง Toast ที่มีข้อความ "Dice Rolled!" โดยโทรไปที่ Toast.makeText()

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. จากนั้นบอกให้ Toast แสดงตัวเองโดยเรียกเมธอด show()

toast.show()

คลาส MainActivity ที่คุณอัปเดตมีลักษณะเช่นนี้ คําสั่ง package และ import จะยังแสดงอยู่ที่ด้านบนของไฟล์

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

คุณอาจรวม 2 บรรทัดนี้ใน Listener การคลิกให้เป็นบรรทัดเดียวโดยไม่มีตัวแปร ซึ่งเป็นรูปแบบที่คุณอาจพบในโค้ดอื่นๆ

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. เรียกใช้แอปและคลิกปุ่มม้วน ข้อความโทสต์จะปรากฏขึ้นมาที่ด้านล่างของหน้าจอและจะหายไปในไม่ช้า

ไชโย การคลิกปุ่มนี้จะทําให้ข้อความปรากฏขึ้น นี่เป็นครั้งแรกที่คุณเขียนโค้ด Kotlin สําหรับ Android

อัปเดต TextView เมื่อมีการคลิกปุ่ม

แทนการแสดงข้อความ Toast ชั่วคราว คุณจะต้องเขียนโค้ดเพื่ออัปเดต TextView บนหน้าจอเมื่อคลิกปุ่มม้วน

1. กลับไปที่ activity_main.xml (app > res >Layout >activity_main.xml)
2. คลิกที่ TextView
3. โปรดทราบว่ารหัส [id] คือ textView
   
4. เปิด MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. ลบบรรทัดของโค้ดที่สร้างและแสดง Toast

rollButton.setOnClickListener {
  
}

6. ในตําแหน่งดังกล่าว ให้สร้างตัวแปรใหม่ที่เรียกว่า resultTextView เพื่อจัดเก็บ TextView
7. ใช้ findViewById() เพื่อค้นหา textView ในเลย์เอาต์โดยใช้รหัสและจัดเก็บการอ้างอิงไว้

val resultTextView: TextView = findViewById(R.id.textView)

8. ตั้งค่าข้อความใน resultTextView เป็น "6" ในเครื่องหมายคําพูด
   

resultTextView.text = "6"

วิธีนี้คล้ายกับที่คุณทําโดยตั้งค่า text ใน Attributes แต่ตอนนี้อยู่ในโค้ดแล้ว ข้อความจึงต้องอยู่ในเครื่องหมายคําพูด การตั้งค่านี้หมายความว่าขณะนี้ TextView จะแสดง 6 เสมอ คุณจะเพิ่มโค้ดเพื่อทอยลูกเต๋าและแสดงค่าต่างๆ ในงานถัดไป

คลาส MainActivity ควรมีลักษณะดังนี้

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. เรียกใช้แอป คลิกที่ปุ่ม ควรอัปเดต TextView เป็น "6"

สิ่งเดียวที่หายไปคือลูกเต๋าจริง คุณนําคลาส Dice มาใช้ซ้ําได้จาก Codelab ก่อนหน้า ซึ่งจะจัดการกับตรรกะสําหรับทอยลูกเต๋า

เพิ่มชั้นเรียนลูกเต๋า

1. หลังจากวงเล็บปีกกาล่าสุดใน MainActivity ชั้นเรียน ให้สร้างชั้นเรียน Dice ด้วยเมธอด roll()

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. สังเกตเห็นว่า Android Studio ขีดเส้นใต้ numSides ด้วยเส้นสีเทา (อาจใช้เวลาสักครู่)
3. วางเมาส์ไว้เหนือ numSides และป๊อปอัปจะปรากฏขึ้นว่า Property 'numSides' อาจเป็นส่วนตัว
   

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

4. เริ่มทําการแก้ไขที่แนะนําจาก Android Studio โดยคลิก Make 'numSides' 'private'

สร้างเมธอด RollDice()

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

1. แทนที่โค้ดใน Listener การคลิกซึ่งกําหนดข้อความเป็น "6" ด้วยการเรียก rollDice()

rollButton.setOnClickListener {
   rollDice()
}

2. เนื่องจาก rollDice() ยังไม่ได้กําหนดขึ้น Android Studio จึงแจ้งข้อผิดพลาดและแสดงสถานะ rollDice() เป็นสีแดง
3. หากคุณวางเมาส์เหนือตัวชี้เหนือ rollDice() แล้ว Android Studio จะแสดงปัญหาและวิธีแก้ไขที่เป็นไปได้บางอย่าง

4. คลิกการทํางานเพิ่มเติม... เพื่อเปิดเมนูขึ้นมา Android Studio ช่วยให้คุณทํางานได้มากขึ้น

เคล็ดลับ: หากคุณพบว่าวางเมาส์เหนือเคอร์เซอร์ได้ยาก แล้วคลิกการทํางานเพิ่มเติม... คุณสามารถคลิก rollDice() และกด Alt+Enter (Option+Enter บน Mac) เพื่อเปิดเมนู

5. เลือกสร้างฟังก์ชัน 'rollDice' Android Studio จะสร้างคําจํากัดความที่ว่างเปล่าสําหรับฟังก์ชันใน MainActivity

private fun rollDice() {
    TODO("Not yet implemented")
}

สร้างอินสแตนซ์ออบเจ็กต์ลูกเต๋าใหม่

ในขั้นตอนนี้ คุณจะสร้างเมธอด rollDice() แล้วทอยลูกเต๋า แล้วแสดงผลลัพธ์ใน TextView

1. ภายใน rollDice() ให้ลบสายที่ TODO()
2. เพิ่มโค้ดเพื่อสร้างลูกเต๋า 6 ด้าน

val dice = Dice(6)

3. ทอยลูกเต๋าโดยเรียกเมธอด roll() และบันทึกผลลัพธ์ในตัวแปรชื่อ diceRoll

val diceRoll = dice.roll()

4. ค้นหา TextView ด้วยการโทร findViewById()

val resultTextView: TextView = findViewById(R.id.textView)

ตัวแปร diceRoll เป็นตัวเลข แต่ TextView จะใช้ข้อความ คุณสามารถใช้เมธอด toString() ใน diceRoll เพื่อแปลงเป็นสตริงได้

5. แปลง diceRoll เป็นสตริงและใช้เพื่ออัปเดตข้อความของ resultTextView

resultTextView.text = diceRoll.toString()

เมธอด rollDice() จะมีลักษณะดังนี้

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. เรียกใช้แอป ผลลัพธ์ลูกเต๋าควรเปลี่ยนไปเป็นค่าอื่นๆ นอกเหนือจาก 6! เนื่องจากเป็นตัวเลขที่สุ่มจาก 1 ถึง 6 ค่า 6 จึงอาจปรากฏเป็นครั้งคราวด้วย

ไชโย คุณเยี่ยมไปเลย

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

พฤติกรรมเหล่านี้คือสิ่งที่นักพัฒนาซอฟต์แวร์ Android มืออาชีพจะฝึกหัดเขียนโค้ด

คู่มือรูปแบบ Android

ในการทํางานร่วมกับทีม เหมาะกับการเขียนโค้ดในทีมที่คล้ายกันเพื่อให้ความสม่ําเสมอของทั้งโค้ดตรงกัน นั่นคือเหตุผลที่ Android มี Style Guide สําหรับการเขียนโค้ด Android เช่น รูปแบบการตั้งชื่อ การจัดรูปแบบ และแนวทางปฏิบัติแนะนําอื่นๆ ปฏิบัติตามหลักเกณฑ์เหล่านี้เมื่อเขียนโค้ด Android: Kotlin Style Guide สําหรับนักพัฒนาแอป Android

ด้านล่างนี้คือ 2-3 วิธีที่คุณสามารถทําตามคู่มือรูปแบบได้

ล้างโค้ด

จํากัดโค้ดของคุณ

คุณสามารถทําให้โค้ดสั้นกระชับมากขึ้นโดยการย่อโค้ดให้มีจํานวนบรรทัดน้อยลง ตัวอย่างเช่น โค้ดที่ตั้งค่า Listener การคลิกใน Button

rollButton.setOnClickListener {
    rollDice()
}

เนื่องจากวิธีการสําหรับ Listener การคลิกมีความยาวเพียง 1 บรรทัด คุณจึงจํากัดการเรียกเมธอด rollDice() และวงเล็บปีกกาทั้งหมดให้อยู่ในบรรทัดเดียวได้ มีลักษณะดังนี้ หนึ่งบรรทัดแทนที่จะเป็นสามบรรทัด

rollButton.setOnClickListener { rollDice() }

เปลี่ยนรูปแบบโค้ด

ตอนนี้คุณจะจัดรูปแบบโค้ดใหม่เพื่อให้เป็นไปตามรูปแบบการจัดรูปแบบโค้ดที่แนะนําสําหรับ Android

1. ในชั้นเรียน MainActivity.kt ให้เลือกข้อความทั้งหมดในไฟล์ด้วยแป้นพิมพ์ลัด Control+A ใน Windows (หรือ Command+A ใน Mac) หรือคุณอาจไปที่เมนูใน Android Studio แก้ไข > เลือกทั้งหมด
2. เมื่อเลือกข้อความทั้งหมดในไฟล์ ให้ไปที่เมนู Android Studio Code > Reformat Code หรือใช้แป้นพิมพ์ลัด Ctrl+Alt+L (หรือ Command+Option+L ใน Mac)

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

แสดงความคิดเห็นในรหัส

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

โดยปกติแล้วการเพิ่มความคิดเห็นไปยังแต่ละชั้นเรียน (MainActivity และ Dice เป็นคลาสเดียวที่คุณมีในแอป) และวิธีการเขียนทั้งหมด ใช้สัญลักษณ์ /** และ **/ ในตอนต้นและตอนท้ายของความคิดเห็น เพื่อแจ้งระบบว่านี่ไม่ใช่โค้ด ระบบจะไม่สนใจบรรทัดเหล่านี้เมื่อระบบเรียกใช้โค้ด

ตัวอย่างความคิดเห็นในชั้นเรียน

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

ตัวอย่างความคิดเห็นในเมธอด

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

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

ตัวอย่างความคิดเห็น 2 รายการในเมธอด

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. ลองใช้เวลาสักครู่เพื่อเพิ่มความคิดเห็นลงในโค้ด
2. การเปลี่ยนแปลงที่มีการแสดงความคิดเห็นและการจัดรูปแบบเหล่านี้ถือเป็นแนวทางปฏิบัติที่ดีเพื่อเรียกใช้แอปอีกครั้งเพื่อให้แน่ใจว่าแอปจะยังทํางานตามที่คาดหวัง

ดูโค้ดโซลูชันสําหรับวิธีที่คุณอาจแสดงความคิดเห็นเกี่ยวกับโค้ดได้

โค้ดโซลูชันสําหรับ Codelab นี้อยู่ในโปรเจ็กต์และโมดูลที่แสดงด้านล่าง

URL ของโซลูชัน: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

หากต้องการรับรหัสสําหรับ Codelab นี้จาก GitHub และเปิดใน Android Studio ให้ทําตามขั้นตอนต่อไปนี้

1. เริ่ม Android Studio
2. คลิกดูโปรเจ็กต์จากการควบคุมเวอร์ชันในหน้าต่างยินดีต้อนรับสู่ Android Studio
3. เลือก Git

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

7. คลิกโคลน Android Studio จะเริ่มดึงโค้ดของคุณ
8. ในป๊อปอัปชําระเงินจากการควบคุมเวอร์ชัน ให้คลิกใช่

9. รอให้ Android Studio เปิด
10. เลือกโมดูลที่ถูกต้องสําหรับโค้ดเริ่มต้นสําหรับ Codelab หรือโค้ดโซลูชัน

11. คลิกปุ่มเรียกใช้ เพื่อสร้างและเรียกใช้โค้ด

ความช่วยเหลือ: ดูคู่มือความช่วยเหลือและการแก้ปัญหาหากโค้ดที่ดาวน์โหลดไม่โหลดหรือทํางานอย่างถูกต้อง

• เพิ่ม Button ในแอป Android โดยใช้เครื่องมือแก้ไขเลย์เอาต์
• แก้ไขคลาส MainActivity.kt เพื่อเพิ่มลักษณะการทํางานแบบอินเทอร์แอกทีฟในแอป
• แสดงข้อความ Toast เป็นโซลูชันชั่วคราวเพื่อยืนยันว่าคุณอยู่ในเส้นทางที่ถูกต้อง
• ตั้งค่า Listener การคลิกสําหรับ Button โดยใช้ setOnClickListener() เพื่อเพิ่มลักษณะการทํางานเมื่อคลิก Button
• เมื่อแอปทํางาน คุณสามารถอัปเดตหน้าจอโดยเรียกเมธอดใน TextView, Button หรือองค์ประกอบ UI อื่นๆ ในเลย์เอาต์
• แสดงความคิดเห็นเกี่ยวกับโค้ดเพื่อช่วยให้ผู้อื่นที่อ่านรหัสของคุณได้ทราบว่าแนวทางของคุณเป็นอย่างไร
• เปลี่ยนรูปแบบโค้ดและล้างโค้ด

• ชั้นเรียน Button
• ชั้นเรียน Toast
• ชั้นเรียน TextView
• คู่มือรูปแบบ Kotlin สําหรับนักพัฒนาแอป Android

หมายเหตุ: คุณจะฝึกหรือไม่ก็ได้ เปิดโอกาสให้นักเรียนได้ฝึกฝนสิ่งที่คุณได้เรียนรู้ใน Codelab นี้

สิ่งที่คุณทําได้มีดังนี้

1. เพิ่มลูกเต๋าอื่นในแอป การคลิกปุ่มกลิ้งควรทอยลูกเต๋า 2 ลูก ผลลัพธ์ควรแสดงใน TextViews ที่แตกต่างกัน 2 รายการบนหน้าจอ

ตรวจสอบงาน

แอปที่สร้างเสร็จแล้วควรจะทํางานโดยไม่มีข้อผิดพลาดและแสดงลูกเต๋า 2 ลูกในแอป