Window Size Class — คืออะไร คลาสขนาดและการพัฒนา

Window Size Class คืออะไร?

Window Size Class คือ API ของแพลตฟอร์ม Android ที่รวมอยู่ในไลบรารี Jetpack WindowManager ซึ่งจัดประเภทพื้นที่ว่างของหน้าต่างแอปพลิเคชันออกเป็นสามประเภท แตกต่างจากแนวทางดั้งเดิมด้วยตัวระบุทรัพยากร (small/large/xlarge) Window Size Class ให้ชุดค่าที่ไม่ต่อเนื่องซึ่งนักพัฒนาสามารถพึ่งพาได้เมื่อออกแบบอินเทอร์เฟซ

API ปรากฏใน Android 7.0 Nougat ซึ่งเป็นส่วนหนึ่งของการรองรับโหมดหลายหน้าต่าง แต่การนำไปใช้อย่างจริงจังเริ่มต้นด้วย Jetpack WindowManager 1.1 (2022) Google แนะนำ Window Size Class เป็นเครื่องมือหลักสำหรับการสร้างเลย์เอาต์แบบปรับเปลี่ยนได้แทนที่จะตรวจสอบความกว้างหน้าจอผ่าน Display.getSize()

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

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

Compact — คลาสสำหรับหน้าต่างกว้างสูงสุด 600 dp โทรศัพท์ในโหมดแนวตั้ง อุปกรณ์พับได้ส่วนใหญ่ (Galaxy Z Flip) ในสถานะพับ อินเทอร์เฟซสร้างในคอลัมน์เดียว การนำทางผ่าน Bottom Navigation

Medium — คลาสสำหรับหน้าต่างกว้าง 600–840 dp แท็บเล็ตในแนวตั้ง โทรศัพท์ในแนวนอน อุปกรณ์พับได้ในสถานะกึ่งเปิด อินเทอร์เฟซใช้สองคอลัมน์ — ตัวอย่างเช่น รายการทางซ้ายและรายละเอียดทางขวา Navigation Rail แทนที่ Bottom Navigation

Expanded — คลาสสำหรับหน้าต่างกว้างตั้งแต่ 840 dp แท็บเล็ตในแนวนอน หน้าต่างเดสก์ท็ป อุปกรณ์พับได้ในสถานะกางออก อินเทอร์เฟซสามารถใช้สามแผงขึ้นไป Permanent Navigation Drawer แผงเครื่องมือ

ใน Material Design 3 มีการกำหนดคอมโพเนนต์แบบปรับเปลี่ยนได้สำหรับแต่ละคลาส: Navigation Rail สำหรับ Medium, Navigation Drawer สำหรับ Expanded, Bottom Navigation สำหรับ Compact นักพัฒนาไม่จำเป็นต้องเลือก breakpoints — กำหนดไว้แล้วโดย API

Window Size Class ทำงานอย่างไร

Window Size Class คำนวณจากความกว้างปัจจุบันของหน้าต่างแอปพลิเคชันในหน่วย dp โดยคำนึงถึงองค์ประกอบของระบบ — แถบสถานะ แถบนำทาง การแบ่งหน้าจอในโหมด Split Screen API จะทำงานเมื่อการกำหนดค่าหน้าต่างเปลี่ยนแปลง: การหมุนอุปกรณ์ การเข้าสู่โหมดหลายหน้าต่าง การกางอุปกรณ์พับได้

ในการรับคลาส จะใช้คลาส WindowSizeClass จากไลบรารี androidx.window นักพัฒนาสมัครสมาชิก Flow (Kotlin) หรือ LiveData (Java) ซึ่งอัปเดตคลาสโดยอัตโนมัติทุกครั้งที่ขนาดหน้าต่างเปลี่ยนแปลง — โดยไม่ต้องจัดการ onConfigurationChanged ด้วยตนเอง

การจำแนกประเภทเกิดขึ้นในสามขั้นตอน ขั้นแรก — วัดความกว้างหน้าต่างปัจจุบันเป็นพิกเซล ขั้นที่สอง — แปลงเป็น dp ผ่าน DisplayMetrics.density ขั้นที่สาม — เปรียบเทียบค่าที่ได้กับเกณฑ์: น้อยกว่า 600 dp — Compact, 600–840 — Medium, ตั้งแต่ 840 — Expanded

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact width
    WindowWidthSizeClass.MEDIUM  -> // medium width
    WindowWidthSizeClass.EXPANDED -> // expanded width
}

