หลักพื้นฐานของ Android Kotlin 10.3: ออกแบบสำหรับทุกคน

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 ออกแบบเพื่อทุกคน

บทนำ

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

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

ในโค้ดแล็บนี้ คุณจะได้สำรวจตัวเลือกแต่ละรายการและเพิ่มการรองรับตัวเลือกเหล่านั้นลงในแอป GDG Finder

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ความแตกต่างหลักระหว่างภาษาที่อ่านจากซ้ายไปขวา (LTR) กับภาษาที่อ่านจากขวาไปซ้าย (RTL) คือทิศทางของเนื้อหาที่แสดง เมื่อเปลี่ยนทิศทาง UI จากซ้ายไปขวาเป็นขวาไปซ้าย (หรือในทางกลับกัน) มักจะเรียกว่าการมิเรอร์ การมิเรอร์จะส่งผลต่อหน้าจอส่วนใหญ่ รวมถึงข้อความ ไอคอนช่องข้อความ เลย์เอาต์ และไอคอนที่มีทิศทาง (เช่น ลูกศร) รายการอื่นๆ ที่ไม่ได้มิเรอร์ ได้แก่ ตัวเลข (นาฬิกา หมายเลขโทรศัพท์) ไอคอนที่ไม่มีทิศทาง (โหมดบนเครื่องบิน, Wi-Fi) ตัวควบคุมการเล่น รวมถึงแผนภูมิและกราฟส่วนใหญ่

ผู้คนมากกว่า 1 พันล้านคนทั่วโลกใช้ภาษาที่ใช้ทิศทางข้อความจากขวาไปซ้าย นักพัฒนาแอป Android อยู่ทั่วโลก ดังนั้นแอป GDG Finder จึงต้องรองรับภาษา RTL

ขั้นตอนที่ 1: เพิ่มการรองรับ RTL

ในขั้นตอนนี้ คุณจะทำให้แอป GDG Finder ทำงานกับภาษา RTL ได้

1. ดาวน์โหลดและเรียกใช้แอป GDGFinderMaterial ซึ่งเป็นแอปเริ่มต้นสำหรับ Codelab นี้ หรือดำเนินการต่อจากโค้ดสุดท้ายของ Codelab ก่อนหน้า
2. เปิดไฟล์ AndroidManifest.xml
3. ในส่วน <application> ให้เพิ่มโค้ดต่อไปนี้เพื่อระบุว่าแอปรองรับ RTL

<application
        ...
        android:supportsRtl="true">

4. เปิด activity_main.xml ในแท็บออกแบบ
5. จากเมนูแบบเลื่อนลงภาษาสำหรับการแสดงตัวอย่าง ให้เลือกแสดงตัวอย่างจากขวาไปซ้าย (หากไม่เห็นเมนูนี้ ให้ขยายบานหน้าต่างหรือปิดบานหน้าต่างแอตทริบิวต์เพื่อแสดงเมนู)

เคล็ดลับ: คุณไม่จำเป็นต้องเปลี่ยนภาษาในอุปกรณ์เพื่อตรวจสอบว่าแอปแสดงผลแบบ RTL อย่างไร

6. ในตัวอย่าง คุณจะเห็นว่าส่วนหัว "เครื่องมือค้นหา GDG" ย้ายไปทางขวาแล้ว และส่วนอื่นๆ ของหน้าจอยังคงเหมือนเดิม โดยรวมแล้วหน้าจอนี้ถือว่าใช้ได้ แต่การจัดแนวในมุมมองข้อความไม่ถูกต้องแล้ว เนื่องจากจัดแนวไปทางซ้ายแทนที่จะเป็นทางขวา

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

8. เรียกใช้แอปและยืนยันในอุปกรณ์ว่าหน้าจอหลักปรากฏเหมือนกับในตัวอย่าง โปรดสังเกตว่าตอนนี้ FAB เปลี่ยนไปอยู่ทางซ้ายแล้ว และเมนูแฮมเบอร์เกอร์ไปอยู่ทางขวา
9. ในแอป ให้เปิดลิ้นชักการนำทางแล้วไปที่หน้าจอค้นหา ดังที่แสดงด้านล่าง ไอคอนยังคงอยู่ทางด้านซ้ายและไม่มีข้อความปรากฏ ปรากฏว่าข้อความอยู่นอกหน้าจอทางด้านซ้ายของไอคอน เนื่องจากโค้ดใช้การอ้างอิงหน้าจอซ้าย/ขวาในพร็อพเพอร์ตี้ของมุมมองและข้อจํากัดของเลย์เอาต์

ขั้นตอนที่ 2: ใช้ "เริ่มต้น" และ "สิ้นสุด" แทน "ซ้าย" และ "ขวา"

"ซ้าย" และ "ขวา" บนหน้าจอ (เมื่อคุณหันหน้าเข้าหาหน้าจอ) จะไม่เปลี่ยนแปลง แม้ว่าทิศทางของข้อความจะเปลี่ยนไปก็ตาม เช่น layout_constraintLeft_toLeftOf จะจำกัดด้านซ้ายขององค์ประกอบไว้ที่ด้านซ้ายของหน้าจอเสมอ ในกรณีของแอป ข้อความจะอยู่นอกหน้าจอในภาษา RTL ดังที่แสดงในภาพหน้าจอด้านบน

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

1. Open list_item.xml
2. แทนที่การอ้างอิงถึง Left และ Right ด้วยการอ้างอิงถึง Start และ End

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. แทนที่ layout_marginLeft ของ ImageView ด้วย layout_marginStart ซึ่งจะย้ายขอบไปยังตำแหน่งที่ถูกต้องเพื่อย้ายไอคอนออกจากขอบของหน้าจอ

