หลักพื้นฐานของ Android Kotlin 01.2: โครงสร้างพื้นฐานของแอป

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

บทนำ

จนถึงตอนนี้ คุณได้ตั้งค่าทุกอย่างแล้ว และ Android Studio ได้สร้างโค้ดจำนวนมากให้คุณ ก่อนที่จะแก้ไขโค้ดทั้งหมด คุณควรรู้ว่าคุณเพิ่งสร้างอะไรไปและวิธีไปยังไฟล์ต้นฉบับของแอป Android

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

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

  • วิธีติดตั้งและเปิด Android Studio
  • วิธีสร้างโปรเจ็กต์แอปใหม่
  • วิธีเรียกใช้แอปในโปรแกรมจำลองหรืออุปกรณ์จริง

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

  • วิธีแก้ไขไฟล์เลย์เอาต์ของแอป
  • วิธีสร้างแอปที่มีลักษณะการทำงานแบบอินเทอร์แอกทีฟ
  • คำศัพท์ใหม่ๆ มากมาย ดูคำอธิบายที่เข้าใจง่ายเกี่ยวกับคำศัพท์และแนวคิดต่างๆ ได้ในอภิธานศัพท์คำศัพท์

สิ่งที่คุณต้องทำ

  • สำรวจMainActivityไฟล์ Kotlin และไฟล์เลย์เอาต์ของกิจกรรม
  • แก้ไขเลย์เอาต์ของกิจกรรมใน XML
  • เพิ่มองค์ประกอบ Button ลงในเลย์เอาต์ของกิจกรรม
  • แยกสตริงที่ฮาร์ดโค้ดลงในไฟล์ทรัพยากรสตริง
  • ใช้เมธอดตัวแฮนเดิลการคลิกเพื่อแสดงข้อความบนหน้าจอเมื่อผู้ใช้แตะ Button

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

ใน Codelab ที่แล้ว คุณได้เรียนรู้เกี่ยวกับส่วนหลักๆ ของโปรเจ็กต์แอป ซึ่งรวมถึงไดเรกทอรี java และ res ในงานนี้ คุณจะมุ่งเน้นไปที่ไฟล์ 2 ไฟล์ที่สำคัญที่สุดซึ่งประกอบกันเป็นแอป ได้แก่ MainActivityไฟล์ Kotlin และactivity_main.xmlไฟล์เลย์เอาต์

ขั้นตอนที่ 1: ตรวจสอบ MainActivity

MainActivity เป็นตัวอย่างของ Activity Activity เป็นคลาสหลักของ Android ที่วาดอินเทอร์เฟซผู้ใช้ (UI) ของแอป Android และรับเหตุการณ์อินพุต เมื่อแอปเปิดตัว แอปจะเปิดกิจกรรมที่ระบุไว้ในไฟล์ AndroidManifest.xml

ภาษาโปรแกรมหลายภาษาจะกำหนดเมธอดหลักที่เริ่มต้นโปรแกรม แอป Android ไม่มีเมธอดหลัก แต่ไฟล์ AndroidManifest.xml จะระบุว่าควรเปิดใช้ MainActivity เมื่อผู้ใช้แตะไอคอน Launcher ของแอป หากต้องการเปิดใช้กิจกรรม ระบบปฏิบัติการ Android จะใช้ข้อมูลในไฟล์ Manifest เพื่อตั้งค่าสภาพแวดล้อมสำหรับแอปและสร้าง MainActivity จากนั้น MainActivity จะทำการตั้งค่าบางอย่างตามลำดับ

