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