นอกจากความกว้าง (windowWidthSizeClass) แล้ว API ยังมีคลาสสำหรับความสูงของหน้าต่าง (windowHeightSizeClass) — มีประโยชน์สำหรับการวางแนวแนวนอนและหน้าต่างเดสก์ท็อป

Window Size Class ใน Jetpack Compose

ใน Jetpack Compose Window Size Class ใช้ผ่านฟังก์ชัน currentWindowAdaptiveInfo() ซึ่งส่งคืน WindowAdaptiveInfo พร้อมคลาสความกว้างและความสูง ฟังก์ชันนี้ไม่เพียงคำนึงถึงขนาดหน้าต่าง แต่ยังรวมถึงประเภทอินพุต (คีย์บอร์ด เมาส์ สัมผัส) — ผ่าน WindowPosture และ WindowLayoutInfo

สถานการณ์ทั่วไปคือการสลับระหว่างเลย์เอาต์ตามคลาส ตัวอย่างเช่น ใน Compact แสดง BottomSheet พร้อมตัวเลือก ใน Medium — แผงด้านข้าง ใน Expanded — Navigation Drawer ถาวร

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

ใน Material Design 3 คอมโพเนนต์ NavigationSuiteScaffold ปรับตัวเข้ากับ Window Size Class โดยอัตโนมัติ — นักพัฒนาไม่จำเป็นต้องเขียนตรรกะแบบมีเงื่อนไข

Window Size Class และ Material Design 3

Material Design 3 (Material You) ถูกรวมเข้ากับ Window Size Class อย่างสมบูรณ์ ระบบเลย์เอาต์แบบปรับเปลี่ยนได้ใน Material 3 กำหนดว่าควรใช้คอมโพเนนต์การนำทางใดสำหรับแต่ละคลาส: BottomNavigation สำหรับ Compact, NavigationRail สำหรับ Medium, NavigationDrawer สำหรับ Expanded

การรวมนี้ทำงานในระดับ Adaptive API ซึ่งรวม Window Size Class เข้ากับสัญญาณอื่น ๆ — FoldState (อุปกรณ์พับได้) และ WindowPosture (ตำแหน่งหน้าจอ) Adaptive API พร้อมใช้งานผ่านไลบรารี material3-adaptive

Material 3 มีคอมโพเนนต์แบบปรับเปลี่ยนได้ระดับสูงสี่รายการ: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold และ AdaptiveSheet แต่ละรายการเปลี่ยนพฤติกรรมตาม Window Size Class โดยไม่ต้องกำหนดค่าเพิ่มเติม

ประโยชน์ของเลย์เอาต์แบบปรับเปลี่ยนได้

การใช้ Window Size Class ให้ข้อได้เปรียบสำคัญสามประการในการพัฒนาแอปมือถือ ข้อแรก — ความสามารถในการคาดเดา: แทนที่จะรวมขนาดหน้าจอเป็นร้อยแบบ นักพัฒนาทำงานกับสามคลาส ซึ่งลดจำนวนสถานการณ์ทดสอบและ บั๊ก ที่เกี่ยวข้องกับเลย์เอาต์ลงอย่างรุนแรง

ข้อสอง — การปรับตัวอัตโนมัติกับโหมดหลายหน้าต่าง เมื่อผู้ใช้เข้าสู่ Split Screen ความกว้างหน้าต่างจะเปลี่ยน — Window Size Class คำนวณใหม่ทันทีและอินเทอร์เฟซปรับตัว หากไม่มี API นี้ แอปในหน้าจอแยกจะแสดงเวอร์ชันอินเทอร์เฟซโทรศัพท์ที่ลดขนาดลง

ข้อสาม — ความสอดคล้องกับ Material Design 3 Google ได้สร้าง Window Size Class ไว้ในระบบคอมโพเนนต์แบบปรับเปลี่ยนได้ ดังนั้นอินเทอร์เฟซที่สร้างบน Material 3 จะปฏิบัติตามคำแนะนำการออกแบบหน้าจอใหญ่ของ Google โดยอัตโนมัติโดยไม่ต้องทำงานเพิ่มเติม