Android Kotlin Fundamentals 03.1: สร้างส่วนย่อย

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

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

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

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

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

• วิธีเพิ่ม Fragment ไปยังแอปของคุณแบบคงที่

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

• สร้างส่วนย่อยภายในกิจกรรม

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

แอป AndroidTrivia จะแสดงรูปแบบและตัวควบคุมการนําทาง แอปมีองค์ประกอบหลายอย่าง ดังนี้

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

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

ใน Codelab นี้ คุณทํางานจากแอปเริ่มต้นที่ระบุรหัสเทมเพลตและคลาสส่วนย่อยที่คุณต้องการเมื่อกรอกแอป Trivia

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

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

ลองคิดว่าส่วนย่อยเป็นส่วนของกิจกรรมแบบแยกส่วน อย่างเช่น "sub activity&quot ที่คุณสามารถใช้ในกิจกรรมอื่นๆ ได้ เช่น

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

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

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

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

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

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

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

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

1. ในตัวแปร onCreateView() ใน TitleFragment.kt ให้สร้างตัวแปร binding (val binding)
2. หากต้องการเพิ่มการแสดงผลส่วนย่อยให้สูงเกิน ให้เรียกใช้เมธอด DataBindingUtil.inflate() ในออบเจ็กต์ Binding ของส่วนย่อย ซึ่งเป็น 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: เพิ่มส่วนย่อยใหม่ลงในไฟล์เลย์เอาต์หลัก

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

1. เปิด res >Layout > activity_main.xml แล้วคลิกแท็บ Text เพื่อดูโค้ด XML ของเลย์เอาต์
2. ในองค์ประกอบ LinearLayout ที่มีอยู่ ให้เพิ่มองค์ประกอบ fragment
3. ตั้งค่ารหัสส่วนย่อย's เป็น 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. เรียกใช้แอป เพิ่มส่วนย่อยไปยังหน้าจอหลักแล้ว

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

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

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

หลักสูตร Udacity:

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

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

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

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน Codelab นี้ซึ่งเป็นส่วนหนึ่งของหลักสูตรที่นําโดยผู้สอน สิ่งที่ผู้สอนต้องทํามีดังนี้

• มอบหมายการบ้านหากจําเป็น
• สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานทําการบ้าน
• ตัดเกรดการบ้าน

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

หากคุณใช้ Codelab ด้วยตัวเอง ก็ให้ใช้การบ้านเพื่อทดสอบความรู้ของคุณได้

ตอบคําถามเหล่านี้

คำถามข้อที่ 1

Fragment และกิจกรรมต่างกันอย่างไร เลือกทุกข้อที่เป็นจริง

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

คำถามข้อที่ 2

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

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

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

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