Kotlin Android Fundamentals 10.1: สไตล์และธีม

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

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

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

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

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

หากไม่มีสิทธิ์เข้าถึงนักออกแบบ เราขอแนะนําให้ดูเคล็ดลับต่อไปนี้

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

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

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

เมื่อสร้างแอปสําหรับกลุ่มเป้าหมายขนาดใหญ่ขึ้น การทําให้แอปเข้าถึงผู้ใช้ประเภทต่างๆ ได้มากที่สุดก็เป็นสิ่งสําคัญ เช่น

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

การออกแบบที่ดีคือวิธีสําคัญที่สุดในการให้ผู้ใช้ใช้แอป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รูปแบบ

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

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

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

  • นี่คือการจัดรูปแบบเริ่มต้นที่ระบบ Android มีให้

ธีม

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

ลักษณะที่ปรากฏของข้อความ

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

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

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

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

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

    โปรดทราบว่า sp ย่อมาจาก Pixel อิสระในการปรับขนาด ซึ่งปรับขนาดตามความหนาแน่นของพิกเซลและค่ากําหนดขนาดแบบอักษรที่ผู้ใช้กําหนดในการตั้งค่าอุปกรณ์ Android จะพิจารณาว่าข้อความควรมีขนาดเท่าใดในหน้าจอเมื่อวาดข้อความ ใช้ sp สําหรับขนาดข้อความเสมอ
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. ตั้งค่า textColor ของมุมมองข้อความ title เป็นสีเทาทึบ โดยตั้งค่าเป็นค่า ARGB ของ #FF555555 
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. หากต้องการเปิดแท็บแสดงตัวอย่างใน Android Studio ให้เลือก View > Tool Windows > Preview หรือคลิกปุ่มแสดงตัวอย่างแนวตั้งที่ขอบด้านขวาของเครื่องมือแก้ไขเลย์เอาต์ ในหน้าตัวอย่าง ให้ตรวจสอบว่าชื่อเป็นสีเทาและใหญ่กว่าก่อนหน้านี้ ดังที่แสดงด้านล่าง

  1. จัดรูปแบบคําบรรยายให้มีสีเดียวกันกับส่วนหัว โดยใช้แบบอักษร 18sp ขนาดเล็ก (อัลฟ่าเริ่มต้นคือ FF ทึบแสง คุณใส่ค่าอัลฟ่าได้หากไม่ได้ทําการเปลี่ยนแปลง)
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. ใน Codelab นี้ เป้าหมายคือการจัดสไตล์ให้แอปดูไม่เหมือนใครขณะดูเป็นมืออาชีพ แต่คุณสามารถจัดรูปแบบได้ตามต้องการ ลองใช้แอตทริบิวต์ต่อไปนี้สําหรับมุมมองข้อความ subtitle ใช้แท็บแสดงตัวอย่างเพื่อดูว่ารูปลักษณ์ของแอปเปลี่ยนแปลงไปอย่างไร จากนั้นนําแอตทริบิวต์เหล่านี้ออก
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. อย่าลืมเลิกทําแอตทริบิวต์ textAllCaps, textStyle และ background จากมุมมอง subtitle ก่อนดําเนินการต่อ
  2. เรียกใช้แอป แล้วแอปควรจะดูดีขึ้นอยู่แล้ว

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

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

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

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

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

  1. ในหน้าต่างทรัพยากร ให้ค้นหา lobster หรือเพียง lo
  2. ในผลการค้นหา ให้เลือก Lobster Two
  3. ทางขวามือด้านล่างชื่อแบบอักษร ให้เลือกปุ่มตัวเลือกสร้างแบบอักษรที่ดาวน์โหลดได้ คลิก OK
  4. เปิดไฟล์ Android Manifest
  5. บริเวณด้านล่างของไฟล์ Manifest ให้ค้นหาแท็ก <meta-data> ใหม่ที่มีแอตทริบิวต์ name และ resource ตั้งค่าเป็น "preloaded_fonts" แท็กนี้บอกบริการ Google Play ว่าแอปนี้ต้องการใช้แบบอักษรที่ดาวน์โหลดไว้ เมื่อแอปทํางานและขอแบบอักษร Lobster Two ผู้ให้บริการแบบอักษรจะดาวน์โหลดแบบอักษรจากอินเทอร์เน็ต หากแบบอักษรยังไม่พร้อมใช้งานในอุปกรณ์
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
  1. หาไฟล์ preloaded_fonts.xml ในโฟลเดอร์ res/values ซึ่งกําหนดอาร์เรย์ที่แสดงแบบอักษรที่ดาวน์โหลดได้ทั้งหมดสําหรับแอปนี้
  2. ในทํานองเดียวกัน ไฟล์ res/fonts/lobster_two.xml มีข้อมูลเกี่ยวกับแบบอักษร
  3. เปิด home_fragment.xml แล้วสังเกตในโค้ดและดูตัวอย่างว่าใช้แบบอักษร Lobster Two กับ title TextView จึงใช้กับชื่อ

  1. เปิด res/values/styles.xml และตรวจสอบธีม AppTheme ตามค่าเริ่มต้นที่สร้างขึ้นสําหรับโปรเจ็กต์ ซึ่งจะแสดงตามที่แสดงด้านล่าง หากต้องการใช้แบบอักษร Lobster Two ใหม่กับข้อความทั้งหมด คุณจะต้องอัปเดตธีมนี้
  2. สังเกตเห็นแอตทริบิวต์ parent ในแท็ก <style> แท็กรูปแบบทุกรายการสามารถระบุระดับบนสุดและรับค่าแอตทริบิวต์ระดับบนสุดทั้งหมด โค้ดจะระบุ 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>
  1. ในแบบอักษร 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>
  1. เรียกใช้แอปอีกครั้ง แบบอักษรใหม่จะมีผลกับข้อความทั้งหมด เปิดลิ้นชักการนําทางแล้วไปที่หน้าจออื่น คุณจะเห็นแบบอักษรนั้นใช้งานเช่นกัน

