หลักพื้นฐานของ Android Kotlin 02.1: Linear Layout โดยใช้เครื่องมือแก้ไขการออกแบบ

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

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

• การสร้างแอป Android พื้นฐานใน Kotlin
• การเรียกใช้แอป Android ในโปรแกรมจำลองหรือในอุปกรณ์
• ข้อมูลพื้นฐานเกี่ยวกับ LinearLayout
• การสร้างแอปง่ายๆ ที่ใช้ LinearLayout และ TextView

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

• วิธีทำงานกับ View และ ViewGroup
• วิธีจัดเรียงมุมมองใน Activity โดยใช้ LinearLayout.
• วิธีใช้ ScrollView เพื่อแสดงเนื้อหาที่เลื่อนได้
• วิธีเปลี่ยนระดับการมองเห็นของ View
• วิธีสร้างและใช้ทรัพยากรสตริงและมิติข้อมูล
• วิธีสร้างเลย์เอาต์เชิงเส้นโดยใช้เครื่องมือแก้ไขเลย์เอาต์ของ Android Studio

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

• สร้างแอป AboutMe
• เพิ่ม TextView ลงในเลย์เอาต์เพื่อแสดงชื่อ
• เพิ่ม ImageView.
• เพิ่ม ScrollView เพื่อแสดงข้อความที่เลื่อนได้

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

ในงานนี้ คุณจะสร้างโปรเจ็กต์ AboutMe ใน Android Studio

1. เปิด Android Studio หากยังไม่ได้เปิด
2. หากเปิดโปรเจ็กต์ใน Android Studio อยู่แล้ว ให้เลือกไฟล์ > ใหม่ > โปรเจ็กต์ใหม่
   
   
   
3. หากยังไม่ได้เปิดโปรเจ็กต์ ให้เลือก + เริ่มโปรเจ็กต์ Android Studio ใหม่ในกล่องโต้ตอบยินดีต้อนรับสู่ Android Studio
   
   
   
4. ในกล่องโต้ตอบสร้างโปรเจ็กต์ใหม่ ในแท็บโทรศัพท์และแท็บเล็ต ให้เลือกเทมเพลตกิจกรรมว่าง คลิกถัดไป
   
   
   
5. ในกล่องโต้ตอบสร้างโปรเจ็กต์ใหม่ถัดไป ให้ตั้งค่าพารามิเตอร์ต่อไปนี้ แล้วคลิกเสร็จสิ้น
   

แอตทริบิวต์	ค่า
ชื่อแอปพลิเคชัน	AboutMe
ชื่อบริษัท Android	com.android.example.AboutMe (หรือโดเมนของคุณเอง)
บันทึกตำแหน่ง	ปล่อยให้เป็นตำแหน่งเริ่มต้นหรือเปลี่ยนเป็นไดเรกทอรีที่ต้องการ
ภาษา	Kotlin
ระดับ API ขั้นต่ำ	API 19: Android 4.4 (KitKat)
โปรเจ็กต์นี้จะรองรับแอปด่วน	ยกเลิกการเลือกช่องทำเครื่องหมายนี้
ใช้ Artifact ของ AndroidX	เลือกช่องทำเครื่องหมายนี้

Android Studio จะใช้เวลาสักครู่ในการสร้างไฟล์โปรเจ็กต์

6. เรียกใช้แอป คุณจะเห็นสตริง "Hello World" บนหน้าจอว่าง
   

เทมเพลตกิจกรรมเปล่าจะสร้างกิจกรรมเปล่ารายการเดียว Mainactivity.kt นอกจากนี้ เทมเพลตยังสร้างไฟล์เลย์เอาต์ชื่อ activity_main.xml ด้วย ไฟล์เลย์เอาต์มี ConstraintLayout เป็น ViewGroup รูท และมี TextView รายการเดียวเป็นเนื้อหา

ในงานนี้ คุณจะเปลี่ยนรูทที่สร้างขึ้น ViewGroup เป็น LinearLayout นอกจากนี้ คุณยังจัดเรียงองค์ประกอบ UI ในแนวตั้งได้ด้วย

ดูกลุ่ม

ViewGroup คือ View ที่มี View ย่อย ซึ่งเป็น View และกลุ่ม View อื่นๆ มุมมองที่ประกอบกันเป็นเลย์เอาต์จะได้รับการจัดระเบียบเป็นลำดับชั้นของมุมมองโดยมีกลุ่มมุมมองเป็นรูท