<ImageView
android:layout_marginStart="
?

4. เปิด fragment_gdg_list.xml ตรวจสอบรายชื่อ GDG ในแผงตัวอย่าง โปรดสังเกตว่าไอคอนยังคงชี้ไปในทิศทางที่ไม่ถูกต้องเนื่องจากมีการกลับด้าน (หากไอคอนไม่ได้กลับด้าน ให้ตรวจสอบว่าคุณยังคงดูตัวอย่างจากขวาไปซ้าย) ตามหลักเกณฑ์ของ Material Design ไอคอนไม่ควรเป็นภาพสะท้อน
5. เปิด res/drawable/ic_gdg.xml
6. ในโค้ด XML บรรทัดแรก ให้ค้นหาและลบ android:autoMirrored="true" เพื่อปิดใช้การมิเรอร์
7. ตรวจสอบตัวอย่างหรือเรียกใช้แอปอีกครั้งแล้วเปิดหน้าจอค้นหา GDG ตอนนี้เลย์เอาต์น่าจะได้รับการแก้ไขแล้ว

เคล็ดลับ: Android Studio จะไฮไลต์เคล็ดลับเป็นสีเหลืองเพื่อกระตุ้นให้ใช้แอตทริบิวต์เริ่มต้นและสิ้นสุด

ใช้การค้นหาและแทนที่โดยคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เพื่อค้นหาอินสแตนซ์ทั้งหมดของ Left และ Right ในเลย์เอาต์ XML

ขั้นตอนที่ 3: ให้ Android Studio จัดการแทนคุณ

ในแบบฝึกหัดก่อนหน้านี้ คุณได้เริ่มขั้นตอนแรกในการรองรับภาษา RTL โชคดีที่ Android Studio สามารถสแกนแอปและตั้งค่าพื้นฐานหลายอย่างให้คุณได้

1. ใน list_item.xml ใน TextView ให้เปลี่ยน layout_marginStart กลับเป็น layout_marginLeft เพื่อให้เครื่องสแกนมีสิ่งที่ค้นหา

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. ใน Android Studio ให้เลือกจัดระเบียบใหม่ > เพิ่มการรองรับ RTL หากเป็นไปได้ แล้วเลือกช่องเพื่ออัปเดตไฟล์ Manifest และไฟล์เลย์เอาต์ให้ใช้พร็อพเพอร์ตี้เริ่มต้นและสิ้นสุด

3. ในบานหน้าต่างตัวอย่างการปรับโครงสร้าง ให้ค้นหาโฟลเดอร์ app แล้วขยายจนกว่าจะเปิดรายละเอียดทั้งหมด
4. ในโฟลเดอร์แอป คุณจะเห็นว่า layout_marginLeft ที่เพิ่งเปลี่ยนไปจะแสดงเป็นโค้ดที่ต้องปรับโครงสร้าง

5. โปรดทราบว่าตัวอย่างจะแสดงไฟล์ระบบและไฟล์ไลบรารีด้วย คลิกขวาที่ layout และ layout-watch-v20 รวมถึงโฟลเดอร์อื่นๆ ที่ไม่ได้อยู่ใน app แล้วเลือกยกเว้นจากเมนูบริบท

6. มาเริ่มทำการรีแฟกเตอร์กันเลย (หากคุณได้รับป๊อปอัปเกี่ยวกับไฟล์ระบบ โปรดตรวจสอบว่าคุณได้ยกเว้นโฟลเดอร์ทั้งหมดที่ไม่ได้เป็นส่วนหนึ่งของโค้ดแอป)

7. โปรดทราบว่า layout_marginLeft เปลี่ยนกลับเป็น layout_marginStart แล้ว

หมายเหตุ: View คอมโพเนนต์บางอย่างต้องมีการปรับแต่งเพิ่มเติมเพื่อให้ทำงานได้อย่างถูกต้องเมื่อใช้กับ RTL คุณสามารถใช้ API 4 รายการต่อไปนี้เพื่อควบคุม UI ได้อย่างแม่นยำยิ่งขึ้น

• android:layoutDirection เพื่อกำหนดทิศทางของเลย์เอาต์คอมโพเนนต์
• android:textDirection เพื่อตั้งค่าทิศทางของข้อความในคอมโพเนนต์
• android:textAlignment เพื่อตั้งค่าการจัดแนวข้อความของคอมโพเนนต์
• getLayoutDirectionFromLocale() เป็นวิธีรับภาษาที่ระบุทิศทางโดยอัตโนมัติ

ขั้นตอนที่ 3: สำรวจโฟลเดอร์สำหรับภาษา

ที่ผ่านมา คุณเพียงแค่เปลี่ยนทิศทางของภาษาเริ่มต้นที่ใช้สำหรับแอปเท่านั้น สำหรับแอปที่ใช้งานจริง คุณจะต้องส่งไฟล์ strings.xml ไปยังนักแปลเพื่อแปลเป็นภาษาใหม่ สำหรับ Codelab นี้ แอปมีไฟล์ strings.xml ในภาษาสเปน (เราใช้ Google แปลภาษาเพื่อสร้างคำแปล ดังนั้นคำแปลจึงอาจไม่สมบูรณ์)

