เงื่อนไขใน Kotlin - ตอนที่ 2

ใน Codelab นี้ คุณจะต้องเพิ่มรูปภาพลูกเต๋าที่มีอยู่ในแอป Android ของ Dice Roller ที่มีอยู่ ดังนั้นโปรดดําเนินการ Codelab ก่อนหน้าจนเสร็จก่อนสร้างรากฐานของแอป Dice Roller ก่อน

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

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

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

• สร้าง Codelab สําหรับสร้างลูกเต๋า Android ด้วยปุ่มเรียบร้อยแล้ว
• เขียนคําสั่งโฟลว์การควบคุมได้ (if / else, คําสั่ง when)
• อัปเดต UI ของแอปตามข้อมูลที่ผู้ใช้ป้อนได้ (แก้ไขไฟล์ MainActivity.kt)
• เพิ่ม Listener การคลิกลงใน Button.
• เพิ่มทรัพยากรรูปภาพในแอป Android ได้

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

• วิธีอัปเดต ImageView ในขณะที่แอปทํางานอยู่
• วิธีปรับแต่งลักษณะการทํางานของแอปตามเงื่อนไขต่างๆ (โดยใช้คําสั่ง when)

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

• แอปลูกเต๋า Android ที่มี Button เพื่อทอยลูกเต๋าและอัปเดตรูปภาพบนหน้าจอ

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

• คอมพิวเตอร์ที่ติดตั้ง Android Studio
• การเชื่อมต่ออินเทอร์เน็ตเพื่อดาวน์โหลดรูปภาพลูกเต๋า

ในงานนี้ คุณจะแทนที่ TextView ในเลย์เอาต์ด้วย ImageView ที่แสดงรูปภาพลูกเต๋า

เปิดแอปลูกเต๋า

1. เปิดและเรียกลูกเต๋าจากแอปสร้างลูกกลิ้งแอป Android ด้วยปุ่มใน Android Studio
   แอปควรมีลักษณะดังนี้

2. เปิด activity_main.xml (app > res >Layout > activity_main.xml)
   จะเปิดเครื่องมือแก้ไขเลย์เอาต์

ลบ TextView

1. ในเครื่องมือแก้ไขเลย์เอาต์ ให้เลือก TextView ในแผนผังคอมโพเนนต์
   

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

2. คลิกขวาแล้วเลือกลบ หรือกดแป้น Delete
3. ตอนนี้ไม่ต้องสนใจคําเตือนของButton ซึ่งคุณจะแก้ไขได้ในขั้นตอนถัดไป

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

1. ลาก ImageView จากชุดสีไปยังมุมมองการออกแบบ ซึ่งวางไว้เหนือ Button

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

3. กดตกลง มุมมองการออกแบบของแอปควรมีลักษณะดังนี้

4. ในแผนผังคอมโพเนนต์ คุณจะพบข้อผิดพลาด 2 รายการ Button ไม่ได้จํากัดในแนวตั้ง และ ImageView ไม่ได้จํากัดในแนวตั้งหรือแนวนอน

Button ไม่ได้ถูกจํากัดในแนวตั้งเนื่องจากคุณนํา TextView ด้านล่างซึ่งอยู่ในตําแหน่งเดิมออก ตอนนี้คุณต้องจัดตําแหน่ง ImageView และ Button ด้านล่าง

จัดตําแหน่งมุมมองรูปภาพและปุ่ม

คุณต้องจัด ImageView ให้อยู่กึ่งกลางในแนวตั้งของหน้าจอ ไม่ว่า Button จะอยู่ที่ใดก็ตาม

1. เพิ่มข้อจํากัดในแนวนอนให้กับ ImageView เชื่อมต่อด้านซ้ายของ ImageView กับขอบด้านซ้ายของ ConstraintLayout ระดับบนสุด
2. เชื่อมต่อด้านขวาของ ImageView กับขอบด้านขวาของผู้ปกครอง
   การดําเนินการนี้จะตั้ง ImageView ให้อยู่กึ่งกลางในแนวนอน

3. เพิ่มข้อจํากัดแนวตั้งไว้ใน ImageView โดยเชื่อมต่อด้านบนของ ImageView กับระดับบนสุด
   
4. เพิ่มข้อจํากัดแนวตั้งให้กับ Button โดยเชื่อมต่อด้านบนของ Button กับด้านล่างของ ImageView
Button จะเลื่อนขึ้นใต้ ImageView
   
5. ทีนี้เลือก ImageView อีกครั้ง แล้วเพิ่มการจํากัดแนวตั้งที่เชื่อมต่อด้านล่างของ ImageView กับระดับบนสุด
   
   จุดกึ่งกลางของ ImageView ในแนวตั้งใน ConstraintLayout