ในLinearLayoutกลุ่มมุมมอง องค์ประกอบ UI จะจัดเรียงในแนวนอนหรือแนวตั้ง

เปลี่ยนเลย์เอาต์รากเพื่อให้ใช้กลุ่มมุมมอง LinearLayout

1. เลือกแผงโปรเจ็กต์ > Android เปิดไฟล์ activity_main.xml ในโฟลเดอร์ app/res/layout
2. เลือกแท็บข้อความ แล้วเปลี่ยนกลุ่มมุมมองรากจาก ConstraintLayout เป็น LinearLayout
3. นำ TextView ออก ในองค์ประกอบ LinearLayout ให้เพิ่มแอตทริบิวต์ android:orientation และตั้งค่าเป็น vertical

ก่อน:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

หลัง:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

เครื่องมือแก้ไขเลย์เอาต์เป็นเครื่องมือออกแบบภาพภายใน Android Studio คุณสามารถใช้เครื่องมือแก้ไขเลย์เอาต์เพื่อลากองค์ประกอบ UI ไปยังเครื่องมือแก้ไขดีไซน์แทนการเขียนโค้ด XML ด้วยตนเองเพื่อสร้างเลย์เอาต์ของแอป

หากต้องการดูเครื่องมือแก้ไขเลย์เอาต์ ให้คลิกแท็บออกแบบ ภาพหน้าจอด้านล่างแสดงส่วนต่างๆ ของเครื่องมือแก้ไขเลย์เอาต์

ตัวแก้ไขดีไซน์: แสดงภาพเลย์เอาต์หน้าจอในมุมมองดีไซน์ มุมมองพิมพ์เขียว หรือทั้ง 2 อย่าง เครื่องมือแก้ไขการออกแบบเป็นส่วนหลักของเครื่องมือแก้ไขเลย์เอาต์

แถบเครื่องมือ: มีปุ่มสำหรับกำหนดค่าลักษณะที่ปรากฏของเลย์เอาต์ในเครื่องมือแก้ไขการออกแบบ และเปลี่ยนแอตทริบิวต์เลย์เอาต์บางอย่าง เช่น หากต้องการเปลี่ยนการแสดงผลเลย์เอาต์ในเครื่องมือแก้ไขการออกแบบ ให้ใช้เมนูแบบเลื่อนลงเลือกพื้นผิวการออกแบบ

• ใช้ ออกแบบเพื่อดูตัวอย่างเลย์เอาต์ในสภาพแวดล้อมจริง
• ใช้ Blueprint เพื่อดูเฉพาะโครงร่างของแต่ละมุมมอง
• ใช้การออกแบบ + บลูปรินต์เพื่อดูจอแสดงผลทั้ง 2 จอแบบเคียงข้างกัน

จานสี: แสดงรายการมุมมองและกลุ่มมุมมองที่คุณลากไปยังเลย์เอาต์หรือแผงโครงสร้างคอมโพเนนต์ได้

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

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

ขั้นตอนที่ 1: เพิ่ม TextView

1. เปิดไฟล์ res/layout/activity_main.xml หากยังไม่ได้เปิด
2. สลับไปที่แท็บข้อความ แล้วตรวจสอบโค้ด โค้ดมี LinearLayout เป็นกลุ่มมุมมองราก (มุมมองกลุ่ม คือมุมมองที่มีมุมมองอื่นๆ)
   
   LinearLayout มีแอตทริบิวต์ที่จำเป็น layout_height, layout_width และ orientation ซึ่งเป็น vertical โดยค่าเริ่มต้น
3. เปลี่ยนไปที่แท็บดีไซน์เพื่อเปิดเครื่องมือแก้ไขเลย์เอาต์

หมายเหตุ: แท็บการออกแบบและแท็บข้อความจะแสดงเลย์เอาต์เดียวกัน แต่ในลักษณะที่แตกต่างกัน การเปลี่ยนแปลงที่คุณทำในแท็บหนึ่งจะมีผลในอีกแท็บหนึ่ง

4. ลากมุมมองข้อความจากแผงจานสีไปยังโปรแกรมแก้ไขการออกแบบ
   
   
   