1. ใน Android Studio ให้เปลี่ยนมุมมองโปรเจ็กต์เป็นไฟล์โปรเจ็กต์
2. ขยายโฟลเดอร์ res แล้วสังเกตโฟลเดอร์สำหรับ res/values และ res/values-es "es" ในชื่อโฟลเดอร์คือรหัสภาษาสำหรับภาษาสเปน โฟลเดอร์ values-"รหัสภาษา" มีค่าสำหรับแต่ละภาษาที่รองรับ โฟลเดอร์ values ที่ไม่มีส่วนขยายจะมีทรัพยากรเริ่มต้นที่ใช้ในกรณีอื่นๆ

3. ใน values-es ให้เปิด strings.xml แล้วสังเกตว่าสตริงทั้งหมดเป็นภาษาสเปน
4. ใน Android Studio ให้เปิด activity_main.xml ในแท็บการออกแบบ
5. เลือกสเปนในเมนูแบบเลื่อนลงภาษาสำหรับตัวอย่าง ตอนนี้ข้อความควรเป็นภาษาสเปนแล้ว

6. [ไม่บังคับ] หากคุณเชี่ยวชาญภาษา RTL ให้สร้างโฟลเดอร์ values และ strings.xml ในภาษานั้น แล้วทดสอบว่าโฟลเดอร์และไฟล์ดังกล่าวปรากฏในอุปกรณ์ของคุณอย่างไร
7. [ไม่บังคับ] เปลี่ยนการตั้งค่าภาษาในอุปกรณ์แล้วเรียกใช้แอป โปรดอย่าเปลี่ยนอุปกรณ์เป็นภาษาที่คุณอ่านไม่ออก เพราะจะทำให้การเลิกทำเป็นเรื่องยาก

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

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

ขั้นตอนที่ 1: ติดตั้งและเรียกใช้เครื่องตรวจการเข้าถึง

1. เปิด Play Store และลงชื่อเข้าใช้หากจำเป็น คุณทำได้ในอุปกรณ์จริงหรือโปรแกรมจำลอง Codelab นี้ใช้โปรแกรมจำลอง
   

หมายเหตุ: หากไม่มี Play Store ในโปรแกรมจำลอง คุณอาจต้องสร้างโปรแกรมจำลองใหม่ ตรวจสอบว่าคุณเลือกตัวเลือกที่เปิดใช้ไอคอน "Play Store" เมื่อสร้างโปรแกรมจำลอง

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

สำคัญ: คุณข้ามการตั้งค่าตัวเลือกการเรียกเก็บเงินได้

2. ค้นหาเครื่องตรวจการเข้าถึงโดย Google LLC ใน Play Store โปรดตรวจสอบว่าคุณดาวน์โหลดแอปที่ถูกต้องซึ่งออกโดย Google เนื่องจากแอปสแกนต้องใช้สิทธิ์จำนวนมาก

3. ติดตั้งเครื่องสแกนในโปรแกรมจำลอง
4. เมื่อติดตั้งแล้ว ให้คลิกเปิด
5. คลิกเริ่มต้น
6. คลิกตกลงเพื่อเริ่มการตั้งค่าเครื่องตรวจการเข้าถึงในการตั้งค่า

7. คลิกเครื่องตรวจการเข้าถึงเพื่อไปที่การตั้งค่าการช่วยเหลือพิเศษของอุปกรณ์

8. คลิกใช้บริการเพื่อเปิดใช้

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

หากต้องการปิดเครื่องตรวจ ให้ไปที่การตั้งค่าแล้วปิดเครื่องตรวจการเข้าถึง

11. เปิดหรือเรียกใช้แอป
12. คลิกปุ่มสีน้ำเงินและยอมรับคำเตือนและสิทธิ์ด้านความปลอดภัยเพิ่มเติม

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

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

สำคัญ: ก่อนเปิดใช้สิทธิ์นี้ โปรดตรวจสอบอีกครั้งว่าแอปที่คุณติดตั้งคือ Accessibility Scanner โดย Google LLC

13. คลิกปุ่มสีน้ำเงินแล้วรอให้การวิเคราะห์เสร็จสมบูรณ์ คุณจะเห็นลักษณะคล้ายกับภาพหน้าจอด้านล่าง โดยมีชื่อและ FAB อยู่ในกรอบสีแดง ซึ่งแสดงว่ามีคำแนะนำ 2 รายการสำหรับการปรับปรุงการช่วยเหลือพิเศษในหน้าจอนี้

14. คลิกที่ช่องรอบ GDG Finder การดำเนินการนี้จะเปิดแผงที่มีข้อมูลเพิ่มเติม ดังที่แสดงด้านล่าง ซึ่งระบุปัญหาเกี่ยวกับคอนทราสต์ของรูปภาพ
15. ขยายข้อมูล คอนทราสต์ของรูปภาพ แล้วเครื่องมือจะแนะนำวิธีแก้ไข
16. คลิกลูกศรทางด้านขวาเพื่อดูข้อมูลของรายการถัดไป

17. ในแอป ให้ไปที่หน้าจอสมัคร GDG แล้วสแกนด้วยแอปเครื่องตรวจการเข้าถึง ซึ่งจะให้คำแนะนำหลายอย่างดังที่แสดงด้านล่างทางซ้าย 12 รายการ แต่ก็มีบางรายการที่ซ้ำกันสำหรับสินค้าที่คล้ายกัน
18. คลิกไอคอน "กอง" ในแถบเครื่องมือด้านล่างเพื่อดูรายการคำแนะนำทั้งหมด ดังที่แสดงด้านล่างในภาพหน้าจอด้านขวา คุณจะแก้ไขปัญหาเหล่านี้ทั้งหมดใน Codelab นี้

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

