หลักพื้นฐานของ Android Kotlin 03.1: สร้าง Fragment

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

ใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับ Fragment และสร้าง Fragment ภายในแอปเริ่มต้นที่ชื่อ AndroidTrivia ใน Codelab ถัดไป คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการนำทางและทำงานเพิ่มเติมในแอป AndroidTrivia

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

• พื้นฐานของ Kotlin
• วิธีสร้างแอป Android พื้นฐานใน Kotlin
• วิธีทำงานกับเลย์เอาต์

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

• วิธีเพิ่ม Fragment แบบคงที่ลงในแอป

สิ่งที่คุณต้องดำเนินการ

• สร้าง Fragment ภายใน Activity

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

แอป AndroidTrivia แสดงรูปแบบการนำทางและการควบคุม แอปมีคอมโพเนนต์หลายอย่าง ได้แก่

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

ด้านบนของแอปจะแสดงมุมมองสีที่เรียกว่าแถบแอป หรือที่เรียกว่าแถบการทำงาน

ใน Codelab นี้ คุณจะทำงานจากแอปเริ่มต้นที่มีโค้ดเทมเพลตและคลาส Fragment ที่คุณต้องใช้เมื่อสร้างแอป Trivia เสร็จสมบูรณ์

1. ดาวน์โหลดโปรเจ็กต์ AndroidTrivia-Starter ใน Android Studio
2. เปิดโปรเจ็กต์ใน Android Studio แล้วเรียกใช้แอป เมื่อแอปเปิดขึ้น แอปจะไม่ทำอะไรเลยนอกจากการแสดงชื่อแอปและหน้าจอว่าง
   
   
   
3. ในแผงโปรเจ็กต์ของ Android Studio ให้เปิดมุมมองโปรเจ็กต์: Android เพื่อสำรวจไฟล์โปรเจ็กต์ เปิดโฟลเดอร์ app > java เพื่อดูคลาส MainActivity และคลาส Fragment
   
   
4. เปิดโฟลเดอร์ res > layout แล้วดับเบิลคลิก activity_main.xml ไฟล์ activity_main.xml จะปรากฏใน Layout Editor
5. คลิกแท็บออกแบบ โครงสร้างคอมโพเนนต์สำหรับไฟล์ activity_main.xml จะแสดงเลย์เอาต์รูทเป็นแนวตั้ง LinearLayout
   
   
   
   ในเลย์เอาต์เชิงเส้นแนวตั้ง มุมมองย่อยทั้งหมดในเลย์เอาต์จะจัดแนวในแนวตั้ง

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

Fragment เป็นส่วนแบบแยกส่วนของกิจกรรม ซึ่งคล้ายกับ "กิจกรรมย่อย" ที่คุณใช้ในกิจกรรมอื่นๆ ได้ด้วย

• Fragment มีวงจรของตัวเองและรับเหตุการณ์อินพุตของตัวเอง
• คุณเพิ่มหรือนำ Fragment ออกได้ขณะที่กิจกรรมกำลังทำงาน
• โดย Fragment จะกำหนดไว้ในคลาส Kotlin
• UI ของ Fragment จะกำหนดไว้ในไฟล์เลย์เอาต์ XML

แอป AndroidTrivia มีกิจกรรมหลักและ Fragment หลายรายการ ระบบได้กำหนด Fragment ส่วนใหญ่และไฟล์เลย์เอาต์ของ Fragment เหล่านั้นไว้ให้คุณแล้ว ในงานนี้ คุณจะได้สร้าง Fragment และเพิ่ม Fragment ลงในกิจกรรมหลักของแอป

ขั้นตอนที่ 1: เพิ่มคลาส Fragment

ในขั้นตอนนี้ คุณจะได้สร้างTitleFragmentชั้นเรียนTitleFragmentเปล่า เริ่มต้นด้วยการสร้างคลาส Kotlin สำหรับ Fragment ใหม่

1. ใน Android Studio ให้คลิกที่ใดก็ได้ภายในแผงโปรเจ็กต์เพื่อกลับไปโฟกัสที่ไฟล์โปรเจ็กต์ เช่น คลิกโฟลเดอร์ com.example.android.navigation
2. เลือกไฟล์ > ใหม่ > Fragment > Fragment (ว่าง)
3. สำหรับชื่อ Fragment ให้ใช้ TitleFragment ล้างช่องทำเครื่องหมายทั้งหมด รวมถึงสร้าง XML ของเลย์เอาต์ รวมเมธอด Factory ของ Fragment และรวมการเรียกกลับของอินเทอร์เฟซ
4. คลิกเสร็จสิ้น
5. เปิดไฟล์ TitleFragment.kt fragment หากยังไม่ได้เปิด ซึ่งมีเมธอด onCreateView() ซึ่งเป็นหนึ่งในเมธอดที่เรียกใช้ในวงจรของ Fragment
6. ใน onCreateView() ให้นำส่วน return TextView(activity).apply ออก รวมถึงบรรทัดที่ขึ้นต้นด้วย setText ฟังก์ชัน onCreateView() จะเหลือเพียงโค้ดต่อไปนี้

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