5. สังเกตบานหน้าต่างแผนผังคอมโพเนนต์ ระบบจะวางมุมมองข้อความใหม่เป็นองค์ประกอบย่อยของกลุ่มมุมมองหลัก ซึ่งก็คือ LinearLayout
   
   
6. เปิดบานหน้าต่างแอตทริบิวต์ หากยังไม่ได้เปิด (หากต้องการเปิดแผง ให้ดับเบิลคลิก TextView ที่เพิ่มใหม่ในเครื่องมือแก้ไขการออกแบบ)
7. ตั้งค่าแอตทริบิวต์ต่อไปนี้ในแผงแอตทริบิวต์

แอตทริบิวต์	ค่า
รหัส	name_text
ข้อความ	ตั้งค่าเป็นชื่อของคุณ (ฟิลด์ข้อความช่องใดช่องหนึ่งจะแสดงไอคอนประแจเพื่อระบุว่าเป็นของเนมสเปซ tools ส่วนอันที่ไม่มีประแจใช้สำหรับเนมสเปซ android ซึ่งเป็นช่องข้อความที่คุณต้องการ)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	กึ่งกลาง

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

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

หากต้องการแก้ไขคำเตือน ให้สร้างทรัพยากรสตริงโดยทำดังนี้

1. ในแผงแอตทริบิวต์ ให้คลิกจุด 3 จุดข้างแอตทริบิวต์ข้อความที่คุณตั้งค่าเป็นชื่อ เครื่องมือแก้ไขทรัพยากรจะเปิดขึ้น
   
   
   
2. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่าสตริงใหม่
3. ในกล่องโต้ตอบแหล่งข้อมูลค่าสตริงใหม่ ให้ตั้งค่าช่องชื่อแหล่งข้อมูลเป็น name ตั้งค่าช่องค่าทรัพยากรเป็นชื่อของคุณเอง คลิกตกลง โปรดสังเกตว่าคำเตือนหายไปแล้ว
   
   
   
4. เปิดไฟล์ res/values/strings.xml แล้วมองหาระบบทรัพยากรสตริงที่สร้างขึ้นใหม่ชื่อ name

<string name="name">Aleks Haecky</string>

ขั้นตอนที่ 3: สร้างแหล่งข้อมูลมิติข้อมูล

คุณเพิ่งเพิ่มทรัพยากรโดยใช้เครื่องมือแก้ไขทรัพยากร นอกจากนี้ คุณยังแยกทรัพยากรในเครื่องมือแก้ไขโค้ด XML เพื่อสร้างทรัพยากรใหม่ได้ด้วย โดยทำดังนี้

1. ในactivity_main.xml ให้เปลี่ยนไปที่แท็บข้อความ
2. ในบรรทัด textSize ให้คลิกหมายเลข (20sp) แล้วพิมพ์ Alt+Enter (Option+Enter ใน Mac) เลือกแยกทรัพยากรขนาดจากเมนูป๊อปอัป
3. ในกล่องโต้ตอบแยกทรัพยากร ให้ป้อน text_size ในช่องชื่อทรัพยากร คลิกตกลง
   
   
   
4. เปิดไฟล์ res/values/dimens.xml เพื่อดูโค้ดที่สร้างขึ้นต่อไปนี้

<dimen name="text_size">20sp</dimen>

หมายเหตุ: หากไม่มีไฟล์ dimens.xml อยู่ในโฟลเดอร์ res/values Android Studio จะสร้างไฟล์ดังกล่าว

5. เปิดไฟล์ MainActivity.kt แล้วมองหาโค้ดต่อไปนี้ที่ส่วนท้ายของฟังก์ชัน onCreate()

setContentView(R.layout.activity_main)

ฟังก์ชัน setContentView() จะเชื่อมต่อไฟล์เลย์เอาต์กับ Activity ไฟล์ทรัพยากรเลย์เอาต์ที่ระบุคือ R.layout.activity_main

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

6. เรียกใช้แอป ระบบจะแสดง TextView พร้อมชื่อของคุณ
   
   

เมื่อดูที่หน้าจอแอป ชื่อของคุณจะอยู่ชิดขอบด้านบนของหน้าจอ ดังนั้นตอนนี้คุณจึงต้องเพิ่มระยะห่างภายในและระยะขอบ

ระยะห่างจากขอบเทียบกับระยะขอบ

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

ขนาดของ View จะรวมระยะห่างจากขอบ แอตทริบิวต์ระยะขอบที่ใช้กันโดยทั่วไปมีดังนี้