คําเตือนทั้งหมดเกี่ยวกับข้อจํากัดจะหายไปแล้ว

หลังจากนั้น มุมมองการออกแบบควรมีหน้าตาเช่นนี้ โดยมี ImageView อยู่ตรงกลางและ Button อยู่ด้านล่าง

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

ในงานนี้ คุณจะได้ดาวน์โหลดรูปภาพลูกเต๋าบางรูปและเพิ่มลงในแอป

ดาวน์โหลดรูปภาพลูกเต๋า

1. เปิด URL นี้เพื่อดาวน์โหลดไฟล์ ZIP ของลูกเต๋าลงในคอมพิวเตอร์ของคุณ รอให้การดาวน์โหลดเสร็จสมบูรณ์
2. ค้นหาไฟล์ในคอมพิวเตอร์ (มักจะอยู่ในโฟลเดอร์ดาวน์โหลด)
3. ดับเบิลคลิกที่ไฟล์ Zip เพื่อคลายการแพคข้อมูล การดําเนินการนี้จะสร้างโฟลเดอร์ DiceImages ใหม่ซึ่งมีไฟล์ภาพลูกเต๋า 6 ไฟล์ โดยแสดงลูกเต๋าตั้งแต่ 1 ถึง 6

เพิ่มรูปภาพลูกเต๋าลงในแอป

1. ใน Android Studio ให้คลิก View > Tool Windows > Resource Manager ในเมนูหรือคลิกแท็บ Resource Manager ทางด้านซ้ายของหน้าต่าง Project
2. คลิก + ใต้ผู้จัดการทรัพยากร แล้วเลือกนําเข้าภาพวาด การดําเนินการนี้จะเปิดโปรแกรมเรียกดูไฟล์

3. ค้นหาและเลือกไฟล์ภาพลูกเต๋า 6 ไฟล์ คุณสามารถเลือกไฟล์แรก จากนั้นเลือกไฟล์อื่นๆ ค้างไว้ระหว่างที่กดปุ่ม Shift
4. คลิกเปิด

5. คลิก Next จากนั้นคลิก Import เพื่อยืนยันว่าต้องการนําเข้าทรัพยากร 6 รายการต่อไปนี้

6. หากนําเข้าไฟล์สําเร็จ รูปภาพ 6 ภาพควรจะปรากฏในรายการวาดเขียนสําหรับแอป

เยี่ยมไปเลย ในงานถัดไป คุณจะใช้รูปภาพเหล่านี้ในแอปได้

สำคัญ - คุณจะอ้างอิงรูปภาพเหล่านี้ในโค้ด Kotlin ด้วยรหัสทรัพยากรได้

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

แทนที่รูปโปรไฟล์ตัวอย่าง

1. ในตัวแก้ไขดีไซน์ ให้เลือก ImageView
2. ในแอตทริบิวต์ในส่วนแอตทริบิวต์ที่ประกาศ ให้หาแอตทริบิวต์เครื่องมือ srcCompat ที่ตั้งค่าเป็นรูปโปรไฟล์

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

3. คลิกตัวอย่างเล็กๆ น้อยๆ ของรูปโปรไฟล์ การดําเนินการนี้จะเปิดกล่องโต้ตอบเพื่อเลือกทรัพยากรใหม่ที่จะใช้กับ ImageView นี้

4. เลือกภาพวาด dice_1 แล้วคลิกตกลง

โอ้โห! ImageView จะแสดงเต็มหน้าจอ

จากนั้นให้ปรับความกว้างและความสูงของ ImageView เพื่อไม่ให้ Button ซ่อน

5. หาแอตทริบิวต์ layout_width และ layout_height ในหน้าต่างแอตทริบิวต์ในส่วนวิดเจ็ตข้อจํากัด ในตอนนี้ตั้งค่าเป็น wrap_content ซึ่งหมายความว่า ImageView จะมีความสูงและกว้างเท่ากับเนื้อหา (รูปภาพต้นทาง) ภายในเนื้อหา
6. แต่ให้กําหนดความกว้างคงที่ 160dp และความสูงคงที่ 200dp ใน ImageView แทน กด Enter
   
   ตอนนี้ ImageView มีขนาดเล็กกว่ามาก
   

คุณอาจพบว่า Button อยู่ใกล้กับรูปภาพมากเกินไป

7. เพิ่มระยะขอบบนให้กับปุ่มของ 16 dp โดยตั้งค่าในวิดเจ็ตข้อจํากัด
   

เมื่อมุมมองการออกแบบอัปเดตแล้ว แอปก็จะดูดีขึ้นมาก

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