แต่ละกิจกรรมจะมีไฟล์เลย์เอาต์ที่เชื่อมโยง กิจกรรมและเลย์เอาต์เชื่อมต่อกันด้วยกระบวนการที่เรียกว่าการขยายเลย์เอาต์ เมื่อกิจกรรมเริ่มต้น ระบบจะเปลี่ยนมุมมองที่กำหนดไว้ในไฟล์เลย์เอาต์ XML เป็นออบเจ็กต์มุมมอง Kotlin ในหน่วยความจำ (หรือที่เรียกว่า "ขยาย") เมื่อเกิดเหตุการณ์นี้ขึ้น กิจกรรมจะวาดออบเจ็กต์เหล่านี้ลงบนหน้าจอและแก้ไขออบเจ็กต์แบบไดนามิกได้ด้วย

  1. ใน Android Studio ให้เลือก File > New > New Project เพื่อสร้างโปรเจ็กต์ใหม่ ใช้กิจกรรมว่างเปล่า แล้วคลิกถัดไป
  2. ตั้งชื่อโปรเจ็กต์ว่า DiceRoller และตรวจสอบค่าอื่นๆ ทั้งหมดสำหรับชื่อโปรเจ็กต์และตำแหน่งโปรเจ็กต์ ตรวจสอบว่าได้เลือก "ใช้ Artifact ของ AndroidX" แล้ว คลิกเสร็จสิ้น


  3. ในแผงโปรเจ็กต์ > Android ให้ขยาย java > com.example.android.diceroller ดับเบิลคลิก MainActivity ตัวแก้ไขโค้ดจะแสดงโค้ดใน MainActivity


  4. ด้านล่างชื่อแพ็กเกจและคำสั่งนำเข้าคือการประกาศคลาสสำหรับ MainActivity MainActivity ชั้นเรียนขยายเวลา AppCompatActivity 
class MainActivity : AppCompatActivity() { ...
  1. สังเกตonCreate() วิธี กิจกรรมไม่ได้ใช้ตัวสร้างเพื่อเริ่มต้นออบเจ็กต์ แต่จะมีการเรียกใช้ชุดเมธอดที่กำหนดไว้ล่วงหน้า (เรียกว่า "เมธอดวงจรของกิจกรรม") เป็นส่วนหนึ่งของการตั้งค่ากิจกรรมแทน หนึ่งในเมธอดวงจรนั้นคือ onCreate() ซึ่งคุณจะลบล้างในแอปของคุณเองเสมอ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับเมธอดวงจรได้ใน Codelab ในภายหลัง

    ใน onCreate() คุณจะระบุเลย์เอาต์ที่เชื่อมโยงกับกิจกรรมและขยายเลย์เอาต์ setContentView() วิธีนี้จะทำทั้ง 2 อย่าง
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

เมธอด setContentView() อ้างอิงเลย์เอาต์โดยใช้ R.layout.activity_main ซึ่งเป็นการอ้างอิงจำนวนเต็ม ระบบจะสร้างคลาส R เมื่อคุณสร้างแอป คลาส R จะมีชิ้นงานทั้งหมดของแอป รวมถึงเนื้อหาของไดเรกทอรี res

ในกรณีนี้ R.layout.activity_main หมายถึงคลาส R ที่สร้างขึ้น โฟลเดอร์ layout และไฟล์เลย์เอาต์ activity_main.xml (แหล่งข้อมูลไม่รวมนามสกุลไฟล์) คุณจะอ้างอิงทรัพยากรของแอปหลายรายการ (รวมถึงรูปภาพ สตริง และองค์ประกอบภายในไฟล์เลย์เอาต์) โดยใช้การอ้างอิงที่คล้ายกันในคลาส R

ขั้นตอนที่ 2: ตรวจสอบและสำรวจไฟล์เลย์เอาต์ของแอป

กิจกรรมทั้งหมดในแอปจะมีไฟล์เลย์เอาต์ที่เกี่ยวข้องในไดเรกทอรี res/layout ของแอป ไฟล์เลย์เอาต์คือไฟล์ XML ที่แสดงลักษณะที่แท้จริงของกิจกรรม ไฟล์เลย์เอาต์จะทำเช่นนี้โดยการกำหนดมุมมองและกำหนดตำแหน่งที่มุมมองจะปรากฏบนหน้าจอ

View คือสิ่งต่างๆ เช่น ข้อความ รูปภาพ และปุ่มที่ขยายคลาส View ยอดดูมีหลายประเภท เช่น TextView, Button, ImageView และ CheckBox

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

  1. ในแผงโปรเจ็กต์ > Android ให้ขยาย res > layout แล้วดับเบิลคลิก activity_main.xml เครื่องมือแก้ไขการออกแบบเลย์เอาต์จะเปิดขึ้น Android Studio มีเครื่องมือแก้ไขนี้ ซึ่งช่วยให้คุณสร้างเลย์เอาต์ของแอปในรูปแบบภาพและแสดงตัวอย่างการออกแบบเลย์เอาต์ได้ คุณจะได้ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไขการออกแบบใน Codelab ในภายหลัง
  2. หากต้องการดูไฟล์เลย์เอาต์เป็น XML ให้คลิกแท็บข้อความที่ด้านล่างของหน้าต่าง