• android:padding ระบุระยะขอบสำหรับขอบทั้ง 4 ด้านของมุมมอง
• android:paddingTop ระบุระยะขอบบน
• android:paddingBottom ระบุระยะขอบสำหรับขอบด้านล่าง
• android:paddingStart ระบุระยะขอบสำหรับขอบ "เริ่มต้น" ของมุมมอง
• android:paddingEnd ระบุระยะขอบสำหรับขอบ "สิ้นสุด" ของมุมมอง
• android:paddingLeft ระบุระยะขอบสำหรับขอบด้านซ้าย
• android:paddingRight ระบุระยะขอบสำหรับขอบด้านขวา

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

• android:layout_margin ระบุขอบสำหรับทั้ง 4 ด้านของมุมมอง
• android:layout_marginBottom ระบุช่องว่างด้านนอกด้านล่างของมุมมองนี้
• android:layout_marginStart ระบุช่องว่างนอกด้าน "เริ่มต้น" ของมุมมองนี้
• android:layout_marginEnd ระบุช่องว่างที่ด้านท้ายของมุมมองนี้
• android:layout_marginLeft ระบุช่องว่างทางด้านซ้ายของมุมมองนี้
• android:layout_marginRight ระบุพื้นที่ทางด้านขวาของมุมมองนี้

ขวา/ซ้ายเทียบกับต้น/ท้าย

"ขวา" และ "ซ้าย" หมายถึงด้านขวาและด้านซ้ายของหน้าจอเสมอ ไม่ว่าแอปจะใช้โฟลว์จากซ้ายไปขวา (LTR) หรือโฟลว์จากขวาไปซ้าย (RTL) "เริ่มต้น" และ "สิ้นสุด" หมายถึงจุดเริ่มต้นและจุดสิ้นสุดของโฟลว์เสมอ

• สำหรับโฟลว์ LTR เริ่มต้น = ซ้าย และสิ้นสุด=ขวา
• สำหรับโฟลว์ RTL, start=right และ end=left

หากแอปกำหนดเป้าหมายเป็น API ระดับ 17 (Android 4.2) ขึ้นไป

• ใช้ "start" และ "end" แทน "left" และ "right"
• เช่น android:layout_marginLeft ควรเปลี่ยนเป็น android:layout_marginStart เพื่อรองรับภาษา RTL

หากต้องการให้แอปทำงานกับ Android เวอร์ชันต่ำกว่า 4.2 นั่นคือหาก targetSdkVersion หรือ minSdkVersion ของแอปเป็น 16 หรือต่ำกว่า ให้ทำดังนี้

• เพิ่ม "start" และ "end" นอกเหนือจาก "left" และ "right"
• เช่น ใช้ทั้ง android:paddingLeft และ android:paddingStart

ขั้นตอนที่ 1: เพิ่มระยะขอบ

หากต้องการเว้นที่ว่างระหว่างชื่อกับขอบด้านบนของnameมุมมองข้อความ ให้เพิ่มระยะห่างจากขอบด้านบน

1. เปิดactivity_main.xmlไฟล์ในแท็บออกแบบ
2. ในแผนผังคอมโพเนนต์หรือในเครื่องมือแก้ไขการออกแบบ ให้คลิกมุมมองข้อความเพื่อเปิดแผงแอตทริบิวต์
3. ที่ด้านบนของแผงแอตทริบิวต์ ให้คลิกไอคอนลูกศรคู่ เพื่อดูแอตทริบิวต์ทั้งหมดที่ใช้ได้
4. ค้นหาการเว้นวรรค ขยาย และคลิกจุด 3 จุด ... ข้างแอตทริบิวต์ด้านบน กล่องโต้ตอบแหล่งข้อมูลจะปรากฏขึ้น
5. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่าใหม่สำหรับมิติข้อมูล
6. ในกล่องโต้ตอบแหล่งข้อมูลค่ามิติข้อมูลใหม่ ให้สร้างแหล่งข้อมูล dimen ใหม่ชื่อ small_padding ที่มีค่าเป็น 8dp
   
   ตัวย่อ dp ย่อมาจากอิสระจากความหนาแน่น หากต้องการให้องค์ประกอบ UI มีขนาดเท่ากันในหน้าจอที่มีความหนาแน่นต่างกัน ให้ใช้ dp เป็นหน่วยวัด แต่เมื่อระบุขนาดข้อความ ให้ใช้ sp (พิกเซลที่รองรับการปรับขนาด) เสมอ