ปรากฏว่า TalkBack ไม่ได้ใช้เฉพาะผู้ที่ตาบอดเท่านั้น แต่ยังใช้โดยผู้ที่มีความบกพร่องทางสายตาในรูปแบบต่างๆ ด้วย หรือแม้แต่ผู้ที่ต้องการพักสายตา

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

ขั้นตอนที่ 1: ติดตั้งและเรียกใช้ชุดเครื่องมือการช่วยเหลือพิเศษ

TalkBack จะติดตั้งมาล่วงหน้าในอุปกรณ์จริงหลายเครื่อง แต่ในโปรแกรมจำลอง คุณต้องติดตั้งเอง

1. เปิด Play Store
2. ค้นหา Accessibility Suite ตรวจสอบว่าเป็นแอปที่ถูกต้องของ Google
3. หากยังไม่ได้ติดตั้ง ให้ติดตั้งชุดเครื่องมือช่วยการเข้าถึง
4. หากต้องการเปิดใช้ TalkBack ในอุปกรณ์ ให้ไปที่การตั้งค่า > การช่วยเหลือพิเศษ แล้วเปิด TalkBack โดยเลือกใช้บริการ เช่นเดียวกับเครื่องตรวจการเข้าถึง TalkBack ต้องใช้สิทธิ์เพื่ออ่านเนื้อหาบนหน้าจอ เมื่อยอมรับคำขอสิทธิ์แล้ว TalkBack จะต้อนรับคุณด้วยรายการบทแนะนำที่จะสอนวิธีใช้ TalkBack อย่างมีประสิทธิภาพ
5. หยุดที่นี่และดูบทแนะนำ หากไม่มีเหตุผลอื่นก็เพื่อเรียนรู้วิธีปิด TalkBack อีกครั้งเมื่อคุณทำเสร็จแล้ว
6. หากต้องการออกจากบทแนะนำ ให้คลิกปุ่มย้อนกลับเพื่อเลือก แล้วแตะสองครั้งที่ใดก็ได้บนหน้าจอ

เคล็ดลับ: หากไม่ได้ยินอะไรเลย ให้เปิดระดับเสียง

เคล็ดลับ: หากต้องการคลิกรายการ ให้แตะสองครั้ง หากต้องการเลื่อนหรือลาก ให้แตะสองครั้งแล้วลาก

7. ดูวิธีใช้แอป GDG Finder กับ TalkBack สังเกตตำแหน่งที่ TalkBack ไม่ได้ให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับหน้าจอหรือตัวควบคุม คุณจะแก้ไขปัญหานี้ในการฝึกครั้งถัดไป

ขั้นตอนที่ 2: เพิ่มคำอธิบายเนื้อหา

ตัวบอกเนื้อหาคือป้ายกำกับที่สื่อความหมายซึ่งอธิบายความหมายของยอดดู ยอดดูส่วนใหญ่ควรมีคำอธิบายเนื้อหา

1. เมื่อแอป GDG Finder ทำงานและเปิดใช้ Talkback แล้ว ให้ไปที่หน้าจอสมัครเป็นผู้จัด GDG
2. แตะรูปภาพหลัก ... แต่ไม่มีอะไรเกิดขึ้น
3. เปิด add_gdg_fragment.xml
4. ใน ImageView ให้เพิ่มแอตทริบิวต์คำอธิบายเนื้อหาตามที่แสดงด้านล่าง ระบบจะระบุสตริง stage_image_description ให้คุณใน strings.xml

android:contentDescription="@string/stage_image_description"

5. เรียกใช้แอป
6. ไปที่สมัครเข้าร่วมเพื่อเปิดตัว GDG แล้วคลิกรูปภาพ ตอนนี้คุณควรได้ยินคำอธิบายสั้นๆ ของรูปภาพ
7. [ไม่บังคับ] เพิ่มคำอธิบายเนื้อหาสำหรับรูปภาพอื่นๆ ในแอปนี้ ในแอปเวอร์ชันที่ใช้งานจริง รูปภาพทั้งหมดต้องมีคำอธิบายเนื้อหา

ขั้นตอนที่ 3: เพิ่มคำแนะนำในช่องข้อความที่แก้ไขได้

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

1. ยังอยู่ใน add_gdg_fragment.xml
2. เพิ่มคำอธิบายและคำแนะนำเกี่ยวกับเนื้อหาโดยใช้โค้ดด้านล่างเป็นแนวทาง

เพิ่มไปยัง textViewIntro

android:contentDescription="@string/add_gdg"

เพิ่มข้อความต่อไปนี้ลงในข้อความที่แก้ไขตามลำดับ

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. เพิ่มคำอธิบายเนื้อหาใน labelTextWhy

android:contentDescription="@string/motivation" 

4. เพิ่มคำแนะนำใน EditTextWhy เมื่อติดป้ายกำกับช่องแก้ไขแล้ว ให้เพิ่มคำอธิบายเนื้อหาลงในป้ายกำกับและเพิ่มคำแนะนำลงในช่องด้วย

android:hint="@string/enter_motivation"

5. เพิ่มคำอธิบายเนื้อหาสำหรับปุ่มส่ง ปุ่มทั้งหมดต้องมีคำอธิบายสิ่งที่เกิดขึ้นหากกดปุ่ม

android:contentDescription="@string/submit_button_description"

6. เรียกใช้แอปโดยเปิดใช้ Talkback แล้วกรอกแบบฟอร์มเพื่อสมัครเป็น GDG

ขั้นตอนที่ 4: สร้างกลุ่มเนื้อหา

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