  3. ลบโค้ด XML ที่มีอยู่ทั้งหมดในเครื่องมือแก้ไขเลย์เอาต์ เลย์เอาต์เริ่มต้นที่คุณได้รับเมื่อสร้างโปรเจ็กต์ใหม่เป็นจุดเริ่มต้นที่ดีหากคุณกำลังทำงานกับเครื่องมือแก้ไขการออกแบบของ Android Studio ในบทเรียนนี้ คุณจะได้ทำงานกับ XML พื้นฐานเพื่อสร้างเลย์เอาต์ใหม่ตั้งแต่ต้น
  4. คัดลอกและวางโค้ดนี้ลงในเลย์เอาต์ 
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

ตอนนี้ให้ตรวจสอบโค้ด

  1. องค์ประกอบระดับบนสุดหรือรูทของเลย์เอาต์คือองค์ประกอบ <LinearLayout> มุมมอง LinearLayout คือ ViewGroup กลุ่มมุมมองคือคอนเทนเนอร์ที่เก็บมุมมองอื่นๆ และช่วยระบุตำแหน่งของมุมมองบนหน้าจอ

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

    รูทเริ่มต้นที่คุณได้รับสำหรับโปรเจ็กต์ Android ใหม่คือ ConstraintLayout ซึ่งทำงานร่วมกับตัวแก้ไขดีไซน์ได้ดี สำหรับแอปนี้ คุณใช้LinearLayoutกลุ่มมุมมองซึ่งง่ายกว่า ConstraintLayout คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับกลุ่มมุมมองและ ConstraintLayout ในบทเรียนถัดไป
  2. ภายในแท็ก LinearLayout ให้สังเกตแอตทริบิวต์ android:layout_width ความกว้างของ LinearLayout นี้ตั้งค่าเป็น match parent ซึ่งทำให้มีความกว้างเท่ากับองค์ประกอบหลัก เนื่องจากนี่คือมุมมองราก เลย์เอาต์จึงขยายจนเต็มความกว้างของหน้าจอ
  3. สังเกตแอตทริบิวต์ android:layout_height ซึ่งตั้งค่าเป็น wrap_content แอตทริบิวต์นี้จะทำให้ความสูงของ LinearLayout ตรงกับความสูงรวมของมุมมองทั้งหมดที่มี ซึ่งในตอนนี้มีเพียง TextView
  4. ตรวจสอบองค์ประกอบ <TextView> TextView ซึ่งแสดงข้อความนี้เป็นองค์ประกอบภาพเพียงอย่างเดียวในแอป DiceRoller แอตทริบิวต์ android:text จะเก็บสตริงจริงที่จะแสดง ในกรณีนี้คือสตริง "Hello World!"
  5. โปรดสังเกตแอตทริบิวต์ android:layout_width และ android:layout_height ในองค์ประกอบ <TextView> ซึ่งทั้ง 2 แอตทริบิวต์ตั้งค่าเป็น wrap_content เนื้อหาของมุมมองข้อความคือตัวข้อความเอง ดังนั้นมุมมองจึงใช้พื้นที่เฉพาะที่จำเป็นสำหรับข้อความเท่านั้น

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

ขั้นตอนที่ 1: เพิ่มปุ่มลงในเลย์เอาต์

  1. เพิ่มองค์ประกอบ Button ลงในเลย์เอาต์ใต้มุมมองข้อความโดยป้อน <Button แล้วกด Return บล็อก Button จะปรากฏขึ้นโดยลงท้ายด้วย /> และมีแอตทริบิวต์ layout_width และ layout_height 
<Button
   android:layout_width=""
   android:layout_height="" />
  1. ตั้งค่าทั้งแอตทริบิวต์ layout_width และ layout_height เป็น "wrap_content" ค่าเหล่านี้จะทำให้ปุ่มมีความกว้างและความสูงเท่ากับป้ายกำกับข้อความที่ปุ่มนั้นมี
  2. เพิ่มแอตทริบิวต์ android:text ลงในปุ่ม แล้วกำหนดค่าเป็น "Roll" ตอนนี้องค์ประกอบปุ่มจะมีลักษณะดังนี้ 
<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />


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

ขั้นตอนที่ 2: แยกทรัพยากรสตริง

แนวทางปฏิบัติแนะนำคือการใส่สตริงทั้งหมดของแอปไว้ในไฟล์แยกต่างหาก แทนที่จะเขียนสตริงแบบฮาร์ดโค้ดในไฟล์เลย์เอาต์หรือโค้ด ไฟล์นี้ชื่อ strings.xml และอยู่ในทรัพยากรของแอปในไดเรกทอรี res/values/

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

Android Studio จะช่วยให้คุณไม่ลืมใส่สตริงลงในไฟล์ทรัพยากรด้วยคำแนะนำและคำเตือน