7. คลิกตกลง

ขั้นตอนที่ 2: เพิ่มขอบ

หากต้องการย้ายnameมุมมองข้อความออกจากขอบขององค์ประกอบระดับบนสุด ให้เพิ่มระยะขอบด้านบน

1. ในบานหน้าต่างแอตทริบิวต์ ให้ค้นหา "margin" เพื่อหา Layout_Margin
2. ขยาย Layout_Margin แล้วคลิกจุด 3 จุด ... ข้างแอตทริบิวต์ top
3. สร้างdimenทรัพยากรใหม่ชื่อ layout_margin และทําให้เป็น 16dp คลิกตกลง

ขั้นตอนที่ 3: เพิ่มแบบอักษร

หากต้องการให้nameมุมมองข้อความดูดีขึ้น ให้ใช้แบบอักษร Roboto ของ Android แบบอักษรนี้เป็นส่วนหนึ่งของไลบรารีการสนับสนุน และคุณจะเพิ่มแบบอักษรเป็นทรัพยากร

1. ในแผงแอตทริบิวต์ ให้ค้นหา "fontFamily"
2. ในช่อง fontFamily ให้คลิกลูกศรแบบเลื่อนลง เลื่อนไปที่ด้านล่างของรายการ แล้วเลือกแบบอักษรเพิ่มเติม
3. ในกล่องโต้ตอบแหล่งข้อมูล ให้ค้นหา rob แล้วเลือก Roboto ในรายการแสดงตัวอย่าง ให้เลือกปกติ
4. เลือกปุ่มตัวเลือก เพิ่มแบบอักษรลงในโปรเจ็กต์
5. คลิกตกลง
   
   

ตอนนี้โฟลเดอร์ res มีโฟลเดอร์ font ที่มีไฟล์แบบอักษร roboto.ttf ระบบจะเพิ่มแอตทริบิวต์ @font/roboto ลงใน TextView

ขั้นตอนที่ 4: แยกสไตล์

สไตล์คือชุดแอตทริบิวต์ที่ระบุลักษณะที่ปรากฏและรูปแบบของมุมมอง สไตล์อาจมีสีแบบอักษร ขนาดแบบอักษร สีพื้นหลัง ระยะเว้นขอบ ระยะขอบ และแอตทริบิวต์อื่นๆ ที่พบบ่อย

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

1. คลิกขวาที่ TextView ในแผนผังคอมโพเนนต์ แล้วเลือกปรับโครงสร้าง > แยกสไตล์
2. ในกล่องโต้ตอบแยกสไตล์ Android ให้ยกเลิกการเลือกช่องทำเครื่องหมาย layout_width, layout_height และ textAlignment โดยปกติแล้วแอตทริบิวต์เหล่านี้จะแตกต่างกันในแต่ละมุมมอง ดังนั้นคุณจึงไม่ต้องการให้แอตทริบิวต์เหล่านี้เป็นส่วนหนึ่งของสไตล์
3. ในช่องชื่อสไตล์ ให้ป้อน NameStyle
4. คลิกตกลง
   
   
   
5. สไตล์ยังเป็นทรัพยากรด้วย ดังนั้นระบบจะบันทึกสไตล์ไว้ในโฟลเดอร์ res/values/ ในไฟล์ styles.xml เปิด styles.xml แล้วตรวจสอบโค้ดที่สร้างขึ้นสำหรับสไตล์ NameStyle ซึ่งจะมีลักษณะคล้ายกับโค้ดต่อไปนี้

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. เปิด activity_main.xml แล้วเปลี่ยนไปที่แท็บข้อความ โปรดสังเกตว่าระบบใช้รูปแบบที่สร้างขึ้นในมุมมองข้อความเป็น style="@style/NameStyle"
7. เรียกใช้แอปและสังเกตการเปลี่ยนแปลงในแบบอักษรและการเว้นวรรคโดยรอบ TextView

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

ImageView คือมุมมองสำหรับแสดงทรัพยากรรูปภาพ เช่น ImageView สามารถแสดงแหล่งข้อมูล Bitmap เช่น ไฟล์ PNG, JPG, GIF หรือ WebP หรือแสดงแหล่งข้อมูล Drawable เช่น ภาพวาดเวกเตอร์

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

