หลักพื้นฐานของ Kotlin Android 10.1: รูปแบบและธีม

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

Codelab นี้เป็นส่วนหนึ่งของชุดข้อมูลที่จะสอนพื้นฐานการออกแบบแอป Android และแนะนําการสร้างแอปที่ค้นหาการพบปะของ Google Developer Group (GDG) แอปจะแสดงข้อมูลเกี่ยวกับ Meetup ที่กำลังจะจัดขึ้นในรูปแบบที่สวยงามและเข้าถึงได้

เราขอแนะนำให้คุณทำ Codelab ทั้ง 3 รายการในชุดนี้ตามลำดับ เนื่องจากจะค่อยๆ ทำงานทีละขั้นตอน

• 10.1 รูปแบบและธีม
• 10.2 Material Design, dimens และสี
• 10.3 ออกแบบเพื่อทุกคน

ข้อมูลเบื้องต้นเกี่ยวกับการออกแบบ

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

เปรียบเทียบ 2 หน้าจอด้านล่าง โปรดสังเกตว่าการย้ายองค์ประกอบไปมาและดึงดูดความสนใจไปยังสิ่งที่สำคัญจะช่วยให้ผู้ใช้เข้าใจสิ่งที่เกิดขึ้นได้ สำหรับหน้าจอที่เรียบง่าย การออกแบบที่ดีมักหมายถึงการแสดงข้อมูลน้อยลง สำหรับหน้าจอที่มีข้อมูลสำคัญจำนวนมาก การออกแบบที่ดีจะช่วยให้ข้อมูลที่หนาแน่นเข้าใจได้ในพริบตา ขณะที่คุณทำงานกับแอป Android คุณอาจได้ยินแนวคิดนี้ที่เรียกว่าสถาปัตยกรรมข้อมูล (IA)

การออกแบบอีกระดับคือการสร้างโฟลว์ผู้ใช้หรือกรณีการใช้งานที่สอดคล้องกัน ซึ่งช่วยให้ผู้ใช้ทำงานให้เสร็จได้ รูปแบบการออกแบบนี้เรียกว่าการออกแบบประสบการณ์ของผู้ใช้ (UXD) และนักออกแบบบางคนก็เชี่ยวชาญด้านนี้

หากคุณไม่มีสิทธิ์เข้าถึงนักออกแบบ เคล็ดลับบางส่วนสำหรับการเริ่มต้นใช้งานมีดังนี้

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

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

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

เมื่อพัฒนาแอปสำหรับกลุ่มเป้าหมายที่ใหญ่ขึ้น คุณควรทำให้แอปเข้าถึงได้สำหรับผู้ใช้หลายประเภทมากที่สุด เช่น

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

การออกแบบที่ดีเป็นวิธีที่สำคัญที่สุดในการดึงดูดให้ผู้ใช้ใช้แอปของคุณ

Codelab เหล่านี้สั้นเกินกว่าที่จะสอนทุกอย่างเกี่ยวกับการออกแบบสำหรับ Android แต่จะช่วยให้คุณเริ่มต้นในทิศทางที่ดี และคุณสามารถเรียนรู้และพัฒนาต่อด้วยตนเองได้

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

คุณควรคุ้นเคยกับสิ่งต่อไปนี้

• วิธีสร้างแอปที่มีกิจกรรมและ Fragment รวมถึงการไปยังส่วนต่างๆ ระหว่าง Fragment โดยส่งผ่านข้อมูล
• การใช้มุมมองและกลุ่มมุมมองเพื่อจัดวางอินเทอร์เฟซผู้ใช้ (UI) รวมถึงRecyclerView
• วิธีใช้คอมโพเนนต์สถาปัตยกรรม รวมถึง ViewModel กับสถาปัตยกรรมที่แนะนําเพื่อสร้างแอปที่มีโครงสร้างดีและมีประสิทธิภาพ
• การเชื่อมโยงข้อมูล, โครูทีน และวิธีจัดการการคลิก
• วิธีเชื่อมต่ออินเทอร์เน็ตและแคชข้อมูลในเครื่องโดยใช้ฐานข้อมูล Room
• วิธีตั้งค่าพร็อพเพอร์ตี้มุมมอง
• วิธีแยกทรัพยากรลงในไฟล์ทรัพยากร XML และวิธีใช้ทรัพยากรจากไฟล์ทรัพยากร XML

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

• ข้อมูลเบื้องต้นเกี่ยวกับระบบการจัดรูปแบบของ Android
• วิธีใช้แอตทริบิวต์ สไตล์ และธีมเพื่อปรับแต่งแอป

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

