สร้างแอปที่ปรับเปลี่ยนได้

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

แอปที่ปรับขนาดได้คืออะไร

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

แอปที่ปรับเปลี่ยนได้จะแทนที่คอมโพเนนต์เลย์เอาต์และแสดงหรือซ่อนเนื้อหาแทนที่จะแค่ยืดหรือย่อองค์ประกอบ UI เพื่อตอบสนองต่อขนาดหน้าต่างที่แตกต่างกัน เช่น ในโทรศัพท์มาตรฐาน แอปที่ปรับเปลี่ยนได้อาจแสดงแถบนําทางด้านล่าง แต่บนหน้าจอขนาดใหญ่อาจแสดงแถบนําทาง บนหน้าจอขนาดใหญ่ แอปที่ปรับเปลี่ยนได้จะแสดงเนื้อหามากขึ้น เช่น เลย์เอาต์แบบ 2 หน้าจอที่มีรายการและรายละเอียด ส่วนบนหน้าจอขนาดเล็ก แอปจะแสดงเนื้อหาน้อยลง ไม่ว่าจะเป็นรายการหรือรายละเอียด

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

แอปที่ปรับเปลี่ยนได้จะดูดีและทำงานได้ดีในอุปกรณ์ทุกเครื่องในการกำหนดค่าใดๆ

เหตุผลที่ควรสร้าง UI แบบปรับอัตโนมัติ

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

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

Google Play

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

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

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

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

วิธีเริ่มต้นใช้งาน

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

หากต้องการสร้างแอปที่ปรับขนาดได้ซึ่งรองรับการกำหนดค่าและขนาดจอแสดงผลทั้งหมด ให้ทําดังนี้

• ใช้คลาสขนาดหน้าต่างเพื่อตัดสินใจเกี่ยวกับเลย์เอาต์
• สร้างด้วยไลบรารี Compose Material 3 Adaptive
• รองรับการป้อนข้อมูลนอกเหนือจากการสัมผัส
• ทดสอบกับอุปกรณ์ทุกประเภท

คลาสขนาดหน้าต่าง

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

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

คลาสขนาดหน้าต่างจะจัดหมวดหมู่หน้าต่างแอปเป็นกะทัดรัด ปานกลาง หรือขยายโดยอิงตามความกว้างหรือความสูงของหน้าต่าง

คํานวณ WindowSizeClass ของแอปโดยใช้ฟังก์ชันระดับบนสุด currentWindowAdaptiveInfo() ของคอมโพสิชัน Material 3 Adaptive Library ฟังก์ชันจะแสดงผลอินสแตนซ์ของ WindowAdaptiveInfo ซึ่งมี windowSizeClass แอปของคุณจะได้รับการอัปเดตทุกครั้งที่คลาสขนาดหน้าต่างมีการเปลี่ยนแปลง ดังนี้

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

แผงเนื้อหา

บางครั้งเลย์เอาต์ของกิจกรรมเรียกว่าหน้าจอ เช่น แอปของคุณอาจมีหน้าจอหลัก หน้าจอรายการ และหน้าจอรายละเอียดสินค้า คำว่า "เต็มหน้าจอ" หมายความว่ากิจกรรมแต่ละรายการจะแสดงเต็มหน้าจออุปกรณ์

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

คลาสขนาดหน้าต่างช่วยให้คุณกำหนดจำนวนแผงเนื้อหาที่จะแสดงในเลย์เอาต์หลายแผงได้ตามที่ระบุไว้ใน Material Design

แผงจะไปยังส่วนต่างๆ ได้ ในคลาสขนาดหน้าต่างกะทัดรัดและกลาง แอปจะแสดงแผงเดียว ดังนั้นการไปยังปลายทางใดก็ตามจะแสดงแผงเดียว

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

Compose Material 3 Adaptive

Jetpack Compose เป็นแนวทางแบบโมเดิร์นที่ใช้ประกาศในการสร้างแอปที่ปรับให้เหมาะกับอุปกรณ์ต่างๆ ได้โดยไม่ต้องทำซ้ำและบำรุงรักษาไฟล์เลย์เอาต์หลายไฟล์

ไลบรารี Compose Material 3 แบบปรับเปลี่ยนได้ประกอบด้วยคอมโพสิชันที่จัดการคลาสขนาดหน้าต่าง คอมโพเนนต์การนําทาง เลย์เอาต์หลายแผง รวมถึงลักษณะการพับและตําแหน่งบานพับ ตัวอย่างเช่น