สร้างออบเจ็กต์การเชื่อมโยง

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

1. ในonCreateView()เมธอดใน TitleFragment.kt ให้สร้างตัวแปร binding (val binding)
2. หากต้องการขยายมุมมองของ Fragment ให้เรียกใช้เมธอด DataBindingUtil.inflate() ในออบเจ็กต์ Binding ของ Fragment ซึ่งก็คือ FragmentTitleBinding
   
   ส่งพารามิเตอร์ 4 รายการไปยังเมธอด

• inflater ซึ่งเป็น LayoutInflater ที่ใช้เพื่อขยายเลย์เอาต์การเชื่อมโยง
• ทรัพยากรเลย์เอาต์ XML ของเลย์เอาต์ที่จะขยาย ใช้เลย์เอาต์ใดเลย์เอาต์หนึ่งที่กำหนดไว้ให้คุณแล้ว R.layout.fragment_title
• container สำหรับผู้ปกครอง ViewGroup (พารามิเตอร์นี้จะใส่หรือไม่ใส่ก็ได้)
• false สำหรับค่า attachToParent
  

2. กำหนดค่าที่ DataBindingUtil.inflate แสดงผลให้กับตัวแปร binding
3. ส่งคืน binding.root จากเมธอด ซึ่งมีมุมมองที่ขยาย ตอนนี้เมธอด onCreateView() ของคุณจะมีลักษณะเหมือนโค้ดต่อไปนี้

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

ขั้นตอนที่ 2: เพิ่ม Fragment ใหม่ลงในไฟล์เลย์เอาต์หลัก

ในขั้นตอนนี้ คุณจะเพิ่ม TitleFragment ลงในไฟล์เลย์เอาต์ activity_main.xml ของแอป

1. เปิด res > layout > activity_main.xml แล้วคลิกแท็บข้อความเพื่อดูโค้ด XML ของเลย์เอาต์
2. เพิ่มองค์ประกอบ fragment ภายในองค์ประกอบ LinearLayout ที่มีอยู่
3. ตั้งรหัสของ Fragment เป็น titleFragment
4. ตั้งชื่อ Fragment เป็นเส้นทางแบบเต็มของคลาส Fragment ซึ่งในกรณีนี้คือ com.example.android.navigation.TitleFragment
5. ตั้งค่าความกว้างและความสูงของเลย์เอาต์เป็น match_parent

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

6. เรียกใช้แอป ระบบได้เพิ่ม Fragment ลงในหน้าจอหลักแล้ว

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

ใน Codelab นี้ คุณได้เพิ่ม Fragment ลงในแอป AndroidTrivia ซึ่งคุณจะใช้ต่อไปใน Codelab อีก 2 รายการในบทเรียนนี้

• Fragment คือส่วนแบบแยกส่วนของกิจกรรม
• Fragment มีวงจรของตัวเองและรับเหตุการณ์อินพุตของตัวเอง
• ใช้แท็ก <fragment> เพื่อกำหนดเลย์เอาต์สำหรับ Fragment ในไฟล์เลย์เอาต์ XML
• ขยายเลย์เอาต์สำหรับ Fragment ใน onCreateView()
• คุณเพิ่มหรือนำ Fragment ออกได้ขณะที่กิจกรรมกำลังทำงาน

หลักสูตร Udacity:

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

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

• เลย์เอาต์เชิงเส้น
• LinearLayout
• วงจรของ Fragment
• DataBindingUtil

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

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

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

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

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

คำถามที่ 1

ความแตกต่างระหว่าง Fragment กับ Activity มีอะไรบ้าง เลือกข้อความทั้งหมดที่เป็นจริง

• เมื่อสร้าง Fragment ให้ขยายเลย์เอาต์ในเมธอด onCreateView() เมื่อสร้างกิจกรรม คุณจะขยายเลย์เอาต์ใน onCreate()
• กิจกรรมมีเลย์เอาต์ของตัวเอง แต่ Fragment ไม่มีเลย์เอาต์ของตัวเอง
• กิจกรรมมีวงจรของตัวเอง แต่ Fragment ไม่มี
• เมื่อขยายเลย์เอาต์สำหรับ Fragment หรือ Activity คุณจะอ้างอิงเลย์เอาต์เป็น R.layout.layoutname ได้

คำถามที่ 2

ข้อความใดต่อไปนี้เกี่ยวกับ Fragment เป็นจริง เลือกได้มากกว่า 1 ข้อ

• คุณใช้ Fragment ในกิจกรรมได้มากกว่า 1 รายการ
• กิจกรรมหนึ่งๆ อาจมีหลาย Fragment
• หลังจากกำหนด Fragment ในคลาส Kotlin แล้ว ระบบจะเพิ่ม Fragment ลงในactivity_main.xmlไฟล์เลย์เอาต์โดยอัตโนมัติ
• ใช้แท็ก <fragment> เพื่อกำหนดตำแหน่งในไฟล์เลย์เอาต์ที่จะแทรก Fragment

เริ่มบทเรียนถัดไป: 3.2 กำหนดเส้นทางการนำทาง

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