  1. คลิกสตริง "Roll" 1 ครั้งในแอตทริบิวต์ android:text ของแท็ก <Button>
  2. กด Alt+Enter (Option+Enter ใน macOS) แล้วเลือกแยกทรัพยากรสตริงจากเมนูป๊อปอัป
  3. ป้อน roll_label สำหรับชื่อทรัพยากร
  4. คลิกตกลง ระบบจะสร้างทรัพยากรสตริงในไฟล์ res/values/string.xml และแทนที่สตริงในองค์ประกอบปุ่มด้วยการอ้างอิงถึงทรัพยากรนั้น
    android:text="@string/roll_label"
  5. ในแผงโปรเจ็กต์ > Android ให้ขยาย res > values แล้วดับเบิลคลิก strings.xml เพื่อดูทรัพยากรสตริงในไฟล์ strings.xml
<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

ขั้นตอนที่ 3: จัดรูปแบบและวางตำแหน่งมุมมอง

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

  1. คลิกแท็บออกแบบเพื่อดูตัวอย่างเลย์เอาต์ ตอนนี้มุมมองทั้ง 2 จะอยู่ติดกันและเลื่อนขึ้นไปที่ด้านบนของหน้าจอ


  2. คลิกแท็บข้อความเพื่อกลับไปที่เครื่องมือแก้ไข XML เพิ่มแอตทริบิวต์ android:orientation ลงในแท็ก LinearLayout และกำหนดค่าเป็น "vertical" ตอนนี้องค์ประกอบ <LinearLayout> ควรมีลักษณะดังนี้
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

LinearLayout view group จะจัดวางมุมมองที่ประกอบด้วยมุมมองหนึ่งต่อจากอีกมุมมองหนึ่งในบรรทัด ไม่ว่าจะเป็นแนวนอนในแถวเดียวหรือแนวตั้งในกอง ค่าเริ่มต้นคือแนวนอน เนื่องจากคุณต้องการให้ TextView ซ้อนอยู่เหนือ Button คุณจึงตั้งค่าการวางแนวเป็นแนวตั้ง ตอนนี้การออกแบบมีลักษณะดังนี้ โดยมีปุ่มอยู่ใต้ข้อความ

  1. เพิ่มแอตทริบิวต์ android:layout_gravity ลงในทั้ง TextView และ Button แล้วกำหนดค่าเป็น "center_horizontal" ซึ่งจะจัดแนวทั้ง 2 มุมมองตามกึ่งกลางของแกนแนวนอน ตอนนี้องค์ประกอบ TextView และ Button ควรมีลักษณะดังนี้
<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />
  1. เพิ่มแอตทริบิวต์ android:layout_gravity ลงในเลย์เอาต์เชิงเส้น และกำหนดค่าเป็น "center_vertical" ตอนนี้องค์ประกอบ LinearLayout ควรมีลักษณะดังนี้
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">
  1. หากต้องการเพิ่มขนาดข้อความในมุมมองข้อความ ให้เพิ่มแอตทริบิวต์ android:textSize ลงในองค์ประกอบ <TextView> โดยมีค่าเป็น "30sp" ตัวย่อ sp ย่อมาจากพิกเซลที่รองรับการปรับขนาด ซึ่งเป็นหน่วยวัดสำหรับกำหนดขนาดข้อความโดยไม่ขึ้นอยู่กับคุณภาพการแสดงผลของอุปกรณ์ ตอนนี้องค์ประกอบ TextView ควรมีลักษณะดังนี้
<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />
  1. คอมไพล์และเรียกใช้แอป


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

ขั้นตอนที่ 4: รับการอ้างอิงถึงปุ่มในโค้ด

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

