ปัจจุบันมีอุปกรณ์ Android หน้าจอขนาดใหญ่มากกว่า 300 ล้านเครื่องที่ใช้งานอยู่ ซึ่งรวมถึงแท็บเล็ต, อุปกรณ์พับได้, Chromebook, อุปกรณ์ ChromeOS, จอแสดงผลในรถยนต์ และทีวี และจะมีเพิ่มขึ้นเรื่อยๆ หากต้องการมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ในอุปกรณ์หน้าจอขนาดใหญ่ที่มีจำนวนและความหลากหลายเพิ่มขึ้นเรื่อยๆ รวมถึงในโทรศัพท์มาตรฐาน ให้สร้างแอปที่ปรับเปลี่ยนตามอุปกรณ์
แอปแบบปรับอัตโนมัติคืออะไร
แอปที่ปรับเปลี่ยนตามอุปกรณ์จะเปลี่ยนเลย์เอาต์ตามการเปลี่ยนแปลงในการแสดงผลของแอป โดยหลักๆ แล้วคือขนาดของหน้าต่างแอป แต่แอปที่ปรับเปลี่ยนได้ยังรองรับการเปลี่ยนแปลงในท่าทางของอุปกรณ์แบบพับได้ เช่น ท่าทางแบบตั้งโต๊ะหรือแบบหนังสือ รวมถึงการเปลี่ยนแปลงความหนาแน่นของหน้าจอและขนาดแบบอักษรด้วย
แอปที่ปรับเปลี่ยนได้จะแทนที่คอมโพเนนต์เลย์เอาต์และแสดงหรือซ่อนเนื้อหา แทนที่จะยืดหรือหดองค์ประกอบ UI เพื่อตอบสนองต่อขนาดหน้าต่างที่แตกต่างกัน ตัวอย่างเช่น ในโทรศัพท์มาตรฐาน แอปที่ปรับเปลี่ยนได้อาจแสดงแถบการนำทางด้านล่าง แต่ในหน้าจอขนาดใหญ่จะแสดงแถบนำทาง ในหน้าจอขนาดใหญ่ แอปที่ปรับเปลี่ยนตามอุปกรณ์จะแสดงเนื้อหามากขึ้น เช่น เลย์เอาต์รายละเอียดรายการแบบ 2 แผง ส่วนในหน้าจอขนาดเล็กจะแสดงเนื้อหาน้อยลง โดยแสดงเฉพาะรายการหรือรายละเอียด
ในอดีต แอปมักจะทำงานแบบเต็มหน้าจอ ปัจจุบัน แอปทำงานในโหมดหลายหน้าต่างในหน้าต่างขนาดที่กำหนดเองโดยไม่ขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์ ผู้ใช้สามารถเปลี่ยนขนาดหน้าต่างได้ทุกเมื่อ ดังนั้นแม้จะอยู่ในอุปกรณ์ประเภทเดียว แอปก็ต้องปรับเปลี่ยนตามอุปกรณ์ได้
แอปที่ปรับเปลี่ยนตามอุปกรณ์จะดูดีและทำงานได้ดีในอุปกรณ์ทุกประเภทและทุกการกำหนดค่า
ทำไมต้องสร้าง UI แบบปรับอัตโนมัติ
ผู้ใช้คาดหวังว่าแอปของคุณจะทำงานได้อย่างสมบูรณ์แบบในอุปกรณ์ทุกเครื่องและมอบความสามารถที่ดียิ่งขึ้นบนหน้าจอขนาดใหญ่ ผู้ใช้ทำงานหลายอย่างพร้อมกันในโหมดหลายหน้าต่างเพื่อประสบการณ์การใช้งานแอปที่ดียิ่งขึ้นและประสิทธิภาพการทำงานที่เพิ่มขึ้น
แอปที่จำกัดให้ทำงานได้เพียงอย่างเดียวในโทรศัพท์มาตรฐานจะพลาดโอกาสในการขยายฐานผู้ใช้ที่หลากหลาย
Google Play
Google Play มีคอลเล็กชันและวิดีโอแนะนำแอปสำหรับแท็บเล็ตและอุปกรณ์แบบพับได้โดยเฉพาะ ซึ่งช่วยให้ผู้ใช้ค้นพบแอปคุณภาพสูงได้
Play จะจัดอันดับแอปและเกมที่เพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่ไว้สูงกว่าแอปที่ไม่ได้เพิ่มประสิทธิภาพ Play จะจัดอันดับตามหลักเกณฑ์ด้านคุณภาพแอปสำหรับหน้าจอขนาดใหญ่ การจัดอันดับที่สูงขึ้นจะเพิ่มโอกาสในการถูกค้นพบโดยช่วยให้ผู้ใช้หลายอุปกรณ์เห็นคะแนนและรีวิวเฉพาะสำหรับหน้าจอขนาดใหญ่ในโทรศัพท์ของตน
แอปที่ไม่เป็นไปตามมาตรฐานคุณภาพสำหรับหน้าจอขนาดใหญ่ของ Play Store จะแสดงคำเตือนในหน้ารายละเอียดแอป คำเตือนจะแจ้งให้ผู้ใช้ทราบว่าแอปอาจทำงานได้ไม่ดีในอุปกรณ์หน้าจอขนาดใหญ่
สร้างแอปที่ปรับเปลี่ยนตามอุปกรณ์เพื่อเพิ่มโอกาสในการถูกค้นพบบน Google Play และเพิ่มจำนวนอุปกรณ์ที่ดาวน์โหลดแอปของคุณได้ให้มากที่สุด
วิธีเริ่มต้นใช้งาน
คำนึงถึงการออกแบบที่ปรับเปลี่ยนได้ในทุกระยะของการพัฒนาแอป ตั้งแต่การวางแผนไปจนถึงการติดตั้งใช้งาน แจ้งให้นักออกแบบกราฟิกทราบเกี่ยวกับการออกแบบแบบปรับอัตโนมัติ ออกแบบแอปให้ปรับเปลี่ยนได้ แล้วคุณจะสร้างแอปที่จัดการได้ ขยายได้ และพร้อมสำหรับรูปแบบของอุปกรณ์และโหมดการจัดวางหน้าต่างในอนาคต
หากต้องการสร้างแอปแบบปรับเปลี่ยนได้ที่รองรับจอแสดงผลและการกำหนดค่าทุกขนาด ให้ทำดังนี้
- ใช้คลาสขนาดหน้าต่างเพื่อตัดสินใจเกี่ยวกับเลย์เอาต์
- สร้างด้วยไลบรารี Compose Material 3 Adaptive
- รองรับการป้อนข้อมูลนอกเหนือจากการสัมผัส
- ทดสอบในอุปกรณ์ทุกประเภท
ทักษะ Android
ดูใน GitHubทำให้แอปปรับเปลี่ยนตามอุปกรณ์ได้
adaptive เพื่ออัปเดต UI ของแอปให้ปรับเปลี่ยนตามอุปกรณ์ Android และจอแสดงผลต่างๆandroid skills add adaptiveคลาสขนาดหน้าต่าง
ขนาดหน้าต่างแอปอาจแตกต่างกันไปในอุปกรณ์แต่ละเครื่อง หรือในอุปกรณ์เครื่องเดียวกันในกรณีที่เป็นอุปกรณ์แบบพับได้ แม้ว่าแอปจะแสดงแบบเต็มหน้าจอก็ตาม การวางแนวอุปกรณ์ที่แตกต่างกันจะทำให้เกิดสัดส่วนภาพที่แตกต่างกัน ในโหมดหลายหน้าต่าง ขนาดหน้าต่างแอป สัดส่วนภาพ และการวางแนวอาจแตกต่างจากหน้าจออุปกรณ์
แอปที่ปรับเปลี่ยนได้จะช่วยลดความซับซ้อนและทำให้ปัญหาในการกำหนดและจัดการขนาดหน้าต่าง สัดส่วนภาพ และการวางแนวเป็นเรื่องง่ายขึ้น โดยพิจารณาเฉพาะหน้าต่างแอปเมื่อแสดงผลเลย์เอาต์ ซึ่งจะทำงานได้เมื่อหน้าต่างแอปเป็นแบบเต็มหน้าจอด้วย
คลาสขนาดหน้าต่างจะจัดหมวดหมู่หน้าต่างแอปเป็นกะทัดรัด ปานกลาง หรือขยายตามความกว้างหรือความสูงของหน้าต่าง
คำนวณ WindowSizeClass ของแอปโดยใช้ฟังก์ชันระดับบนสุด currentWindowAdaptiveInfo() ของไลบรารี Compose Material 3 Adaptive ฟังก์ชันจะแสดงผลอินสแตนซ์ของ WindowAdaptiveInfo ซึ่งมี windowSizeClass แอปของคุณจะได้รับการอัปเดตทุกครั้งที่คลาสขนาดหน้าต่างมีการเปลี่ยนแปลง ดังนี้
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
แผงเนื้อหา
บางครั้งเลย์เอาต์ของกิจกรรมจะเรียกว่าหน้าจอ ตัวอย่างเช่น แอปอาจมีหน้าจอหลัก หน้าจอรายการ และหน้าจอรายละเอียดรายการ คำศัพท์นี้หมายความว่าแต่ละกิจกรรมจะแสดงเต็มหน้าจออุปกรณ์
อย่างไรก็ตาม ในหน้าจออุปกรณ์ที่มีขนาดใหญ่พอที่จะรองรับคลาสขนาดหน้าต่างที่มีความกว้างแบบขยาย หน้าจอกิจกรรมหลายหน้าจอจะอยู่บนหน้าจอพร้อมกันได้ แผงเป็นคำที่เจาะจงมากขึ้นสำหรับการแสดงเนื้อหาของกิจกรรมแต่ละรายการ
คลาสขนาดหน้าต่างช่วยให้คุณกำหนดจำนวนแผงเนื้อหาที่จะแสดงในเลย์เอาต์แบบหลายแผงได้ตามที่ระบุไว้ใน Material Design
แผงต่างๆ สามารถไปยังส่วนต่างๆ ได้ ในคลาสขนาดหน้าต่างแบบกะทัดรัดและปานกลาง แอปจะแสดงแผงเดียว ดังนั้นการไปยังปลายทางใดๆ จะแสดงแผงเดียว
ในคลาสขนาดหน้าต่างแบบขยาย แอปสามารถแสดงเนื้อหาที่เกี่ยวข้องในหลายแผง เช่น เลย์เอาต์แบบรายการ-รายละเอียด การไปยังแผงใดแผงหนึ่งจะแสดงเลย์เอาต์แบบ 2 แผง หากขนาดหน้าต่างเปลี่ยนเป็นกะทัดรัดหรือปานกลาง แอปที่ปรับเปลี่ยนตามอุปกรณ์จะแสดงเพียงแผงเดียว ซึ่งเป็นปลายทางการนำทาง ไม่ว่าจะเป็นรายการหรือรายละเอียด
|
|
|
Compose Material 3 Adaptive
Jetpack Compose เป็นแนวทางแบบประกาศที่ทันสมัยในการสร้างแอปแบบปรับอัตโนมัติโดยไม่ต้องมีภาระในการทำซ้ำและบำรุงรักษาไฟล์เลย์เอาต์หลายไฟล์
ไลบรารี Compose Material 3 Adaptive มี Composable ที่จัดการคลาสขนาดหน้าต่าง, คอมโพเนนต์การนำทาง, เลย์เอาต์แบบหลายแผง, ท่าทางพับ และตำแหน่งบานพับ เช่น
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 และการคลิก เมาส์หรือแทร็กแพด การเลือก และการเลื่อนโดยค่าเริ่มต้น
ไลบรารี Jetpack
androidx.compose.material3: ช่วยให้ผู้ใช้เขียนลงในคอมโพเนนต์TextFieldใดก็ได้โดยใช้สไตลัสตัวช่วยแป้นพิมพ์ลัด: ช่วยให้ผู้ใช้ค้นพบแป้นพิมพ์ลัดของแพลตฟอร์ม Android และแอปได้ เผยแพร่แป้นพิมพ์ลัดของแอปในตัวช่วยแป้นพิมพ์ลัดโดยลบล้าง Callback ของหน้าต่าง
onProvideKeyboardShortcuts()
แอปที่ปรับเปลี่ยนตามอุปกรณ์รองรับอินพุตทุกประเภทเพื่อให้รองรับรูปแบบของอุปกรณ์ทุกขนาดได้อย่างเต็มที่
วิธีทดสอบแอปแบบปรับอัตโนมัติ
ทดสอบหน้าจอและขนาดหน้าต่างที่แตกต่างกัน รวมถึงการกำหนดค่าอุปกรณ์ที่แตกต่างกัน ใช้ภาพหน้าจอฝั่งโฮสต์และตัวอย่าง Compose เพื่อตรวจสอบเลย์เอาต์ของแอป เรียกใช้แอปในโปรแกรมจำลอง Android Studio และอุปกรณ์ Android ระยะไกลที่โฮสต์ในศูนย์ข้อมูลของ Google
หลักเกณฑ์ด้านคุณภาพแอปสำหรับหน้าจอขนาดใหญ่
หลักเกณฑ์ด้านคุณภาพของแอปสำหรับหน้าจอขนาดใหญ่ช่วยให้คุณยืนยันได้ว่าแอปที่ปรับเปลี่ยนได้ทำงานได้ดีในแท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS หลักเกณฑ์ดังกล่าวรวมถึงการทดสอบที่ช่วยให้คุณยืนยันฟังก์ชันการทำงานของแอปสำหรับเส้นทางของผู้ใช้ที่สำคัญได้ แม้ว่าหลักเกณฑ์จะมุ่งเน้นที่หน้าจอขนาดใหญ่ แต่ก็ใช้ได้กับหน้าจอทุกขนาด
การกำหนดค่าหลายรายการ
อินเทอร์เฟซ DeviceConfigurationOverride ใน Compose 1.7 ขึ้นไปช่วยให้คุณลบล้างแง่มุมต่างๆ ของการกำหนดค่าอุปกรณ์ได้ API จะจำลองการกำหนดค่าอุปกรณ์ต่างๆ ในรูปแบบที่แปลแล้วสำหรับเนื้อหา Composable ที่คุณต้องการทดสอบ ตัวอย่างเช่น คุณสามารถทดสอบขนาด UI ที่กำหนดเองหลายขนาดในการเรียกใช้ชุดโปรแกรมทดสอบครั้งเดียวในอุปกรณ์หรือโปรแกรมจำลองเครื่องเดียว
ฟังก์ชันส่วนขยาย DeviceConfigurationOverride.then() ช่วยให้คุณทดสอบพารามิเตอร์การกำหนดค่าหลายรายการ เช่น ขนาดแบบอักษร ภาษา ธีม และขนาดเลย์เอาต์พร้อมกันได้
ภาพหน้าจอฝั่งโฮสต์
การทดสอบภาพหน้าจอฝั่งโฮสต์เป็นวิธีที่รวดเร็วและปรับขนาดได้ในการยืนยันลักษณะที่ปรากฏของเลย์เอาต์แอป ใช้ภาพหน้าจอฝั่งโฮสต์เพื่อทดสอบ UI สำหรับขนาดการแสดงผลที่หลากหลาย
ดูข้อมูลเพิ่มเติมได้ที่การทดสอบภาพหน้าจอตัวอย่างของ Compose
สร้างตัวอย่าง
ตัวอย่าง Compose ช่วยให้คุณตรวจสอบ UI ของแอปในมุมมองการออกแบบของ Android Studio ได้ ตัวอย่างจะใช้คำอธิบายประกอบ เช่น @PreviewScreenSizes, @PreviewFontScale และ @PreviewLightDark เพื่อให้คุณเห็นเนื้อหาที่ประกอบได้ในการกำหนดค่าต่างๆ คุณยังโต้ตอบกับตัวอย่างได้ด้วย
นอกจากนี้ Android Studio ยังไฮไลต์ปัญหาด้านความสามารถในการใช้งานที่พบบ่อยในตัวอย่าง เช่น ปุ่มหรือช่องข้อความที่กว้างเกินไป
ดูข้อมูลเพิ่มเติมได้ที่แสดงตัวอย่าง UI ด้วยตัวอย่าง Composable
โปรแกรมจำลอง
Android Studio มีโปรแกรมจำลองที่หลากหลายสำหรับการทดสอบเลย์เอาต์ขนาดต่างๆ ดังนี้
- โปรแกรมจำลองที่ปรับขนาดได้: จำลองโทรศัพท์ แท็บเล็ต หรืออุปกรณ์แบบพับได้ และช่วยให้คุณสลับไปมาได้ทันที
- โปรแกรมจำลอง Pixel Fold: จำลองโทรศัพท์แบบพับได้ที่มีหน้าจอขนาดใหญ่อย่าง Pixel Fold
- โปรแกรมจำลอง Pixel Tablet: จำลองอุปกรณ์ Pixel Tablet ที่มีหน้าจอขนาดใหญ่
- โปรแกรมจำลองเดสก์ท็อป: ช่วยให้คุณทดสอบการใช้หน้าต่างรูปแบบอิสระ การวางเมาส์เหนือองค์ประกอบ และแป้นพิมพ์ลัด
การสตรีมอุปกรณ์ระยะไกล
เชื่อมต่อกับอุปกรณ์ Android ระยะไกลที่โฮสต์ในศูนย์ข้อมูลของ Google อย่างปลอดภัย และเรียกใช้แอปในอุปกรณ์ Pixel และ Samsung รุ่นล่าสุด ติดตั้งและแก้ไขข้อบกพร่องของแอป เรียกใช้คำสั่ง ADB รวมถึงหมุนและพับอุปกรณ์เพื่อยืนยันว่าแอปทำงานได้ดีในอุปกรณ์จริงที่หลากหลาย
การสตรีมอุปกรณ์ระยะไกลผสานรวมอยู่ใน Android Studio ดูข้อมูลเพิ่มเติมได้ที่การสตรีมอุปกรณ์ Android ที่ทำงานด้วย Firebase
แหล่งข้อมูลเพิ่มเติม
- งานนำเสนอในงาน I/O: การสร้างแอป Android ที่ปรับเปลี่ยนตามอุปกรณ์