• ปรับปรุงการออกแบบแอปเริ่มต้นด้วยแอตทริบิวต์ของ View, สไตล์ และธีม

แอปเริ่มต้น GDG-finder สร้างขึ้นจากทุกสิ่งที่คุณได้เรียนรู้มาจนถึงตอนนี้ในหลักสูตรนี้

แอปใช้ ConstraintLayout เพื่อจัดวาง 3 หน้าจอ ส่วน 2 หน้าจอเป็นเพียงไฟล์เลย์เอาต์ที่คุณจะใช้เพื่อสำรวจสีและข้อความใน Android

หน้าจอที่ 3 คือเครื่องมือค้นหา GDG GDG หรือ Google Developer Groups คือชุมชนนักพัฒนาแอปที่มุ่งเน้นเทคโนโลยีของ Google ซึ่งรวมถึง Android GDG ทั่วโลกจัดงานพบปะ การประชุม Study Jam และกิจกรรมอื่นๆ

ขณะพัฒนาแอปนี้ คุณจะทำงานกับรายชื่อ GDG จริง หน้าจอผู้ค้นหาจะใช้ตำแหน่งของอุปกรณ์เพื่อจัดเรียง GDG ตามระยะทาง

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

ภาพหน้าจอด้านล่างแสดงให้เห็นว่าแอปของคุณจะเปลี่ยนแปลงอย่างไรตั้งแต่ต้นจนจบ Codelab นี้

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

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

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

ใช้สำหรับการออกแบบที่กำหนดเองหรือแบบครั้งเดียว เช่น ระยะขอบ ระยะห่าง หรือข้อจำกัด

รูปแบบ

• ใช้สไตล์เพื่อสร้างคอลเล็กชันข้อมูลการจัดรูปแบบที่นำกลับมาใช้ใหม่ได้ เช่น ขนาดแบบอักษรหรือสี
• เหมาะสำหรับการประกาศชุดการออกแบบทั่วไปขนาดเล็กที่ใช้ทั่วทั้งแอป

ใช้สไตล์กับหลายๆ มุมมองโดยลบล้างสไตล์เริ่มต้น เช่น ใช้สไตล์เพื่อสร้างส่วนหัวหรือชุดปุ่มที่มีสไตล์สอดคล้องกัน

รูปแบบเริ่มต้น

• ซึ่งเป็นรูปแบบเริ่มต้นที่ระบบ Android มีให้

ธีม

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

TextAppearance

• สำหรับการจัดรูปแบบด้วยแอตทริบิวต์ข้อความเท่านั้น เช่น fontFamily

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

ภาพหน้าจอด้านล่างแสดงแอป GDG-finder ที่มีธีมสว่าง (ซ้าย) และธีมมืด (ขวา) รวมถึงมีแบบอักษรและขนาดส่วนหัวที่กำหนดเอง คุณนำแบนเนอร์ดังกล่าวไปใช้ได้หลายวิธีด้วยกัน และคุณจะได้เรียนรู้บางวิธีใน Codelab นี้

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

1. ดาวน์โหลดและเรียกใช้แอปเริ่มต้น GDG-finder
2. สังเกตว่าหน้าจอหลักมีข้อความที่จัดรูปแบบเหมือนกันจำนวนมาก ซึ่งทำให้ยากต่อการพิจารณาว่าหน้าเว็บนี้เกี่ยวกับอะไรและมีอะไรที่สำคัญ
3. เปิดไฟล์เลย์เอาต์ home_fragment.xml
4. โปรดสังเกตว่าเลย์เอาต์ใช้ ConstraintLayout เพื่อจัดตำแหน่งองค์ประกอบภายใน ScrollView
5. โปรดสังเกตว่าสำหรับแต่ละมุมมอง แอตทริบิวต์ข้อจำกัดและเลย์เอาต์ขอบจะได้รับการตั้งค่าในมุมมอง เนื่องจากแอตทริบิวต์เหล่านี้มักจะได้รับการปรับแต่งสำหรับแต่ละมุมมองและหน้าจอ
6. ในtitleมุมมองข้อความ ให้เพิ่มtextSizeแอตทริบิวต์เพื่อเปลี่ยนขนาดข้อความเป็น 24sp
   
   โปรดทราบว่า sp ย่อมาจากพิกเซลอิสระที่ปรับขนาด ซึ่งจะปรับขนาดตามความหนาแน่นของพิกเซลและความต้องการขนาดแบบอักษรที่ผู้ใช้ตั้งค่าไว้ในการตั้งค่าอุปกรณ์ Android จะกำหนดขนาดข้อความที่ควรแสดงบนหน้าจอเมื่อวาดข้อความ ใช้ sp สำหรับขนาดข้อความเสมอ

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