หากต้องการจัดกลุ่มคอมโพเนนต์ UI ให้รวมไว้ใน ViewGroup เช่น LinearLayout ในแอป GDG Finder องค์ประกอบ labelTextWhy และ editTextWhy เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการจัดกลุ่มเนื่องจากมีความหมายที่เชื่อมโยงกัน

1. เปิด add_gdg_fragment.xml
2. ใส่ LinearLayout รอบ LabelTextWhy และ EditTextWhy เพื่อสร้างกลุ่มเนื้อหา คัดลอกและวางโค้ดด้านล่าง LinearLayout นี้มีสไตล์บางอย่างที่คุณต้องการอยู่แล้ว (ตรวจสอบว่า button อยู่นอก LinearLayout)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. เลือกโค้ด > จัดรูปแบบโค้ดเพื่อเยื้องโค้ดทั้งหมดอย่างถูกต้อง
4. นำขอบเลย์เอาต์ทั้งหมดออกจาก labelTextWhy และ editTextWhy
5. ใน labelTextWhy ให้เปลี่ยนข้อจำกัด layout_constraintTop_toTopOf เป็น contentGroup

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. ใน editTextWhy ให้เปลี่ยนข้อจำกัด layout_constraintBottom_toBottomOf เป็น contentGroup

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. จำกัด EditTextRegion และ Button ให้เป็น contentGroup เพื่อกำจัดข้อผิดพลาด

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. เพิ่มระยะขอบใน LinearLayout ไม่บังคับ: แยกส่วนต่างนี้เป็นมิติข้อมูล

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

หากต้องการความช่วยเหลือ ให้ตรวจสอบโค้ดกับadd_gdg_fragment.xmlในโค้ดโซลูชัน

9. เรียกใช้แอปและสำรวจหน้าจอสมัครเข้าร่วม GDG ด้วย TalkBack

ขั้นตอนที่ 5: เพิ่มภูมิภาคแบบสด

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

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

1. เปิด add_gdg_fragment.xml
2. เปลี่ยนการกําหนดข้อความของปุ่มเป็นส่งโดยใช้ทรัพยากรสตริง submit ที่ให้ไว้

android:text="@string/submit"

3. เพิ่มส่วนที่อัปเดตแบบเรียลไทม์ลงในปุ่มโดยการตั้งค่าแอตทริบิวต์ android:accessibilityLiveRegion ขณะพิมพ์ คุณจะมีตัวเลือกหลายรายการสำหรับค่าของแอตทริบิวต์ คุณเลือกได้ว่าจะขัดจังหวะผู้ใช้หรือไม่ ทั้งนี้ขึ้นอยู่กับความสำคัญของการเปลี่ยนแปลง เมื่อใช้ค่า "assertive" บริการการช่วยเหลือพิเศษจะขัดจังหวะการพูดที่กำลังดำเนินอยู่เพื่อประกาศการเปลี่ยนแปลงในมุมมองนี้ทันที หากตั้งค่าเป็น "none" จะไม่มีการประกาศการเปลี่ยนแปลง หากตั้งค่าเป็น "สุภาพ" บริการการช่วยเหลือพิเศษจะประกาศการเปลี่ยนแปลง แต่จะรอตามลำดับ ตั้งค่าเป็น "สุภาพ"

android:accessibilityLiveRegion="polite"

4. ในแพ็กเกจ add ให้เปิด AddGdgFragment.kt
5. ใน showSnackBarEvent Observer หลังจากแสดง SnackBar เสร็จแล้ว ให้ตั้งค่าคำอธิบายเนื้อหาและข้อความใหม่สำหรับปุ่ม

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. เรียกใช้แอปแล้วคลิกปุ่ม ขออภัย ปุ่มและแบบอักษรมีขนาดเล็กเกินไป

ขั้นตอนที่ 6: แก้ไขสไตล์ปุ่ม

1. ใน add_gdg_fragment.xml ให้เปลี่ยน width และ height ของปุ่มเป็น wrap_content เพื่อให้ป้ายกำกับทั้งหมดปรากฏและปุ่มมีขนาดที่เหมาะสม

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. ลบแอตทริบิวต์ backgroundTint, textColor และ textSize ออกจากปุ่มเพื่อให้แอปใช้การจัดรูปแบบธีมที่ดีกว่า
3. ลบแอตทริบิวต์ textColor ออกจาก textViewIntro สีธีมควรมีคอนทราสต์ที่ดี
4. เรียกใช้แอป คุณจะเห็นปุ่มส่งที่ใช้งานได้ง่ายขึ้นมาก คลิกส่ง แล้วสังเกตว่าสถานะเปลี่ยนเป็นเสร็จสิ้น

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

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

ชิปใช้ Drawable Drawable ของ Android ช่วยให้คุณวาดรูปภาพ รูปร่าง และภาพเคลื่อนไหวบนหน้าจอได้ โดยอาจมีขนาดคงที่หรือปรับขนาดแบบไดนามิกก็ได้ คุณสามารถใช้รูปภาพเป็น Drawable ได้ เช่น รูปภาพในแอป GDG และใช้ภาพวาดเวกเตอร์เพื่อวาดสิ่งที่คุณจินตนาการได้ นอกจากนี้ยังมี Drawable ที่ปรับขนาดได้ซึ่งเรียกว่า 9-patch Drawable ซึ่งไม่ได้กล่าวถึงใน Codelab นี้ โลโก้ GDG ใน drawable/ic_gdg.xml เป็น Drawable อีกรายการหนึ่ง