ขั้นตอนที่ 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"
  1. เรียกใช้แอปแล้วเห็นว่าแอตทริบิวต์ "ในเครื่อง" เป็นข้อมูลพร็อพเพอร์ตี้จะลบล้างธีม
  1. นําแอตทริบิวต์ 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 ดังนั้นการขยายสไตล์จึงเป็นการแก้ไขรูปแบบเริ่มต้น แทนที่จะเริ่มต้นใหม่

  1. ที่ด้านในสไตล์ใหม่ ให้กําหนด 2 รายการ ตั้ง textSize เป็น 24sp ในรายการเดียว ส่วนอีกรายการ ให้ตั้งค่า textColor ให้เป็นสีเทาเข้มเหมือนกับที่คุณใช้ก่อนหน้านี้ 
 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>
  1. กําหนดสไตล์อื่นสําหรับคําบรรยาย ตั้งชื่อว่าTextAppearance.Subtitle
  2. เนื่องจากความแตกต่างเดียวจาก TextAppearance.Title จะเป็นขนาดข้อความ ทําให้รูปแบบนี้เป็นรายการย่อยของ TextAppearance.Title
  3. ในขนาด Subtitle ให้ตั้งค่าขนาดข้อความเป็น 18sp รูปแบบที่สมบูรณ์มีดังนี้
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ขั้นตอนที่ 2: ใช้รูปแบบที่คุณสร้าง

  1. ใน home_fragment.xml ให้เพิ่ม TextAppearanceรูปแบบ Title ในมุมมองข้อความ title ลบแอตทริบิวต์ textSize และ textColor

    ธีมจะลบล้างการจัดรูปแบบ TextAppearance ที่คุณตั้งค่าไว้ (แผนภาพทรงพีระมิดที่ตอนต้นของ Codelab จะแสดงลําดับการใช้การจัดรูปแบบ) ใช้พร็อพเพอร์ตี้ textAppearance เพื่อใช้รูปแบบเป็น TextAppearance เพื่อให้แบบอักษรใน Theme ลบล้างสิ่งที่คุณตั้งไว้ที่นี่
<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"
  1. ให้เพิ่มรูปแบบ TextAppearance.Subtitle ในมุมมองข้อความ subtitle และลบแอตทริบิวต์ textSize และ textColor คุณต้องใช้รูปแบบนี้เป็น textAppearance ด้วย เพื่อให้แบบอักษรในชุดในธีมลบล้างสิ่งที่คุณตั้งไว้ที่นี่
<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"
  1. เรียกใช้แอปและจัดรูปแบบข้อความอย่างสม่ําเสมอ

โปรเจ็กต์ 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 มีเมตาแท็กข้อมูลเมตาสําหรับแบบอักษรที่โหลดล่วงหน้า

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

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

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

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

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

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

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

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

คำถามที่ 1

แท็กใดที่ใช้เพื่อกําหนดธีม

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

คําถามที่ 2

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

▢ กําหนดข้อจํากัดของข้อมูลพร็อพเพอร์ตี้

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

▢ รวมขนาดแบบอักษรในจํานวนการดู

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

คำถามที่ 3

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

▢ ธีมจะมีผลกับทั้งแอป แต่สามารถใช้รูปแบบกับมุมมองที่ต้องการได้

▢ ธีมต่างๆ รับจากธีมอื่นไม่ได้ แต่สไตล์รับค่ามาจากสไตล์อื่นๆ ได้

▢ รูปแบบไม่สามารถรับช่วงจากลักษณะอื่นได้ แต่ธีมจะสามารถสืบทอดจากธีมอื่นได้

▢ ธีมให้บริการโดยระบบของ Android ในขณะที่สไตล์จะกําหนดโดยนักพัฒนาซอฟต์แวร์

คำถามที่ 4

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

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

เริ่มบทเรียนถัดไป: 10.2: วัสดุก่อสร้าง ไดเจนต์ และสี

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