  • กำหนดรหัสให้กับ Button ในไฟล์ XML
  • ใช้เมธอด findViewById() ในโค้ดเพื่อรับการอ้างอิงไปยัง View ที่มีรหัสเฉพาะ

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

  1. เปิดactivity_main.xmlไฟล์เลย์เอาต์ หากยังไม่ได้เปิด แล้วคลิกแท็บข้อความ
  2. เพิ่มแอตทริบิวต์ android:id ลงในปุ่ม แล้วตั้งชื่อ (ในกรณีนี้คือ "@+id/roll_button") ตอนนี้องค์ประกอบ <Button> จะมีลักษณะดังนี้
<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

เมื่อสร้างรหัสสำหรับมุมมองในไฟล์เลย์เอาต์ XML แล้ว Android Studio จะสร้างค่าคงที่จำนวนเต็มที่มีชื่อของรหัสนั้นในคลาส R ที่สร้างขึ้น ดังนั้น หากคุณตั้งชื่อมุมมองเป็น roll_button Android Studio จะสร้างค่าคงที่จำนวนเต็มชื่อ roll_button ในคลาส R คำนำหน้า "@+id" สำหรับชื่อรหัสจะบอกคอมไพเลอร์ให้เพิ่มค่าคงที่รหัสนั้นลงในคลาส R รหัสมุมมองทั้งหมดในไฟล์ XML ต้องมีคำนำหน้านี้

  1. เปิดMainActivityไฟล์ Kotlin ใน onCreate() หลังจาก setContentView() ให้เพิ่มบรรทัดต่อไปนี้ 
val rollButton: Button = findViewById(R.id.roll_button)

ใช้วิธี findViewById() เพื่อรับการอ้างอิง View สำหรับมุมมองที่คุณกำหนดไว้ในคลาส XML ในกรณีนี้ คุณจะได้รับButtonการอ้างอิงจากคลาส R และรหัส roll_button จากนั้นกำหนดการอ้างอิงนั้นให้กับตัวแปร rollButton

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


  2. กด Alt+Enter (Option+Enter ใน Mac) เพื่อยอมรับชื่อคลาสที่มีคุณสมบัติครบถ้วน

ขั้นตอนที่ 5: เพิ่มตัวแฮนเดิลการคลิกเพื่อแสดงข้อความป๊อปอัป

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

  • เมธอดที่ดำเนินการบางอย่าง
  • setOnClickHandler() วิธีการที่เชื่อมต่อ Button กับเมธอดตัวแฮนเดิล

ในงานนี้ คุณจะได้สร้างเมธอดตัวแฮนเดิลการคลิกเพื่อแสดง Toast (ข้อความโทสต์คือข้อความที่ปรากฏขึ้นบนหน้าจอเป็นระยะเวลาสั้นๆ) คุณเชื่อมต่อเมธอดตัวแฮนเดิลการคลิกกับ Button

  1. ในMainActivityคลาสหลัง onCreate() ให้สร้างฟังก์ชันส่วนตัวชื่อ rollDice() 
private fun rollDice() {
  
}
  1. เพิ่มบรรทัดนี้ลงในเมธอด rollDice() เพื่อแสดง Toast เมื่อมีการเรียกใช้ rollDice()
Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

หากต้องการสร้างข้อความป๊อปอัป ให้เรียกใช้เมธอด Toast.makeText() วิธีนี้ต้องใช้ 3 สิ่งต่อไปนี้