Drawable ไม่ใช่วิว คุณจึงใส่ Drawable ไว้ใน ConstraintLayout โดยตรงไม่ได้ แต่ต้องใส่ไว้ใน ImageView นอกจากนี้ คุณยังใช้ Drawable เพื่อระบุพื้นหลังสำหรับ TextView หรือปุ่มได้ และพื้นหลังจะวาดอยู่ด้านหลังข้อความ

ขั้นตอนที่ 1: เพิ่มชิปไปยังรายการ GDG

ชิปที่เลือกด้านล่างใช้ Drawable 3 รายการ พื้นหลังและเครื่องหมายถูกเป็น Drawable การแตะชิปจะทำให้เกิดเอฟเฟกต์ระลอก ซึ่งทำได้ด้วย RippleDrawable พิเศษที่แสดงเอฟเฟกต์ระลอกเพื่อตอบสนองต่อการเปลี่ยนแปลงสถานะ

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

1. เปิด fragment_gdg_list.xml
2. สร้าง com.google.android.material.chip.ChipGroup ภายใน HorizontalScrollView. ตั้งค่าพร็อพเพอร์ตี้ singleLine เป็น true เพื่อให้ชิปทั้งหมดเรียงกันในบรรทัดที่เลื่อนได้ในแนวนอน ตั้งค่าพร็อพเพอร์ตี้ singleSelection เป็น true เพื่อให้เลือกชิปในกลุ่มได้ครั้งละ 1 รายการเท่านั้น รหัสคือ

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. ในโฟลเดอร์เลย์เอาต์ ให้สร้างไฟล์ทรัพยากรเลย์เอาต์ใหม่ชื่อ region.xml เพื่อกำหนดเลย์เอาต์สำหรับ Chip รายการ
4. ใน region.xml ให้แทนที่โค้ดทั้งหมดด้วยเลย์เอาต์สำหรับ Chip รายการเดียวตามที่ระบุไว้ด้านล่าง โปรดทราบว่า Chip เป็นคอมโพเนนต์ของ Material นอกจากนี้ โปรดสังเกตว่าคุณจะได้รับเครื่องหมายถูกเมื่อตั้งค่าพร็อพเพอร์ตี้ app:checkedIconVisible คุณจะได้รับข้อผิดพลาดสำหรับสี selected_highlight ที่ขาดหายไป

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        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="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. หากต้องการสร้างสี selected_highlight ที่ขาดหายไป ให้วางเคอร์เซอร์บน selected_highlight เรียกเมนูความตั้งใจขึ้นมา แล้วสร้างทรัพยากรสีสำหรับไฮไลต์ที่เลือก ตัวเลือกเริ่มต้นก็ใช้ได้ เพียงคลิกตกลง ระบบจะสร้างไฟล์ในโฟลเดอร์ res/color
6. เปิด res/color/selected_highlight.xml ในรายการสถานะสีนี้ ซึ่งเข้ารหัสเป็น <selector> คุณสามารถระบุสีที่แตกต่างกันสำหรับสถานะต่างๆ ได้ ระบบจะเข้ารหัสแต่ละสถานะและสีที่เกี่ยวข้องเป็น <item> ดูข้อมูลเพิ่มเติมเกี่ยวกับสีเหล่านี้ได้ที่การกำหนดธีมสี

7. ภายใน <selector> ให้เพิ่มรายการที่มีสีเริ่มต้น colorOnSurface ลงในรายการสถานะ ในรายการรัฐ สิ่งสำคัญคือต้องครอบคลุมทุกรัฐเสมอ วิธีหนึ่งในการทำเช่นนี้คือการกำหนดสีเริ่มต้น

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. เหนือสีเริ่มต้น ให้เพิ่ม item ที่มีสี colorPrimaryVariant และจำกัดการใช้งานเมื่อสถานะที่เลือกเป็น true ระบบจะประมวลผลรายการสถานะจากบนลงล่าง เช่นเดียวกับคำสั่ง Case หากไม่มีสถานะใดตรงกัน ระบบจะใช้สถานะเริ่มต้น

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

ขั้นตอนที่ 2: แสดงแถวชิป

แอป GDG จะสร้างรายการชิปที่แสดงภูมิภาคที่มี GDG เมื่อเลือกชิปแล้ว แอปจะกรองผลลัพธ์เพื่อแสดงเฉพาะผลลัพธ์ GDG สำหรับภูมิภาคนั้น

หมายเหตุ: วิธีสร้างรายการนี้และวิธีกรองผลลัพธ์ไม่ได้เป็นส่วนหนึ่งของโค้ดแล็บนี้ หากต้องการทราบวิธีรับรายชื่อ GDG และวิธีใช้การกรอง โปรดดูไฟล์ในแพ็กเกจ search และ network โดยเฉพาะอย่างยิ่ง ให้ตรวจสอบGdgListViewModel

1. ในแพ็กเกจ search ให้เปิด GdgListFragment.kt
2. ใน onCreateView() ให้เพิ่ม Observer ใน viewModel.regionList และแทนที่ onChanged() เหนือคำสั่ง return เมื่อรายการภูมิภาคที่ระบุโดยโมเดลมุมมองเปลี่ยนแปลง คุณจะต้องสร้างชิปใหม่ โปรดเพิ่มข้อความเพื่อส่งคืนทันทีหาก data ที่ระบุเป็น null

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. ใน onChanged() ใต้การทดสอบค่าว่าง ให้กําหนด binding.regionList ให้กับตัวแปรใหม่ที่ชื่อ chipGroup เพื่อแคช regionList

val chipGroup = binding.regionList

4. สร้าง layoutInflator ใหม่สำหรับการพองชิปจาก chipGroup.context ที่ด้านล่าง

val inflator = LayoutInflater.from(chipGroup.context)