• NavigationSuiteScaffold: สลับระหว่างแถบนำทางกับแถบนําทางโดยอัตโนมัติ โดยขึ้นอยู่กับคลาสขนาดหน้าต่างแอปและลักษณะการวางอุปกรณ์

• ListDetailPaneScaffold: ใช้เลย์เอาต์ Canonical ของรายละเอียดรายการ

  ปรับเลย์เอาต์ให้เหมาะกับขนาดหน้าต่างแอป แสดงรายการและรายละเอียดของรายการในแผงแบบแสดงคู่ในคลาสขนาดหน้าต่างแบบขยาย แต่แสดงเฉพาะรายการหรือรายละเอียดในคลาสขนาดหน้าต่างแบบกะทัดรัดและขนาดกลาง

• SupportingPaneScaffold: ใช้เลย์เอาต์ Canonical ของแผงสนับสนุน

  แสดงแผงเนื้อหาหลักและแผงสนับสนุนในคลาสขนาดหน้าต่างแบบขยาย แต่แสดงเฉพาะแผงเนื้อหาหลักในคลาสขนาดหน้าต่างแบบกะทัดรัดและขนาดกลาง

ไลบรารี Compose Material 3 Adaptive เป็น Dependency ที่จำเป็นในการพัฒนาแอปแบบปรับเปลี่ยนได้

การกําหนดค่าและความต่อเนื่อง

แอปที่ปรับเปลี่ยนได้จะทำงานอย่างต่อเนื่องในระหว่างที่มีการเปลี่ยนแปลงการกําหนดค่า

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

โดยค่าเริ่มต้น การเปลี่ยนแปลงการกําหนดค่าจะสร้างกิจกรรมของแอปขึ้นมาใหม่ และสถานะกิจกรรมทั้งหมดจะหายไป แอปแบบปรับเปลี่ยนได้จะบันทึกสถานะไว้ในเมธอด onSaveInstanceState() ของกิจกรรมหรือใน ViewModel เพื่อรักษาความต่อเนื่อง

ท่าทาง

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

อินเทอร์เฟซ WindowInfoTracker ใน Jetpack WindowManager ช่วยให้คุณดูรายการออบเจ็กต์ DisplayFeature สำหรับอุปกรณ์ได้ ฟีเจอร์การแสดงผลอย่างหนึ่งคือ FoldingFeature.State ซึ่งจะระบุว่าอุปกรณ์เปิดอยู่ครึ่งหนึ่งหรือเปิดจนสุด

ไลบรารี Compose Material 3 Adaptive มีฟังก์ชันระดับบนสุด currentWindowAdaptiveInfo() ซึ่งแสดงผลอินสแตนซ์ของ WindowAdaptiveInfo ที่มี windowPosture

การป้อนข้อมูลนอกเหนือจากการสัมผัส

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

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

• Jetpack Compose 1.7 ขึ้นไป: รองรับการไปยังส่วนต่างๆ ของแป้นพิมพ์ด้วย Tab และการคลิก เลือก และเลื่อนด้วยเมาส์หรือทัชแพดโดยค่าเริ่มต้น

• ไลบรารี androidx.compose.material3 ของ Jetpack: ช่วยให้ผู้ใช้เขียนลงในคอมโพเนนต์ TextField ใดก็ได้โดยใช้ปากกาสไตลัส

• เครื่องมือช่วยเหลือแป้นพิมพ์ลัด: ช่วยให้ผู้ใช้ค้นพบแป้นพิมพ์ลัดของแพลตฟอร์ม Android และแอป เผยแพร่แป้นพิมพ์ลัดของแอปในเครื่องมือช่วยเหลือแป้นพิมพ์ลัดโดยการลบล้างการเรียกกลับของหน้าต่าง onProvideKeyboardShortcuts()

แอปที่ปรับเปลี่ยนได้รองรับอินพุตทุกประเภทเพื่อให้รองรับรูปแบบของอุปกรณ์ทุกขนาด

วิธีทดสอบแอปที่ปรับเปลี่ยนได้

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

หลักเกณฑ์ด้านคุณภาพของแอปหน้าจอขนาดใหญ่

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

การกำหนดค่าหลายรายการ