7. ตั้งค่า textColor ของมุมมองข้อความ title เป็นสีเทาทึบโดยตั้งค่าเป็นค่า aRGB ของ #FF555555

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

8. หากต้องการเปิดแท็บแสดงตัวอย่างใน Android Studio ให้เลือกดู > หน้าต่างเครื่องมือ > แสดงตัวอย่าง หรือคลิกปุ่มแสดงตัวอย่างแนวตั้งที่ขอบด้านขวาของเครื่องมือแก้ไขเลย์เอาต์ ในตัวอย่าง ให้ตรวจสอบว่าชื่อเป็นสีเทาและใหญ่กว่าเดิม ดังที่แสดงด้านล่าง

เคล็ดลับ: ค่า aRGB แสดงถึงความโปร่งใสของอัลฟ่า ค่าสีแดง ค่าสีเขียว และค่าสีน้ำเงินของสี ค่า aRGB ใช้ตัวเลขฐานสิบหกตั้งแต่ 00 ถึง FF สำหรับคอมโพเนนต์สีแต่ละรายการ

#(alpha)(red)(green)(blue)

#(00-FF)(00-FF)(00-FF)(00-FF)

ตัวอย่าง

• #FFFF0000 สำหรับสีแดงทึบ
• #5500FF00 สำหรับสีเขียวแบบกึ่งโปร่งใส
• #FF0000FF สำหรับสีน้ำเงินทึบ

9. จัดรูปแบบคำบรรยายให้มีสีเดียวกับส่วนหัวโดยใช้แบบอักษรที่เล็กลง 18sp (ค่าอัลฟ่าเริ่มต้นคือ FF ซึ่งหมายถึงทึบแสง คุณละเว้นค่าอัลฟ่าได้หากไม่ต้องการเปลี่ยนแปลง)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

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

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

11. อย่าลืมเลิกทำแอตทริบิวต์ textAllCaps, textStyle และ background จากมุมมอง subtitle ก่อนดำเนินการต่อ
12. เรียกใช้แอป แล้วแอปควรจะดูดีขึ้นแล้ว

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

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

ในงานนี้ คุณจะใช้แบบอักษรที่ดาวน์โหลดได้เพื่อตั้งค่าแบบอักษรของทุกมุมมองในแอปที่ใช้ธีม

ขั้นตอนที่ 1: ใช้แบบอักษรที่ดาวน์โหลดได้

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

6. ในหน้าต่างแหล่งข้อมูล ให้ค้นหา lobster หรือ lo
7. ในผลการค้นหา ให้เลือก Lobster Two
8. ทางด้านขวาใต้ชื่อแบบอักษร ให้เลือกปุ่มตัวเลือก สร้างแบบอักษรที่ดาวน์โหลดได้ คลิกตกลง
9. เปิดไฟล์ Android Manifest
10. ที่ด้านล่างของไฟล์ Manifest ให้ค้นหาแท็ก <meta-data> ใหม่ที่มีแอตทริบิวต์ name และ resource ตั้งค่าเป็น "preloaded_fonts" แท็กนี้จะบอกบริการ Google Play ว่าแอปนี้ต้องการใช้แบบอักษรที่ดาวน์โหลด เมื่อแอปทำงานและขอใช้แบบอักษร Lobster Two ผู้ให้บริการแบบอักษรจะดาวน์โหลดแบบอักษรจากอินเทอร์เน็ต หากแบบอักษรยังไม่มีในอุปกรณ์

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

11. ในโฟลเดอร์ res/values ให้ค้นหาไฟล์ preloaded_fonts.xml ซึ่งกำหนดอาร์เรย์ที่แสดงรายการแบบอักษรทั้งหมดที่ดาวน์โหลดได้สำหรับแอปนี้
12. ในทำนองเดียวกัน res/fonts/lobster_two.xml จะมีข้อมูลเกี่ยวกับแบบอักษร
13. เปิด home_fragment.xml แล้วสังเกตในโค้ดและตัวอย่างว่ามีการใช้แบบอักษร Lobster Two กับ title TextView และใช้กับชื่อ

