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

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

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

ข้อกำหนดเบื้องต้น

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

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

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

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

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

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

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

แอปจะมีลักษณะดังนี้เมื่อคุณทำ Codelab นี้เสร็จแล้ว

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

1. หากเปิดโปรเจ็กต์ที่มีอยู่แล้วใน Android Studio ให้ไปที่ไฟล์ > ใหม่ > โปรเจ็กต์ใหม่... เพื่อเปิดหน้าจอสร้างโปรเจ็กต์ใหม่
2. ในสร้างโปรเจ็กต์ใหม่ ให้สร้างโปรเจ็กต์ Kotlin ใหม่โดยใช้เทมเพลตกิจกรรมเปล่า
3. ตั้งชื่อแอปว่า "Dice Roller" โดยมีระดับ API ขั้นต่ำเป็น 19 (KitKat)

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

4. เรียกใช้แอปใหม่ ซึ่งควรมีลักษณะดังนี้
   

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

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

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

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

เมื่อมี Views ภายใน ViewGroup ระบบจะถือว่า Views เป็นบุตรหลานของผู้ปกครองViewGroup ในกรณีของแอปของคุณ TextView และ Button จะถือเป็นบุตรหลานของ ConstraintLayout ซึ่งเป็นผู้ปกครอง

ดำเนินการเพิ่ม Button เป็นบุตรหลานของ ConstraintLayout ที่มีอยู่แล้วในแอป

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

เพิ่มปุ่มไปยังเลย์เอาต์

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

วางปุ่ม

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

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

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

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

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

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

แทนที่จะให้ป้ายกำกับ Button แสดง "ปุ่ม" ให้เปลี่ยนเป็นข้อความที่ระบุว่าปุ่มจะทำอะไร เช่น "ม้วน"

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

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

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

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

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

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

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

ในมุมมองออกแบบ Button ควรยังคงแสดงข้อความม้วน

จัดรูปแบบ TextView

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

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

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

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

.

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

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

7. ดูแอปของคุณในตัวอย่าง "1" จะแสดงขึ้น

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

เยี่ยม คุณทำการเปลี่ยนแปลงเลย์เอาต์เสร็จแล้ว

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

หากต้องการทำการเปลี่ยนแปลงนี้ คุณต้องเข้าใจโครงสร้างของแอป Android เพิ่มเติมเล็กน้อย

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

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

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

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

ตัวอย่างเช่น ในแอปแกลเลอรีรูปภาพ คุณอาจมี Activity สำหรับแสดงตารางกริดของรูปภาพ Activity ที่ 2 สำหรับดูรูปภาพแต่ละรูป และ 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 ทำงานแตกต่างกัน ระบบ Android จะเรียกใช้เมธอด onCreate() ของ MainActivity แทนการเรียกใช้ฟังก์ชัน main() เมื่อมีการเปิดแอปเป็นครั้งแรก
   
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 ให้เปิดการตั้งค่าโดยไปที่ไฟล์ > การตั้งค่าอื่นๆ > ค่ากำหนดสำหรับโปรเจ็กต์ใหม่
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 เครื่องมือตรวจหาการคลิกคือโค้ดบางส่วนที่ใช้กำหนดสิ่งที่ต้องทำเมื่อมีการแตะหรือคลิก คุณสามารถคิดว่าโค้ดนี้เป็นโค้ดที่ "รอ" ให้ผู้ใช้คลิก ในกรณีนี้คือคลิกที่ Button

3. ใช้ออบเจ็กต์ rollButton และตั้งค่าเครื่องมือฟังการคลิกในออบเจ็กต์โดยเรียกใช้เมธอด 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 บรรทัดในเครื่องมือฟังการคลิกเป็นบรรทัดเดียวโดยไม่ต้องใช้ตัวแปรได้ นี่เป็นรูปแบบทั่วไปที่คุณอาจเห็นในโค้ดอื่นๆ

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

6. เรียกใช้แอป แล้วคลิกปุ่ม Roll ข้อความป๊อปอัปควรปรากฏที่ด้านล่างของหน้าจอและหายไปหลังจากผ่านไปครู่หนึ่ง

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

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

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

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"

ซึ่งคล้ายกับสิ่งที่คุณทำโดยการตั้งค่าข้อความในแอตทริบิวต์ แต่ตอนนี้อยู่ในโค้ดแล้ว ดังนั้นข้อความจึงต้องอยู่ภายในเครื่องหมายคำพูดคู่ การตั้งค่านี้อย่างชัดเจนหมายความว่าในตอนนี้ 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คลาสจากโค้ดแล็บก่อนหน้ามาใช้ซ้ำได้ ซึ่งจะจัดการตรรกะสำหรับการทอยลูกเต๋า

เพิ่มคลาส Dice

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

class Dice(val numSides: Int) {

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

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

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

4. ดำเนินการแก้ไขตามที่ Android Studio แนะนำโดยคลิกทำให้ "numSides" เป็น "ส่วนตัว"

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

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

1. แทนที่โค้ดในเครื่องมือฟังการคลิกที่ตั้งค่าข้อความเป็น "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")
}

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

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

1. ลบการโทร TODO() ใน rollDice()
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 จึงมีคู่มือรูปแบบการเขียนโค้ด Android ซึ่งเป็นแนวทางปฏิบัติแนะนำในการตั้งชื่อ การจัดรูปแบบ และอื่นๆ ที่ควรปฏิบัติตาม ปฏิบัติตามหลักเกณฑ์เหล่านี้เมื่อเขียนโค้ด Android: คู่มือแนะนำเกี่ยวกับ Kotlin สำหรับนักพัฒนาซอฟต์แวร์ Android

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

ล้างโค้ด

ย่อโค้ด

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

rollButton.setOnClickListener {
    rollDice()
}

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

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

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

ทำดังนี้

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

ตรวจสอบงานของคุณ

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