  • ออบเจ็กต์ Context ออบเจ็กต์ Context ช่วยให้คุณสื่อสารและรับข้อมูลเกี่ยวกับสถานะปัจจุบันของระบบปฏิบัติการ Android ได้ คุณต้องมี Context ที่นี่เพื่อให้ออบเจ็กต์ Toast บอกให้ระบบปฏิบัติการแสดงข้อความแจ้งได้ เนื่องจาก AppCompatActivity เป็นคลาสย่อยของ Context คุณจึงใช้คีย์เวิร์ด this สำหรับบริบทได้
  • ข้อความที่จะแสดงที่นี่ "button clicked"
  • ระยะเวลาที่จะแสดงข้อความ show() method ที่ส่วนท้ายจะแสดงข้อความป๊อปอัป
  1. ใน onCreate() หลังจากเรียกใช้ findViewById() ให้เพิ่มบรรทัดนี้เพื่อกำหนด rollDice() เป็นตัวแฮนเดิลการคลิกให้กับออบเจ็กต์ rollButton 
rollButton.setOnClickListener { rollDice() }

ตอนนี้คำจำกัดความแบบเต็มของคลาส MainActivity จะมีลักษณะดังนี้ 

class MainActivity : AppCompatActivity() {

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

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

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}
  1. คอมไพล์และเรียกใช้แอป ทุกครั้งที่คุณแตะปุ่ม ข้อความป๊อปอัปควรปรากฏขึ้น

ในงานนี้ คุณจะแก้ไขrollDice()เมธอดเพื่อเปลี่ยนข้อความในTextView สำหรับขั้นตอนแรก ให้เปลี่ยนข้อความจาก "Hello World!" เป็นสตริง "Dice Rolled!" สำหรับขั้นตอนที่ 2 ให้แสดงตัวเลขสุ่มระหว่าง 1 ถึง 6

ขั้นตอนที่ 1: แสดงสตริง

  1. เปิด activity_main.xml แล้วเพิ่มบัตรประจำตัวลงใน TextView 
android:id="@+id/result_text"
  1. เปิด MainActivity ในrollDice() ให้แสดงความคิดเห็นในบรรทัดเพื่อแสดง Toast
  2. ใช้เมธอด findViewById() เพื่อรับการอ้างอิงถึง TextView ตามรหัส กําหนดการอ้างอิงให้กับตัวแปร resultText 
val resultText: TextView = findViewById(R.id.result_text)
  1. กำหนดสตริงใหม่ให้กับพร็อพเพอร์ตี้ resultText.text เพื่อเปลี่ยนข้อความที่แสดง คุณสามารถเพิกเฉยต่อคำแนะนำในการแยกสตริงนั้นลงในทรัพยากรได้ เนื่องจากสตริงนี้เป็นสตริงชั่วคราว
resultText.text = "Dice Rolled!"
  1. คอมไพล์และเรียกใช้แอป โปรดทราบว่าการแตะปุ่มกลิ้งจะอัปเดต TextView

ขั้นตอนที่ 2: แสดงหมายเลขสุ่ม

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

  1. ที่ด้านบนของเมธอด rollDice() ให้ใช้เมธอด Random.nextInt() เพื่อรับตัวเลขสุ่มระหว่าง 1 ถึง 6 
val randomInt = Random().nextInt(6) + 1
  1. ตั้งค่าพร็อพเพอร์ตี้ text เป็นค่าของจำนวนเต็มแบบสุ่มเป็นสตริง
resultText.text = randomInt.toString()
  1. คอมไพล์และเรียกใช้แอป ทุกครั้งที่คุณแตะปุ่มทอย หมายเลขในมุมมองข้อความจะเปลี่ยนไป

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

โจทย์: เพิ่มปุ่มที่ 2 ลงในแอปโดยมีป้ายกำกับว่า "นับขึ้น" ซึ่งจะปรากฏใต้ปุ่มหมุน เมื่อแตะ ปุ่มนับขึ้นควรรับค่าปัจจุบันของมุมมองข้อความผลลัพธ์ เพิ่ม 1 ลงในค่าดังกล่าว และอัปเดตมุมมองข้อความ โปรดตรวจสอบว่าคุณได้จัดการกรณีข้อยกเว้นต่อไปนี้

  • หากมุมมองข้อความผลลัพธ์ยังไม่มีตัวเลข (กล่าวคือ หากมุมมองข้อความยังคงมีสตริง "Hello World" เริ่มต้น) ให้ตั้งค่าข้อความผลลัพธ์เป็น 1
  • หากหมายเลขเป็น 6 อยู่แล้ว ก็ไม่ต้องดำเนินการใดๆ

โค้ดโซลูชันของโจทย์การเขียนโค้ด

โปรเจ็กต์ Android Studio: DiceRoller-challenge

กิจกรรม