1. แสดงไฟล์เลย์เอาต์ในแท็บออกแบบ จากนั้นลาก ImageView จากแผงจานสีไปไว้ใต้ name_text ในแผนผังคอมโพเนนต์ กล่องโต้ตอบแหล่งข้อมูล จะเปิดขึ้น
2. เลือก Drawable หากยังไม่ได้เลือก
3. ขยาย android เลื่อน แล้วเลือก btn_star_big_on นั่นคือดาวสีเหลือง
4. คลิกตกลง
   
   
   
   ระบบจะเพิ่มรูปดาวลงในเลย์เอาต์ใต้ชื่อของคุณ เนื่องจากคุณมีLinearLayoutแนวตั้ง ยอดดูที่คุณเพิ่มจึงจะอยู่ในแนวตั้ง
   
   
5. เปลี่ยนไปที่แท็บข้อความและดูโค้ด ImageView ที่สร้างขึ้น ความกว้างตั้งค่าเป็น match_parent ดังนั้นมุมมองจะกว้างเท่ากับองค์ประกอบระดับบน ความสูงตั้งค่าเป็น wrap_content ดังนั้นมุมมองจะสูงเท่ากับเนื้อหา ImageView อ้างอิงถึง Drawable btn_star_big_on

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. หากต้องการเปลี่ยนชื่อ id ของ ImageView ให้คลิกขวาที่ "@+id/imageView" แล้วเลือกจัดระเบียบโค้ด > เปลี่ยนชื่อ
7. ในกล่องโต้ตอบเปลี่ยนชื่อ ให้ตั้งค่า id เป็น @+id/star_image คลิกจัดระเบียบโค้ด
   
   
   

เคล็ดลับ: Refactor > Rename จะเปลี่ยนชื่อการเกิดทั้งหมดของชื่อแอตทริบิวต์หรือตัวแปรในโปรเจ็กต์แอป

8. ในแท็บออกแบบ ในแผนผังคอมโพเนนต์ ให้คลิกไอคอนคำเตือน ข้าง star_image คำเตือนนี้มีไว้สำหรับ contentDescription ที่ขาดหายไป ซึ่งโปรแกรมอ่านหน้าจอใช้เพื่ออธิบายรูปภาพให้ผู้ใช้
9. ในบานหน้าต่างแอตทริบิวต์ ให้คลิกจุด 3 จุด ... ข้างแอตทริบิวต์ contentDescription กล่องโต้ตอบแหล่งข้อมูลจะเปิดขึ้น
10. ในกล่องโต้ตอบทรัพยากร ให้เลือกเพิ่มทรัพยากรใหม่ > ค่าสตริงใหม่ ตั้งค่าช่องชื่อทรัพยากรเป็น yellow_star และตั้งค่าช่องค่าทรัพยากรเป็น Yellow star คลิกตกลง
11. ใช้แผงแอตทริบิวต์เพื่อเพิ่มระยะขอบด้านบนเป็น 16dp (ซึ่งเท่ากับ @dimen/layout_margin) ให้กับ yellow_star เพื่อแยกรูปดาวออกจากชื่อ
12. เรียกใช้แอป ชื่อและรูปดาวจะแสดงใน UI ของแอป
    
    

ScrollView คือกลุ่มมุมมองที่อนุญาตให้เลื่อนลำดับชั้นของมุมมองที่วางไว้ภายในได้ ScrollView จะมีได้เพียง View หรือ ViewGroup อื่นๆ เป็นองค์ประกอบย่อย โดยทั่วไปแล้วมุมมองของเด็กจะเป็น LinearLayout คุณเพิ่มมุมมองอื่นๆ ได้ภายใน LinearLayout

รูปภาพต่อไปนี้แสดงตัวอย่างของ ScrollView ที่มี LinearLayout ซึ่งมีมุมมองอื่นๆ อีกหลายรายการ

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

ขั้นตอนที่ 1: เพิ่ม ScrollView ที่มี TextView