อินเทอร์เฟซ DeviceConfigurationOverride ใน Compose 1.7 ขึ้นไปช่วยให้คุณลบล้างการกำหนดค่าอุปกรณ์ในด้านต่างๆ ได้ API จะจําลองการกําหนดค่าอุปกรณ์ต่างๆ ในลักษณะที่แปลแล้วสําหรับเนื้อหาแบบคอมโพสิเบิลที่คุณต้องการทดสอบ เช่น คุณสามารถทดสอบ UI ขนาดต่างๆ ที่กำหนดเองได้หลายขนาดในการเรียกใช้ชุดทดสอบครั้งเดียวบนอุปกรณ์หรือโปรแกรมจำลองเครื่องเดียว

ฟังก์ชันส่วนขยาย DeviceConfigurationOverride.then() ช่วยให้คุณทดสอบพารามิเตอร์การกําหนดค่าหลายรายการพร้อมกันได้ เช่น ขนาดแบบอักษร ภาษา ธีม และขนาดเลย์เอาต์

ภาพหน้าจอฝั่งโฮสต์

การทดสอบภาพหน้าจอฝั่งโฮสต์เป็นวิธีที่รวดเร็วและปรับขนาดได้ในการยืนยันลักษณะที่ปรากฏของเลย์เอาต์แอป ใช้ภาพหน้าจอฝั่งโฮสต์เพื่อทดสอบ UI สำหรับขนาดการแสดงผลที่หลากหลาย

ดูข้อมูลเพิ่มเติมได้ที่การทดสอบภาพหน้าจอตัวอย่างของคอมโพสิชัน

สร้างตัวอย่าง

การแสดงตัวอย่างการคอมโพสช่วยให้คุณตรวจสอบ UI ของแอปในมุมมองการออกแบบของ Android Studio ได้ ตัวอย่างใช้คำอธิบายประกอบ เช่น @PreviewScreenSizes, @PreviewFontScale และ @PreviewLightDark เพื่อให้คุณเห็นเนื้อหาที่คอมโพสิเบิลในการกําหนดค่าต่างๆ คุณยังโต้ตอบกับตัวอย่างเพลงได้ด้วย

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

ดูข้อมูลเพิ่มเติมได้ที่แสดงตัวอย่าง UI ด้วยตัวอย่างแบบคอมโพสิเบิล

โปรแกรมจำลอง

Android Studio มีโปรแกรมจำลองที่หลากหลายสำหรับการทดสอบเลย์เอาต์ขนาดต่างๆ ดังนี้

• โปรแกรมจำลองที่ปรับขนาดได้: จำลองโทรศัพท์ แท็บเล็ต หรืออุปกรณ์แบบพับได้ และให้คุณสลับระหว่างอุปกรณ์ต่างๆ ได้ทันที
• โปรแกรมจำลอง Pixel Fold: จำลองโทรศัพท์แบบพับได้หน้าจอขนาดใหญ่ Pixel Fold
• โปรแกรมจำลอง Pixel Tablet: จำลองอุปกรณ์หน้าจอขนาดใหญ่ Pixel Tablet
• โปรแกรมจำลองเดสก์ท็อป: ช่วยให้ทดสอบหน้าต่างรูปแบบอิสระ การเลื่อนเมาส์เหนือ และแป้นพิมพ์ลัดได้

สตรีมมิงจากอุปกรณ์ระยะไกล

เชื่อมต่อกับอุปกรณ์ Android ระยะไกลที่โฮสต์ในศูนย์ข้อมูลของ Google อย่างปลอดภัย และเรียกใช้แอปในอุปกรณ์ Pixel และ Samsung เวอร์ชันล่าสุด ติดตั้งและแก้ไขข้อบกพร่องของแอป เรียกใช้คำสั่ง ADB และบิดและพับอุปกรณ์เพื่อให้มั่นใจว่าแอปทำงานได้ดีในอุปกรณ์จริงที่หลากหลาย

การสตรีมอุปกรณ์ระยะไกลผสานรวมอยู่ใน Android Studio ดูข้อมูลเพิ่มเติมได้ที่การสตรีมอุปกรณ์ Android ที่ทำงานด้วย Firebase

แหล่งข้อมูลเพิ่มเติม

• การนำเสนอ I/O: การสร้างแอป Android แบบปรับอัตโนมัติ