Kotlin Android Fundamentals 10.3: ออกแบบสําหรับทุกคน

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

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

เราขอแนะนําให้คุณใช้ Codelab 3 ชุดในซีรีส์นี้ตามลําดับ เพราะจะมีการดําเนินการทีละขั้นตอน

• 10.1 รูปแบบและธีม
• 10.2 การออกแบบวัสดุ เทคนิค และสี
• 10.3 การออกแบบสําหรับทุกคน

ข้อมูลเบื้องต้น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในขั้นตอนนี้ แอป GDG Finder ใช้งานได้กับภาษา RTL

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

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

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

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

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

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

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

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

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

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

1. Openlist_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 ให้เลือก Rector &gt, เพิ่มการรองรับ RTL หากเป็นไปได้ และเลือกช่องเพื่ออัปเดตไฟล์ Manifest และไฟล์เลย์เอาต์เพื่อใช้พร็อพเพอร์ตี้เริ่มต้นและสิ้นสุด

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

5. โปรดสังเกตว่าตัวอย่างจะแสดงไฟล์ระบบและไลบรารีด้วย คลิกขวาที่ layout และ ayout-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-"language code" มีค่าสําหรับแต่ละภาษาที่รองรับ โฟลเดอร์ values ที่ไม่มีส่วนขยายจะมีทรัพยากรเริ่มต้นซึ่งใช้เป็นอย่างอื่น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สําคัญ: ก่อนเปิดใช้สิทธิ์นี้ ให้ตรวจสอบอีกครั้งว่าแอปที่คุณติดตั้งเป็นเครื่องตรวจการเข้าถึงโดย Google LLC

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

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

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

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

Google TalkBack ไม่ได้เพียงเฉพาะคนตาบอดเท่านั้น แต่ยังรวมถึงผู้ที่มีความบกพร่องทางสายตาบางประเภทด้วย หรือแม้แต่คนที่แค่ต้องการหลับตา

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

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

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

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

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

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

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

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

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

1. เมื่อเปิดแอป GDG Finder และเปิดใช้ Talback แล้ว ให้ไปที่หน้าจอสมัครเพื่อเรียกใช้ 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. เรียกใช้แอปที่เปิดใช้ Talback และกรอกแบบฟอร์มเพื่อสมัครเข้าร่วม 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" จะไม่มีการประกาศการเปลี่ยนแปลงใดๆ ตั้งค่าเป็น "polite" บริการการช่วยเหลือพิเศษจะประกาศการเปลี่ยนแปลง แต่ต้องรอการเปลี่ยน ตั้งค่าเป็น "polite"

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

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

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

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

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

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

1. เปิด fragment_gdg_list.xml
2. สร้าง com.google.android.material.chip.ChipGroup ภายในพร็อพเพอร์ตี้ HorizontalScrollView. กําหนด singleLine เป็น true เพื่อให้ชิปทั้งหมดตั้งเรียงรายบนบรรทัดแบบเลื่อนได้ในแนวนอน 1 บรรทัด ตั้งค่าพร็อพเพอร์ตี้ 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 ในโฟลเดอร์ layout สําหรับการกําหนดเลย์เอาต์สําหรับ Chip 1 รายการ
4. ใน region.xml ให้แทนที่โค้ดทั้งหมดด้วยเลย์เอาต์สําหรับ Chip รายการเดียวตามที่ระบุไว้ด้านล่าง โปรดสังเกตว่า Chip นี้เป็นคอมโพเนนต์วัสดุ นอกจากนี้ โปรดตรวจสอบว่าคุณได้รับเครื่องหมายถูกโดยตั้งค่าพร็อพเพอร์ตี้ 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 รายการสถานะจะทํางานผ่านจากด้านบนลงล่าง เช่น คําสั่ง หากไม่ตรงกับรัฐใด ระบบจะใช้สถานะเริ่มต้น

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

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

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

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

1. ในแพ็กเกจการค้นหา ให้เปิด GdgListFragment.kt
2. ใน onCreateView() เหนือคําสั่ง return ให้เพิ่มผู้สังเกตการณ์ใน viewModel.regionList และลบล้าง onChanged() เมื่อรายการภูมิภาคที่ได้จากโมเดลข้อมูลพร็อพเพอร์ตี้มีการเปลี่ยนแปลง คุณจะต้องสร้างชิปใหม่ เพิ่มคําสั่งเพื่อส่งคืนทันทีหาก 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. ทําความสะอาดและสร้างโปรเจ็กต์ใหม่เพื่อกําจัดข้อผิดพลาดในการเชื่อมโยงข้อมูล

ตอนนี้คุณสามารถสร้างชิปจริงของแต่ละจุดใน regionList ใน Inflator ได้แล้ว

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

val children = data.map {} 

7. ใน Maps แลมบ์ดา สําหรับแต่ละ 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. ภายในแลมบ์ดา ให้เพิ่ม Listener การคลิกก่อนกดปุ่ม chip เมื่อคลิก chip แล้ว ให้ตั้งสถานะเป็น checked เรียก onFilterChanged() ใน viewModel ซึ่งจะทริกเกอร์ลําดับของเหตุการณ์ที่ดึงผลลัพธ์ของตัวกรองนี้

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

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

chipGroup.removeAllViews()

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

ผู้สังเกตการณ์แบบสมบูรณ์ควรเป็นดังนี้

   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 เพื่อเปิดหน้าจอค้นหาเพื่อใช้ชิปใหม่ เมื่อคุณคลิกแต่ละชิป แอปจะแสดงกลุ่มตัวกรองด้านล่าง

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

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

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

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

1. ใน styles.xml, ให้เปลี่ยนธีมระดับบนสุดของ AppTheme จาก Light เป็น DayNight

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

2. ในเมธอด onCreate() ของ MainActivity ให้เรียกใช้ 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. เรียกใช้แอป โดยยังคงเปิดใช้โหมดกลางคืน และแอปควรใช้สีใหม่ที่คุณกําหนดไว้สําหรับความละเอียด/ค่าคืน โปรดสังเกตว่าชิปใช้สีรองใหม่

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

ภาษา RTL ที่รองรับ

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

สแกนความสามารถเข้าถึงได้ง่าย

• ใน 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 1 รายการ
• หากต้องการให้ชิปเปลี่ยนสี ให้แจ้งสถานะสีเป็น <selector> แต่มีสีเป็นสถานะ
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• เชื่อมโยงชิปกับข้อมูลสดด้วยการเพิ่มผู้สังเกตการณ์กับข้อมูลในโมเดลข้อมูลพร็อพเพอร์ตี้
• หากต้องการแสดงชิป ให้สร้าง Inflator สําหรับกลุ่มชิปดังนี้
  LayoutInflater.from(chipGroup.context)
• สร้างชิป เพิ่ม Listener การคลิกที่ทําให้เกิดการกระทําที่ต้องการ แล้วเพิ่มชิปลงในกลุ่มชิป

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

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

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

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

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

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

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน 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

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

▢ ภาพวาดที่วาดได้