1. เปิดactivity_main.xmlไฟล์ในแท็บออกแบบ
2. ลาก ScrollView ลงในเลย์เอาต์โดยลากไปยังเครื่องมือแก้ไขการออกแบบ หรือไปยังComponent Tree วาง ScrollView ไว้ใต้รูปดาว
3. เปลี่ยนไปที่แท็บข้อความเพื่อตรวจสอบโค้ดที่สร้างขึ้น

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ความสูงและความกว้างของ ScrollView จะตรงกับองค์ประกอบระดับบน เมื่อname_textมุมมองข้อความและstar_imageมุมมองรูปภาพใช้พื้นที่แนวตั้งเพียงพอที่จะแสดงเนื้อหาแล้ว ระบบ Android จะจัดวางScrollViewเพื่อเติมพื้นที่ที่เหลือบนหน้าจอ

4. เพิ่ม id ไปยัง ScrollView และตั้งชื่อว่า bio_scroll การเพิ่ม id ลงใน ScrollView จะทำให้ระบบ Android มีแฮนเดิลสำหรับมุมมองเพื่อให้ระบบรักษาสถานะการเลื่อนไว้เมื่อผู้ใช้หมุนอุปกรณ์
5. ภายใน ScrollView ให้นำโค้ด LinearLayout ออก เนื่องจากแอปจะมีเพียงมุมมองเดียวที่เลื่อนได้ ซึ่งก็คือ TextView
6. ลาก TextView จากจานสีไปยังแผนผังคอมโพเนนต์ วาง TextView ไว้ใต้ bio_scroll เป็นองค์ประกอบย่อยของ bio_scroll
   
   
7. ตั้งค่า id ของมุมมองข้อความใหม่เป็น bio_text
8. จากนั้นเพิ่มรูปแบบสำหรับมุมมองข้อความใหม่ ในบานหน้าต่างแอตทริบิวต์ ให้คลิกจุด 3 จุด ... ข้างแอตทริบิวต์รูปแบบเพื่อเปิดกล่องโต้ตอบทรัพยากร
9. ในกล่องโต้ตอบแหล่งข้อมูล ให้ค้นหา NameStyle เลือก NameStyle จากรายการ แล้วคลิกตกลง ตอนนี้มุมมองข้อความใช้รูปแบบ NameStyle ซึ่งคุณสร้างไว้ในงานก่อนหน้า
   
   

ขั้นตอนที่ 2: เพิ่มชีวประวัติลงใน TextView ใหม่

1. เปิด strings.xml สร้างทรัพยากรสตริงชื่อ bio แล้วใส่ข้อความยาวๆ เกี่ยวกับตัวคุณเองหรืออะไรก็ได้ที่ต้องการ
   

หมายเหตุ:

• ใช้ \n เพื่อระบุการขึ้นบรรทัดใหม่
• หากใช้อัญประกาศเดี่ยว คุณต้องหลีกเลี่ยงโดยใช้แบ็กสแลช เช่น
  "You mustn\'t forget the backslash."
• หากต้องการใช้ข้อความตัวหนา ให้ใช้ <b>...</b> และหากต้องการใช้ข้อความตัวเอียง ให้ใช้ <i>...</i> เช่น
  "This text is <b>bold</b> and this text is <i>italics</i>."

ตัวอย่างประวัติมีดังนี้

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. ในbio_textมุมมองข้อความ ให้ตั้งค่าของแอตทริบิวต์ text เป็นbioทรัพยากรสตริงที่มีชีวประวัติ
3. หากต้องการให้bio_textข้อความอ่านง่ายขึ้น ให้เว้นระยะห่างระหว่างบรรทัด ใช้แอตทริบิวต์ lineSpacingMultiplier และกำหนดค่าเป็น 1.2
   
   
   
   สังเกตว่าในโปรแกรมแก้ไขการออกแบบ ข้อความ bio จะยาวไปจนถึงขอบด้านข้างของหน้าจอ หากต้องการแก้ไขปัญหานี้ คุณสามารถเพิ่มแอตทริบิวต์การเว้นวรรคด้านซ้าย ด้านเริ่มต้น ด้านขวา และด้านสิ้นสุดลงในรูท LinearLayout ได้ คุณไม่จำเป็นต้องเพิ่มระยะห่างจากด้านล่าง เนื่องจากข้อความที่อยู่ติดกับด้านล่างจะส่งสัญญาณให้ผู้ใช้ทราบว่าข้อความนั้นเลื่อนได้
4. เพิ่มระยะขอบเริ่มต้นและสิ้นสุดของ 16dp ไปยังรูท LinearLayout
5. เปลี่ยนไปที่แท็บข้อความ แยกทรัพยากรมิติข้อมูล และตั้งชื่อเป็น layout_padding
   
   