5. ล้างและสร้างโปรเจ็กต์ใหม่เพื่อกำจัดข้อผิดพลาดในการเชื่อมโยงข้อมูล

ตอนนี้คุณสามารถสร้างชิปจริงใต้ตัวขยายได้แล้ว โดยสร้างชิป 1 ตัวสำหรับแต่ละภูมิภาคใน regionList

6. สร้างตัวแปร children เพื่อเก็บชิปทั้งหมด กำหนดฟังก์ชันการแมปใน data ที่ส่งเข้ามาเพื่อสร้างและแสดงผลชิปแต่ละรายการ

val children = data.map {} 

7. ใน Lambda ของแผนที่ ให้สร้างและขยายชิปสำหรับแต่ละ regionName โค้ดที่เสร็จสมบูรณ์แล้วอยู่ด้านล่าง

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. ภายใน Lambda ให้เพิ่ม Listener การคลิกก่อนที่จะส่งคืน chip เมื่อคลิก chip ให้ตั้งค่าสถานะเป็น checked เรียกใช้ onFilterChanged() ใน viewModel ซึ่งจะทริกเกอร์ลําดับเหตุการณ์ที่ดึงผลลัพธ์สําหรับตัวกรองนี้

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. ที่ส่วนท้ายของ Lambda ให้นำมุมมองปัจจุบันทั้งหมดออกจาก chipGroup แล้วเพิ่มชิปทั้งหมดจาก children ไปยัง chipGroup (คุณอัปเดตชิปไม่ได้ จึงต้องนำเนื้อหาของ chipGroup ออกแล้วสร้างใหม่)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Observer ที่เสร็จสมบูรณ์แล้วควรมีลักษณะดังนี้

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. เรียกใช้แอปและค้นหา GDGS เพื่อเปิดหน้าจอค้นหาเพื่อใช้ชิปใหม่ เมื่อคลิปชิปแต่ละรายการ แอปจะแสดงกลุ่มตัวกรองด้านล่าง

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

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

ขั้นตอนที่ 1: เปิดใช้โหมดกลางคืน

หากต้องการให้แอปมีธีมมืด คุณต้องเปลี่ยนธีมจากธีม Light เป็นธีมที่ชื่อ DayNight DayNight ธีมจะปรากฏเป็นสีอ่อนหรือสีเข้ม ขึ้นอยู่กับโหมด

1. ใน styles.xml, ให้เปลี่ยนธีมหลัก AppTheme จาก Light เป็น DayNight

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. ในเมธอดของ MainActivityonCreate() ให้เรียกใช้ AppCompatDelegate.setDefaultNightMode() เพื่อเปิดธีมมืดโดยอัตโนมัติ

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. เรียกใช้แอปและตรวจสอบว่าแอปเปลี่ยนเป็นธีมมืดแล้ว

ขั้นตอนที่ 2: สร้างชุดสีของดาร์กธีมของคุณเอง

หากต้องการปรับแต่งธีมมืด ให้สร้างโฟลเดอร์ที่มีตัวระบุ -night เพื่อให้ธีมมืดใช้งาน เช่น คุณสามารถใช้สีที่เฉพาะเจาะจงในโหมดกลางคืนได้โดยสร้างโฟลเดอร์ชื่อ values-night

1. ไปที่เครื่องมือตัวเลือกสีของ material.io แล้วสร้างชุดสีสำหรับธีมกลางคืน เช่น คุณอาจอิงตามสีน้ำเงินเข้ม
2. สร้างและดาวน์โหลดไฟล์ colors.xml
3. สลับไปที่มุมมองไฟล์โปรเจ็กต์เพื่อแสดงรายการโฟลเดอร์ทั้งหมดในโปรเจ็กต์
4. ค้นหาโฟลเดอร์ res แล้วขยายโฟลเดอร์
5. สร้างโฟลเดอร์ทรัพยากร res/values-night
6. เพิ่มไฟล์ colors.xml ใหม่ลงในโฟลเดอร์ทรัพยากร res/values-night
7. เรียกใช้แอปโดยยังคงเปิดใช้โหมดกลางคืนอยู่ และแอปควรใช้สีใหม่ที่คุณกำหนดไว้สำหรับ res/values-night โปรดสังเกตว่าชิปใช้สีรองใหม่

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

รองรับภาษา RTL

• ในไฟล์ Manifest ของ Android ให้ตั้งค่า android:supportsRtl="true"
• คุณดูตัวอย่าง RTL ในโปรแกรมจำลอง และใช้ภาษาของคุณเองเพื่อตรวจสอบเลย์เอาต์หน้าจอได้ เปิดการตั้งค่าในอุปกรณ์หรือโปรแกรมจำลอง แล้วเลือกบังคับใช้เลย์เอาต์ RTL ในตัวเลือกสำหรับนักพัฒนาแอป
• แทนที่การอ้างอิงถึง Left และ Right ด้วยการอ้างอิงถึง Start และ End
• ปิดใช้การมิเรอร์สำหรับ Drawable โดยลบ android:autoMirrored="true"
• เลือกจัดระเบียบใหม่ > เพิ่มการรองรับ RTL หากเป็นไปได้ เพื่อให้ Android Studio ทำงานให้คุณ
• ใช้โฟลเดอร์ values-"รหัสภาษา" เพื่อจัดเก็บทรัพยากรเฉพาะภาษา

สแกนเพื่อการช่วยเหลือพิเศษ

• ใน Play Store ให้ดาวน์โหลดเครื่องตรวจการเข้าถึงโดย Google LLC แล้วเรียกใช้เพื่อสแกนหาองค์ประกอบบนหน้าจอที่ต้องปรับปรุง