  • MainActivity เป็นคลาสย่อยของ AppCompatActivity ซึ่งเป็นคลาสย่อยของ Activity Activity เป็นคลาสหลักของ Android ที่รับผิดชอบในการวาด UI ของแอป Android และรับเหตุการณ์อินพุต
  • กิจกรรมทั้งหมดมีไฟล์เลย์เอาต์ที่เกี่ยวข้อง ซึ่งเป็นไฟล์ XML ในทรัพยากรของแอป ไฟล์เลย์เอาต์จะตั้งชื่อตามกิจกรรม เช่น activity_main.xml
  • เมธอด setContentView() ใน MainActivity จะเชื่อมโยงเลย์เอาต์กับกิจกรรม และขยายเลย์เอาต์เมื่อสร้างกิจกรรม
  • การขยายเลย์เอาต์คือกระบวนการที่เปลี่ยนมุมมองที่กำหนดไว้ในไฟล์เลย์เอาต์ XML ให้เป็นออบเจ็กต์มุมมอง Kotlin ในหน่วยความจำ (หรือ "ขยาย" ให้เป็นออบเจ็กต์มุมมอง Kotlin ในหน่วยความจำ) เมื่อเกิดการขยายเลย์เอาต์แล้ว Activity จะวาดออบเจ็กต์เหล่านี้ลงในหน้าจอและแก้ไขแบบไดนามิกได้

ยอดดู

  • องค์ประกอบ UI ทั้งหมดในเลย์เอาต์ของแอปเป็นคลาสย่อยของคลาส View และเรียกว่ามุมมอง TextView และ Button เป็นตัวอย่างของมุมมอง
  • องค์ประกอบ View สามารถจัดกลุ่มภายใน ViewGroup ได้ กลุ่มมุมมองทําหน้าที่เป็นคอนเทนเนอร์สําหรับมุมมองหรือกลุ่มมุมมองอื่นๆ ภายใน LinearLayout เป็นตัวอย่างของกลุ่มมุมมองที่จัดเรียงมุมมองเป็นเส้นตรง

ดูแอตทริบิวต์

  • แอตทริบิวต์ android:layout_width และ android:layout_height ระบุน้ำหนักและความสูงของมุมมอง ค่า match_parent จะขยายมุมมองให้มีความกว้างหรือความสูงเท่ากับคอนเทนเนอร์หลัก ค่า wrap_content จะย่อขนาดมุมมองให้พอดีกับเนื้อหาของมุมมอง
  • แอตทริบิวต์ android:text ระบุข้อความที่มุมมองควรแสดง (หากมุมมองนั้นแสดงข้อความ) สำหรับปุ่ม android:text คือป้ายกำกับปุ่ม
  • แอตทริบิวต์ android:orientation ในกลุ่มมุมมอง LinearLayout จะจัดเรียงองค์ประกอบมุมมองที่มีอยู่ ค่า horizontal จะจัดเรียงมุมมองจากซ้ายไปขวา ค่า vertical จะจัดเรียงมุมมองจากบนลงล่าง
  • แอตทริบิวต์ android:layout_gravity จะกำหนดตำแหน่งของมุมมองและองค์ประกอบย่อยทั้งหมดของมุมมองนั้น
  • แอตทริบิวต์ android:textSize จะกำหนดขนาดของข้อความในมุมมองข้อความ ระบบจะระบุขนาดข้อความในหน่วย sp (พิกเซลที่รองรับการปรับขนาด) การใช้หน่วย sp ช่วยให้คุณปรับขนาดข้อความได้โดยไม่ขึ้นอยู่กับคุณภาพการแสดงผลของอุปกรณ์

Strings

  • แนวทางปฏิบัติแนะนำคือการใช้ทรัพยากรสตริงแทนการเขียนสตริงแบบฮาร์ดโค้ดในเลย์เอาต์
  • ทรัพยากรสตริงจะอยู่ในไฟล์ values/res/string.xml
  • หากต้องการแยกสตริง ให้ใช้ Alt+Enter (Option+Enter ใน Mac) เลือกแยกทรัพยากรสตริงจากเมนูป๊อปอัป

การใช้มุมมอง