14. เปิด res/values/styles.xml แล้วดูธีม AppTheme เริ่มต้นที่สร้างขึ้นสำหรับโปรเจ็กต์ ปัจจุบันหน้าจอจะมีลักษณะดังที่แสดงด้านล่าง หากต้องการใช้แบบอักษร Lobster Two ใหม่กับข้อความทั้งหมด คุณจะต้องอัปเดตธีมนี้
    
15. ในแท็ก <style> ให้สังเกตแอตทริบิวต์ parent แท็กสไตล์ทุกแท็กสามารถระบุแท็กหลักและรับค่าแอตทริบิวต์ทั้งหมดของแท็กหลักได้ โค้ดจะระบุ Theme ที่กำหนดโดยไลบรารี Android ธีม MaterialComponents ที่ระบุทุกอย่างตั้งแต่การทำงานของปุ่มไปจนถึงวิธีวาดแถบเครื่องมือ ธีมมีค่าเริ่มต้นที่สมเหตุสมผล คุณจึงปรับแต่งได้เฉพาะส่วนที่ต้องการ แอปใช้ธีมเวอร์ชัน Light นี้โดยไม่มีแถบการทำงาน (NoActionBar) ดังที่เห็นในภาพหน้าจอด้านบน
    

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

16. ในรูปแบบ AppTheme ให้ตั้งค่าชุดแบบอักษรเป็น lobster_two คุณต้องตั้งค่าทั้ง android:fontFamily และ fontFamily เนื่องจากธีมหลักใช้ทั้ง 2 อย่าง คุณสามารถตรวจสอบ home_fragment.xml ได้ในแท็บออกแบบเพื่อดูตัวอย่างการเปลี่ยนแปลง

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

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

ขั้นตอนที่ 2: ใช้ธีมกับชื่อ

1. ใน home_fragment.xml ให้ค้นหามุมมองข้อความ title ซึ่งมีแอตทริบิวต์สำหรับแบบอักษร lobster_two ลบแอตทริบิวต์ fontFamily แล้วเรียกใช้แอป เนื่องจากธีมจะตั้งค่าชุดแบบอักษรเดียวกัน จึงไม่มีการเปลี่ยนแปลง
2. ใส่แอตทริบิวต์ fontFamily อื่นกลับเข้าไปในมุมมองข้อความ title
app:fontFamily="serif-monospace"
ตรวจสอบว่าอยู่ในช่องว่าง app

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

3. เรียกใช้แอป แล้วคุณจะเห็นว่าแอตทริบิวต์ที่เฉพาะเจาะจงกับมุมมองจะลบล้างธีม
   

4. นำแอตทริบิวต์ fontFamily ออกจากมุมมองข้อความ title

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

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

ขั้นตอนที่ 1: สร้างสไตล์

1. เปิด res/values/styles.xml
2. ภายในแท็ก <resources> ให้กำหนดสไตล์ใหม่โดยใช้แท็ก <style> ดังที่แสดงด้านล่าง

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

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

สไตล์มีองค์ประกอบหลักเช่นเดียวกับธีม แต่คราวนี้แทนที่จะขยายธีม สไตล์จะขยายสไตล์ TextAppearance.MaterialComponents.Headline6 สไตล์นี้เป็นรูปแบบข้อความเริ่มต้นสำหรับธีม MaterialComponents ดังนั้นการขยายสไตล์นี้จึงเป็นการแก้ไขสไตล์เริ่มต้นแทนที่จะเริ่มจากศูนย์

3. กำหนด 2 รายการภายในสไตล์ใหม่ ในรายการหนึ่ง ให้ตั้งค่า textSize เป็น 24sp ในรายการอื่น ให้ตั้งค่า textColor เป็นสีเทาเข้มเดียวกันกับที่ใช้ก่อนหน้านี้

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. กำหนดรูปแบบอื่นสำหรับคำบรรยายแทนเสียง ตั้งชื่อว่า TextAppearance.Subtitle
5. เนื่องจากความแตกต่างจาก TextAppearance.Title จะมีเพียงขนาดข้อความ ให้กำหนดสไตล์นี้เป็นสไตล์ย่อยของ TextAppearance.Title
6. ในรูปแบบ Subtitle ให้ตั้งค่าขนาดข้อความเป็น 18sp รูปแบบที่เสร็จสมบูรณ์มีดังนี้

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ขั้นตอนที่ 2: ใช้สไตล์ที่สร้างขึ้น