ออกแบบเพื่อ TalkBack ด้วยคำอธิบายเนื้อหา

• ติดตั้ง ชุดเครื่องมือช่วยเหลือพิเศษใน Android ของ Google ซึ่งรวมถึง TalkBack
• เพิ่มคำอธิบายเนื้อหาให้กับองค์ประกอบ UI ทั้งหมด เช่น
  android:contentDescription="@string/stage_image_description"
• สำหรับองค์ประกอบที่แก้ไขได้ เช่น EditText ให้ใช้แอตทริบิวต์ android:hint ใน XML เพื่อให้คำแนะนำแก่ผู้ใช้เกี่ยวกับสิ่งที่ควรพิมพ์
• สร้างกลุ่มเนื้อหาโดยการรวมองค์ประกอบที่เกี่ยวข้องไว้ในกลุ่มมุมมอง
• สร้างรีเจียนแบบสดเพื่อให้ความคิดเห็นเพิ่มเติมแก่ผู้ใช้ด้วย android:accessibilityLiveRegion

ใช้ชิปเพื่อใช้ตัวกรอง

• ชิปคือองค์ประกอบขนาดกะทัดรัดที่แสดงแอตทริบิวต์ ข้อความ เอนทิตี หรือการทำงาน
• หากต้องการสร้างกลุ่มชิป ให้ใช้ com.google.android.material.chip.ChipGroup
• กำหนดเลย์เอาต์สำหรับ com.google.android.material.chip.Chip รายการเดียว
• หากต้องการให้ชิปเปลี่ยนสี ให้ระบุรายการสถานะสีเป็น <selector> ที่มีสีแบบมีสถานะ:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• เชื่อมโยงชิปกับข้อมูลแบบเรียลไทม์โดยเพิ่ม Observer ลงในข้อมูลใน ViewModel
• หากต้องการแสดงชิป ให้สร้าง Inflator สำหรับกลุ่มชิป
  LayoutInflater.from(chipGroup.context)
• สร้างชิป เพิ่มเครื่องมือฟังการคลิกที่ทริกเกอร์การดำเนินการที่ต้องการ และเพิ่มชิปลงในกลุ่มชิป

รองรับโหมดมืด

• ใช้ DayNight AppTheme เพื่อรองรับโหมดมืด
• คุณตั้งค่าโหมดมืดโดยใช้โปรแกรมได้ดังนี้
  AppCompatDelegate.setDefaultNightMode()
• สร้างโฟลเดอร์ทรัพยากร res/values-night เพื่อระบุสีและค่าที่กำหนดเองสำหรับดาร์กโหมด

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

• LayoutDirection (RTL)
• การอ่านจากขวาไปซ้ายและจากซ้ายไปขวา
• เริ่มต้นใช้งานเครื่องตรวจการเข้าถึง
• TalkBack
• ท่าทางสัมผัสของ TalkBack
• เอกสารภาพรวมของ Drawable
• ตัวบอกเนื้อหา
• การจัดกลุ่มเนื้อหา
• ขอบเขตแบบสด
• ภาพวาด NinePatch
• เครื่องมือวาด 9-patch
• ชิป
• ChipGroup
• ธีมมืด
• การกำหนดธีมสี
• เครื่องมือสี
• สร้างภาพเคลื่อนไหวของกราฟิกที่ถอนออกได้

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

• การพัฒนาแอป Android โดยใช้ Kotlin (หลักสูตร Udacity)
• Kotlin Bootcamp สำหรับโปรแกรมเมอร์ (หลักสูตร Udacity)
• Codelab หลักสูตรติวเข้ม Kotlin สำหรับโปรแกรมเมอร์

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

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

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

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

คำถามที่ 1

ข้อใดต่อไปนี้เป็นข้อบังคับสำหรับการรองรับภาษา RTL

▢ แทนที่ Left และ Right ในพร็อพเพอร์ตี้ด้วย Start และ End

▢ เปลี่ยนเป็นภาษา RTL

▢ ตรวจสอบว่าไอคอนทั้งหมดใช้ android:autoMirrored="true"

▢ ระบุคำอธิบายเนื้อหา

คำถามที่ 2

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

▢ TalkBack

▢ เครื่องตรวจการเข้าถึง

▢ ใน Android Studio ให้ไปที่ปรับโครงสร้าง > เพิ่มการรองรับ RTL หากเป็นไปได้

▢ Lint

คำถามที่ 3

ข้อใดต่อไปนี้ไม่เป็นจริงเกี่ยวกับชิป

▢ คุณแสดงชิปเป็นส่วนหนึ่งของ ChipGroup

▢ คุณระบุรายการสถานะสีสำหรับ ChipGroup ได้

▢ ชิปคือองค์ประกอบขนาดกะทัดรัดที่แสดงอินพุต แอตทริบิวต์ หรือการทำงาน

▢ คุณต้องเปิดใช้ DarkTheme เสมอหากแอปใช้ชิป

คำถามที่ 4

ธีมใดที่ให้สไตล์สำหรับโหมดมืดและโหมดสว่าง

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

คำถามที่ 5

ภูมิภาคที่ใช้งานได้คืออะไร

▢ โหนดที่มีข้อมูลที่สำคัญต่อผู้ใช้

▢ ภูมิภาคของหน้าจอที่เปลี่ยนรูปร่างตามหลักเกณฑ์ของ Material

▢ มุมมองที่อนุญาตให้สตรีมวิดีโอ

▢ Drawable แบบเคลื่อนไหว