หมายเหตุ: ตั้งแต่ API ระดับ 17 เป็นต้นไป ให้ใช้ "start" และ "end" แทน "left" และ "right" สำหรับระยะขอบและการเว้นวรรค เพื่อปรับแอปให้รองรับภาษา RTL เช่น อารบิก

6. เรียกใช้แอปและเลื่อนดูข้อความ
   
   

ยินดีด้วย

คุณได้สร้างแอปที่สมบูรณ์แบบตั้งแต่ต้นจนจบ และแอปก็ดูดีมาก

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

หมายเหตุ: การท้าทายด้านการเขียนโค้ดทั้งหมดเป็นกิจกรรมที่ไม่บังคับ

ภายใน ScrollView ให้เพิ่ม ImageView เหนือ TextView เมื่อคุณเรียกใช้แอป รูปภาพนี้จะเลื่อนออกจากมุมมองขณะที่ข้อความเลื่อนขึ้น ซึ่งต่างจากรูปดาว

เคล็ดลับ: ScrollView มีได้เพียง 1 มุมมองย่อย คุณต้องรวมมุมมองที่เลื่อนได้ 2 รายการ ได้แก่ ImageView และ TextView ไว้ใน LinearLayout

• ViewGroup คือมุมมองที่สามารถมีมุมมองอื่นๆ ได้ LinearLayout และ ScrollView เป็นกลุ่มที่ดูได้
• LinearLayout เป็นกลุ่มมุมมองที่จัดเรียงมุมมองย่อยในแนวนอนหรือแนวตั้ง
• ใช้ ScrollView เมื่อต้องการแสดงเนื้อหาบนหน้าจอ เช่น ข้อความยาวหรือคอลเล็กชันรูปภาพ มุมมองที่เลื่อนได้จะมีมุมมองย่อยได้เพียง 1 รายการเท่านั้น หากต้องการเลื่อนมากกว่า 1 มุมมอง ให้เพิ่ม ViewGroup เช่น LinearLayout ลงใน ScrollView แล้ววางมุมมองที่จะเลื่อนไว้ภายใน ViewGroup นั้น
• เครื่องมือแก้ไขเลย์เอาต์เป็นเครื่องมือแก้ไขการออกแบบภาพภายใน Android Studio คุณใช้เครื่องมือแก้ไขเลย์เอาต์เพื่อสร้างเลย์เอาต์ของแอปได้โดยการลากองค์ประกอบ UI ไปยังเลย์เอาต์
• สไตล์คือชุดของแอตทริบิวต์ที่ระบุลักษณะที่ปรากฏของมุมมอง เช่น สไตล์อาจระบุสีแบบอักษร ขนาดแบบอักษร สีพื้นหลัง ระยะขอบภายใน และระยะขอบ
• คุณสามารถดึงและรวบรวมการจัดรูปแบบทั้งหมดของมุมมองไว้ในสไตล์ได้ หากต้องการให้แอปมีรูปลักษณ์ที่สอดคล้องกัน ให้ใช้สไตล์ซ้ำสำหรับมุมมองอื่นๆ

หลักสูตร Udacity:

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

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

• เลย์เอาต์
• ViewGroup
• View
• Linear Layout
• ScrollView
• รองรับความหนาแน่นของพิกเซลในระดับต่างๆ (dp)
• สร้าง UI ด้วยเครื่องมือแก้ไขเลย์เอาต์
• เอกสารประกอบของ Android Studio
• รูปแบบและธีม

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

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

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

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

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

คำถามที่ 1

ข้อใดต่อไปนี้คือกลุ่มมุมมอง

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

คำถามที่ 2

ลำดับชั้นของมุมมองที่ระบุไว้ต่อไปนี้ข้อใดไม่ถูกต้อง

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

คำถามที่ 3

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

▢ จริง

▢ ไม่จริง

คำถามที่ 4

ScrollView คือกลุ่มมุมมองที่สามารถมีมุมมองหรือกลุ่มมุมมองจำนวนเท่าใดก็ได้เป็นกลุ่มย่อย จริงหรือเท็จ

▢ จริง

▢ ไม่จริง

คำถามที่ 5

คุณใช้องค์ประกอบ UI ใดเพื่อแสดงรูปภาพในแอปได้

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

เริ่มบทเรียนถัดไป: 2.2: เพิ่มการโต้ตอบของผู้ใช้

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