  • หากต้องการเชื่อมต่อโค้ด Kotlin กับ View ที่คุณกำหนดไว้ในเลย์เอาต์ คุณต้องรับการอ้างอิงไปยังออบเจ็กต์ View หลังจากที่ View ได้รับการขยายแล้ว กำหนดรหัส (android:id) ให้กับมุมมองในเลย์เอาต์ จากนั้นใช้วิธี findViewById() เพื่อรับออบเจ็กต์มุมมองที่เชื่อมโยง
  • เมื่อสร้างรหัสสำหรับมุมมองในไฟล์เลย์เอาต์ XML แล้ว Android Studio จะสร้างค่าคงที่จำนวนเต็มที่มีชื่อของรหัสนั้นในคลาส R ที่สร้างขึ้น จากนั้นคุณจะใช้การอ้างอิง R.id นั้นในเมธอด findViewById() ได้
  • คุณตั้งค่าแอตทริบิวต์ของออบเจ็กต์ View ในโค้ด Kotlin ได้โดยตรงตามชื่อพร็อพเพอร์ตี้ ตัวอย่างเช่น ข้อความในมุมมองข้อความกำหนดโดยแอตทริบิวต์ android:text ใน XML และกำหนดโดยพร็อพเพอร์ตี้ text ใน Kotlin
  • ตัวแฮนเดิลการคลิกคือเมธอดที่เรียกใช้เมื่อผู้ใช้คลิกหรือแตะองค์ประกอบ UI หากต้องการแนบเมธอดตัวแฮนเดิลการคลิกกับ View เช่น ปุ่ม ให้ใช้เมธอด setOnClickListener()

การใช้ข้อความป๊อปอัป

ข้อความโทสต์คือมุมมองที่แสดงข้อความอย่างง่ายในหน้าต่างป๊อปอัปขนาดเล็กแก่ผู้ใช้

หากต้องการสร้างข้อความป๊อปอัป ให้เรียกใช้เมธอด Factory makeText() ในคลาส Toast โดยมีอาร์กิวเมนต์ 3 รายการ ดังนี้

  • บริบทของแอป Activity
  • ข้อความที่จะแสดง เช่น ทรัพยากรสตริง
  • ระยะเวลา เช่น Toast.LENGTH_SHORT

หากต้องการแสดงข้อความโทสต์ ให้เรียกใช้ show()

หลักสูตร Udacity:

เอกสารประกอบสำหรับนักพัฒนาแอป Android

อื่นๆ:

ส่วนนี้แสดงรายการการบ้านที่เป็นไปได้สำหรับนักเรียน/นักศึกษาที่กำลังทำ Codelab นี้เป็นส่วนหนึ่งของหลักสูตรที่สอนโดยผู้สอน ผู้สอนมีหน้าที่ดำเนินการต่อไปนี้

  • มอบหมายการบ้านหากจำเป็น
  • สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานที่ได้รับมอบหมาย
  • ให้คะแนนงานการบ้าน

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

หากคุณกำลังทำ Codelab นี้ด้วยตนเอง โปรดใช้แบบฝึกหัดเหล่านี้เพื่อทดสอบความรู้ของคุณ

เปลี่ยนแอป

เปิดแอป DiceRoller เพิ่มปุ่มที่มีป้ายกำกับว่า "รีเซ็ต" ลงในแอป ซึ่งจะปรากฏใต้ปุ่มทอย ให้ปุ่มนั้นรีเซ็ตมุมมองข้อความผลลัพธ์เป็น 0

ตอบคำถามต่อไปนี้

คำถามที่ 1

เมธอดใดใน Activity ขยายเลย์เอาต์ของแอปและทำให้มุมมองของแอปพร้อมใช้งานเป็นออบเจ็กต์

  • onCreate()
  • setClickListener()
  • setContentView()
  • show()

คำถามที่ 2

คุณใช้แอตทริบิวต์มุมมองใดในการตั้งค่าความกว้างของมุมมองเพื่อให้ปรับให้พอดีกับเนื้อหา

  • android:view_width="wrap"
  • android:layout_width="wrap_content"
  • android:layout_height="wrap_content"
  • android:layout_width="match_parent"

ส่งแอปเพื่อรับการจัดประเภท

ตรวจสอบว่าแอปมีสิ่งต่อไปนี้

  • เลย์เอาต์ของแอปควรมีมุมมองข้อความ 1 รายการและปุ่ม 2 ปุ่ม
  • โค้ดของแอปควรตั้งค่าตัวแฮนเดิลการคลิก 2 รายการ โดยรายการหนึ่งสำหรับปุ่มแต่ละปุ่ม
  • ตัวแฮนเดิลการคลิกที่รีเซ็ตมุมมองข้อความควรกำหนดพร็อพเพอร์ตี้ข้อความเป็น 0

เริ่มบทเรียนถัดไป: 1.3 แหล่งข้อมูลรูปภาพและความเข้ากันได้

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