เริ่มต้นใช้งานแอปที่ปรับเปลี่ยนตามอุปกรณ์

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

แอปแบบปรับได้คืออะไร

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

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

รูปที่ 1 แอปแบบปรับได้จะเพิ่มประสิทธิภาพเลย์เอาต์สำหรับขนาดหน้าต่างที่แตกต่างกัน

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

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

เหตุใดจึงควรสร้าง UI แบบปรับได้

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

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

Google Play

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

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

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

รูปที่ 2 คำเตือนด้านคุณภาพทางเทคนิคในหน้ารายละเอียดแอป

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

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

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

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

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

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

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

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

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

รูปที่ 3 คลาสขนาดหน้าต่างตามความกว้างของการแสดงผล

หมายเหตุ: เนื่องจากผู้ใช้คุ้นเคยกับการเลื่อนแนวตั้ง ความกว้างของหน้าต่างจึงมักเป็น ปัจจัยหลักในการกำหนดคลาสขนาดหน้าต่าง

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

บานหน้าต่างเนื้อหา

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

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

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

รูปที่ 4 จำนวนบานหน้าต่างเนื้อหาต่อคลาสขนาดหน้าต่าง

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

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

รูปที่ 5 เลย์เอาต์รายละเอียดรายการที่มีบานหน้าต่างรายการเป็นเป้าหมายการนำทาง

รูปที่ 6 เลย์เอาต์รายละเอียดรายการที่มีบานหน้าต่างรายละเอียดเป็นเป้าหมายการนำทาง

Compose Material 3 Adaptive

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

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

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

• ListDetailPaneScaffold: ใช้เลย์เอาต์มาตรฐานรายละเอียดรายการ

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

• SupportingPaneScaffold: ใช้เลย์เอาต์มาตรฐานบานหน้าต่างรอง

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

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

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

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

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

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

ท่าทาง

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

รูปที่ 7 อุปกรณ์พับได้ในท่าทางบนโต๊ะ

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

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

อินพุตนอกเหนือจากการสัมผัส

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

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

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

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

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

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

วิธีทดสอบแอปแบบปรับได้

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

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

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

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

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

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

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

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

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

การแสดงตัวอย่าง Compose

การแสดงตัวอย่าง Compose ช่วยให้คุณตรวจสอบ 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 แบบปรับได้