1. ใน home_fragment.xml ให้เพิ่ม TextAppearanceTitle ไปยังมุมมองข้อความ title ลบแอตทริบิวต์ textSize และ textColor
   
   ธีมจะลบล้างTextAppearanceสไตล์ที่คุณตั้งค่าไว้ (แผนภาพปิรามิดที่จุดเริ่มต้นของ Codelab แสดงลำดับการใช้สไตล์) ใช้พร็อพเพอร์ตี้ textAppearance เพื่อใช้สไตล์เป็น TextAppearance เพื่อให้แบบอักษรที่ตั้งค่าไว้ใน Theme ลบล้างสิ่งที่คุณตั้งค่าไว้ที่นี่

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. นอกจากนี้ ให้เพิ่มรูปแบบ TextAppearance.Subtitle ลงในมุมมองข้อความ subtitle และลบแอตทริบิวต์ textSize และ textColor คุณต้องใช้สไตล์นี้เป็น textAppearance ด้วย เพื่อให้แบบอักษรที่ตั้งค่าไว้ในธีมลบล้างสิ่งที่คุณตั้งค่าไว้ที่นี่

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

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

3. เรียกใช้แอปและตอนนี้ข้อความของคุณจะมีรูปแบบที่สอดคล้องกันแล้ว

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

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

• กำหนดรูปแบบในไฟล์ทรัพยากร styles.xml โดยใช้แท็ก <style> และ <item>

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

การใช้แบบอักษรที่ดาวน์โหลดได้จะทำให้ผู้ใช้เข้าถึงแบบอักษรได้โดยไม่ต้องเพิ่มขนาด APK วิธีเพิ่มแบบอักษรที่ดาวน์โหลดได้สำหรับมุมมอง

1. เลือกมุมมองในแท็บการออกแบบ แล้วเลือกแบบอักษรเพิ่มเติมจากเมนูแบบเลื่อนลงของแอตทริบิวต์ fontFamily
2. ในกล่องโต้ตอบแหล่งข้อมูล ให้ค้นหาแบบอักษรและเลือกปุ่มตัวเลือกสร้างแบบอักษรที่ดาวน์โหลดได้
3. ตรวจสอบว่า Manifest ของ Android มีแท็ก meta-data สำหรับแบบอักษรที่โหลดไว้ล่วงหน้า

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

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

• รูปแบบและธีม
• แบบอักษรที่ดาวน์โหลดได้
• แบบอักษรใน XML
• ทำความเข้าใจเกี่ยวกับ sp
• TextViewแอตทริบิวต์
• แหล่งข้อมูลสไตล์
• MaterialComponents ธีม

แหล่งข้อมูลอื่นๆ

• ลักษณะที่ปรากฏของข้อความคืออะไร
• เลขฐานสิบหก
• การพัฒนาแอป Android โดยใช้ Kotlin (หลักสูตร Udacity)
• Kotlin Bootcamp สำหรับโปรแกรมเมอร์ (หลักสูตร Udacity)
• Codelab หลักสูตรติวเข้ม Kotlin สำหรับโปรแกรมเมอร์

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

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

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

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

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

คำถามที่ 1

ใช้แท็กใดในการกำหนดธีม

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

คำถามที่ 2

ข้อใดต่อไปนี้ไม่ใช่การใช้สไตล์ที่ดี

▢ ระบุข้อจำกัดของมุมมอง

▢ ระบุสีพื้นหลังของส่วนหัว

▢ รวมขนาดแบบอักษรในมุมมองต่างๆ

▢ ระบุสีข้อความสำหรับกลุ่มมุมมอง

คำถามที่ 3

ธีมและสไตล์แตกต่างกันอย่างไร

▢ ธีมจะมีผลกับทั้งแอป ในขณะที่คุณใช้รูปแบบกับมุมมองที่เฉพาะเจาะจงได้

▢ ธีมจะรับค่าจากธีมอื่นไม่ได้ แต่รูปแบบจะรับค่าจากรูปแบบอื่นได้

▢ รูปแบบจะรับค่าจากรูปแบบอื่นไม่ได้ แต่ธีมจะรับค่าจากธีมอื่นได้

▢ ธีมมาจากระบบ Android ส่วนนักพัฒนาแอปจะเป็นผู้กำหนดสไตล์

คำถามที่ 4

หาก TextView ในแอปมี Theme ที่ตั้งค่าขนาดแบบอักษรเป็น 12sp, รูปแบบที่กำหนดซึ่งตั้งค่าเป็น 14sp และแอตทริบิวต์ fontSize เป็น 16sp ขนาดของแบบอักษรที่แสดงบนหน้าจอจะเป็นเท่าใด

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

เริ่มบทเรียนถัดไป: 10.2: Material Design, dimens, and colors

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