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

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

แอปแบบปรับอัตโนมัติคืออะไร

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

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

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

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

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

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

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

Google Play

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

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

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

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

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

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

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

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

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

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง 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 แบบปรับอัตโนมัติ