เปลี่ยนรูปภาพลูกเต๋าเมื่อคลิกปุ่ม

เลย์เอาต์ได้รับการแก้ไขแล้ว แต่คุณต้องอัปเดตชั้นเรียน MainActivity เพื่อใช้รูปภาพลูกเต๋า

มีข้อผิดพลาดในไฟล์ในไฟล์ MainActivity.kt ในขณะนี้ หากคุณพยายามเรียกใช้แอป คุณจะเห็นข้อผิดพลาดบิลด์นี้

เนื่องจากโค้ดของคุณยังคงอ้างอิง TextView ที่คุณลบจากเลย์เอาต์ไป

1. เปิด MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)

รหัสดังกล่าวอ้างถึง R.id.textView แต่ Android Studio ไม่รู้จัก

2. ภายในเมธอด rollDice() ให้เลือกโค้ดที่อ้างถึง TextView และลบออก

// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()

3. ยังอยู่ใน rollRice() ให้สร้างตัวแปรใหม่ชื่อ diceImage ประเภท ImageView ตั้งค่าเป็น ImageView จากเลย์เอาต์ ใช้เมธอด findViewById() และส่งรหัสทรัพยากรสําหรับ ImageView, R.id.imageView เป็นอาร์กิวเมนต์อินพุต

val diceImage: ImageView = findViewById(R.id.imageView)

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

เมื่ออ้างถึงรหัสทรัพยากรนี้ในโค้ด Kotlin ให้ตรวจสอบว่าพิมพ์รหัสเดียวกันทุกประการ (ตัวพิมพ์เล็ก i,ตัวพิมพ์ใหญ่ V, ไม่เว้นวรรค) มิฉะนั้น Android Studio จะแสดงข้อผิดพลาด

4. เพิ่มบรรทัดของโค้ดนี้เพื่อทดสอบว่าคุณสามารถอัปเดต ImageView ได้อย่างถูกต้องเมื่อคลิกปุ่ม ทอยลูกเต๋าอาจไม่ได้เป็น "2&quot เสมอไป แต่เพียงใช้รูปภาพ dice_2 เพื่อวัตถุประสงค์ในการทดสอบเท่านั้น

diceImage.setImageResource(R.drawable.dice_2)

โค้ดนี้จะเรียกใช้เมธอด setImageResource() ใน ImageView ซึ่งจะส่งรหัสทรัพยากรสําหรับรูปภาพ dice_2 การดําเนินการนี้จะอัปเดต ImageView บนหน้าจอเพื่อแสดงรูปภาพ dice_2

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

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. เรียกใช้แอปเพื่อตรวจสอบว่าแอปทํางานโดยไม่มีข้อผิดพลาด

แอปควรเริ่มต้นด้วยหน้าจอว่าง ยกเว้นปุ่มม้วน

เมื่อแตะปุ่ม ภาพลูกเต๋าที่แสดงค่า 2 จะปรากฏขึ้น ได้ !!

คุณเปลี่ยนรูปภาพได้โดยใช้ปุ่มแตะปุ่ม ใกล้แล้ว!

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

ก่อนเริ่มพิมพ์โค้ด ให้ลองคิดเกี่ยวกับวิธีการทํางานของแอปโดยการเขียน pseudocode เพื่ออธิบายสิ่งที่เกิดขึ้น เช่น

หากผู้ใช้หมุน 1 ให้แสดงรูปภาพ dice_1

หากผู้ใช้หมุน 2 ให้แสดงรูปภาพ dice_2

ฯลฯ...

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

รหัสเทียมข้างต้นสามารถเขียนด้วยคําสั่ง if / else ใน Kotlin โดยอิงตามค่าของลูกเต๋า

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

แต่การเขียน if / else สําหรับแต่ละกรณีซ้ําๆ จะเกิดขึ้นซ้ําๆ ตรรกะเดียวกันนี้จะแสดงได้ง่ายขึ้นด้วยคําสั่ง when กระชับยิ่งขึ้น (โค้ดน้อยลง) โปรดใช้วิธีการนี้ในแอป

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

อัปเดตเมธอด RollDice()

1. ในเมธอด rollDice() โปรดลบบรรทัดโค้ดที่ตั้งค่ารหัสทรัพยากรรูปภาพเป็น dice_2 รูปภาพทุกครั้ง

diceImage.setImageResource(R.drawable.dice_2)

2. แทนที่ด้วยข้อความ when ที่อัปเดต ImageView ตามค่า diceRoll

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

เมธอด rollDice() ควรมีลักษณะดังนี้เมื่อคุณเสร็จสิ้นการเปลี่ยนแปลง

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. เรียกใช้แอป การคลิกปุ่มก่อนหน้าจะเปลี่ยนรูปภาพลูกเต๋าเป็นค่าอื่นๆ นอกเหนือจาก 2 ใช้ได้ผล!

เพิ่มประสิทธิภาพโค้ด

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

คุณอาจสังเกตเห็นว่าการเรียก diceImage.setImageResource() ปรากฏขึ้น 6 ครั้งในใบแจ้งยอดของคุณ

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

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

1. แทนที่โค้ดข้างต้นด้วยโค้ดต่อไปนี้

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

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

2. โปรดสังเกตว่าตอนนี้ when จะขีดเส้นใต้สีแดง หากวางเคอร์เซอร์เหนือตัวชี้ดังกล่าว คุณจะเห็นข้อความแสดงข้อผิดพลาดดังนี้ 'เมื่อไหร่' นิพจน์ต้องเป็นโมฆะ ให้เพิ่มข้อมูลที่จําเป็น 'else' สาขา

ข้อผิดพลาดเกิดขึ้นเพราะค่าของนิพจน์ when ที่กําหนดให้กับ drawableResource ดังนั้น when จึงต้องกรอกข้อมูลให้ละเอียดทั้งหมด และต้องจัดการทุกกรณีที่เป็นไปได้เพื่อให้ส่งคืนค่าทุกครั้ง แม้ว่าคุณจะเปลี่ยนไปใช้ลูกเต๋าแบบ 12 ด้านก็ตาม Android Studio ขอแนะนําให้เพิ่มสาขา else คุณแก้ไขปัญหานี้ได้โดยเปลี่ยนเคสสําหรับ 6 เป็น else กรณีสําหรับ 1 จนถึง 5 เหมือนกัน แต่กรณีอื่นๆ ทั้งหมดรวมถึง 6 ได้รับการจัดการโดย else

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

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

ตั้งค่าคําอธิบายเนื้อหาที่เหมาะสมใน ImageView

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

diceImage.contentDescription = diceRoll.toString()

โปรแกรมอ่านหน้าจอจะอ่านออกเสียงคําอธิบายเนื้อหานี้ ดังนั้นหากลูกเต๋าเป็นแบบ "6" รูปภาพแสดงบนหน้าจอ คําอธิบายเนื้อหาจะอ่านออกเสียงเป็น "6"

สร้างประสบการณ์การเปิดตัวที่มีประโยชน์มากขึ้น

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

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

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

   // Do a dice roll when the app starts
   rollDice()
}

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

เพิ่มความคิดเห็นลงในโค้ดเพื่ออธิบายสิ่งที่เกิดขึ้นในโค้ดที่คุณเขียน

หลังจากทําการเปลี่ยนแปลงเหล่านี้ทั้งหมดแล้ว ลักษณะของ rollDice() จะมีลักษณะดังนี้

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       1 -> R.drawable.dice_1
       2 -> R.drawable.dice_2
       3 -> R.drawable.dice_3
       4 -> R.drawable.dice_4
       5 -> R.drawable.dice_5
       else -> R.drawable.dice_6
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

สําหรับไฟล์ MainActivity.kt แบบเต็ม ให้ดูโค้ดโซลูชันใน GitHub ที่ลิงก์ไว้ด้านล่าง

ทําแอปลูกเต๋าเสร็จแล้ว ตอนนี้คุณสามารถนําแอปนี้ไปใช้ในคืนถัดไปของเกมกับเพื่อนๆ ได้แล้ว

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

URL ของโซลูชัน: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-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. คลิกปุ่มเรียกใช้ เพื่อสร้างและเรียกใช้โค้ด

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

• ใช้ setImageResource() เพื่อเปลี่ยนรูปภาพที่แสดงบน ImageView
• ใช้คําสั่งโฟลว์การควบคุม เช่น นิพจน์ if / else หรือนิพจน์ when เพื่อจัดการกรณีต่างๆ ในแอปของคุณ เช่น การแสดงรูปภาพที่ต่างกันภายใต้สถานการณ์ต่างๆ

• if นิพจน์ใน Kotlin
• when นิพจน์ใน Kotlin
• ImageView.setImageResource()
• การช่วยเหลือพิเศษ

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

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

1. เพิ่มลูกเต๋าอีกแอปหนึ่งเพื่อให้ปุ่มม้วน 1 ลูก ให้ลูกเต๋า 2 ลูก ต้องมี ImageViews กี่ภาพในเลย์เอาต์ การดําเนินการนี้จะส่งผลกระทบต่อโค้ด MainActivity.kt อย่างไร

ตรวจสอบงาน

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