คลาสขนาดหน้าต่างคือชุดเบรกพอยท์ของวิวพอร์ตตามความคิดเห็นที่จะช่วยคุณ ออกแบบ พัฒนา และทดสอบเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้ ความสมดุลของเบรกพอยท์ การออกแบบที่เรียบง่ายด้วยความยืดหยุ่นในการเพิ่มประสิทธิภาพแอปให้เหมาะกับกรณีที่ไม่ซ้ำ
คลาสขนาดหน้าต่างจะจัดหมวดหมู่พื้นที่แสดงผลที่พร้อมใช้งานสำหรับแอปของคุณเป็น compact, medium หรือ expanded ความกว้างและความสูงที่ใช้ได้จะได้รับการจัดประเภท แยกกัน ดังนั้นในทุกช่วงเวลา แอปของคุณจะมีขนาดหน้าต่าง 2 ขนาด คลาสหนึ่งสำหรับความกว้างและความสูง ความกว้างที่ใช้ได้มักจะมากกว่า สำคัญกว่าความสูงที่มีอยู่ เนื่องจากการเลื่อนดูในแนวตั้งอย่างแพร่หลาย คลาสขนาดหน้าต่างความกว้างมักจะเกี่ยวข้องกับ UI ของแอปคุณมากกว่า
เบรกพอยท์จะช่วยให้คุณคิดต่อไปเรื่อยๆ ได้ตามที่แสดงให้เห็นในตัวเลข เกี่ยวกับเลย์เอาต์ในแง่ของอุปกรณ์และการกำหนดค่า เบรกพอยท์คลาสแต่ละขนาด เป็นกรณีที่พบได้เป็นส่วนใหญ่สำหรับสถานการณ์ทั่วไปของอุปกรณ์ ของกรอบอ้างอิง ขณะที่คุณนึกถึงการออกแบบ โดยใช้เบรกพอยท์ เลย์เอาต์
ประเภทขนาด | เบรกพอยท์ | การนำเสนออุปกรณ์ |
---|---|---|
ความกว้างกะทัดรัด | ความกว้าง < 600dp | 99.96% ของโทรศัพท์ในแนวตั้ง |
ความกว้างปานกลาง | 600dp ≤ ความกว้าง < 840dp | 93.73% ของแท็บเล็ตในแนวตั้ง
หน้าจอด้านในที่กางออกขนาดใหญ่ที่สุดในแนวตั้ง |
ความกว้างเมื่อขยาย | ความกว้าง ≥ 840dp | แท็บเล็ต 97.22% ในแนวนอน
หน้าจอที่กางออกขนาดใหญ่ที่สุดในแนวนอน |
ความสูงกะทัดรัด | ความสูง < 480dp | 99.78% ของโทรศัพท์ในแนวนอน |
ความสูงปานกลาง | 480dp ≤ ความสูง < 900dp | แท็บเล็ต 96.56% ในแนวนอน
97.59% ของโทรศัพท์ในแนวตั้ง |
ความสูงเมื่อขยาย | ความสูง ≥ 900dp | 94.25% ของแท็บเล็ตในแนวตั้ง |
แม้ว่าการแสดงภาพคลาสขนาดเป็นอุปกรณ์จริงจะมีประโยชน์ แต่ขนาดของหน้าต่าง ขนาดของหน้าจอของอุปกรณ์ไม่ได้เป็นตัวกำหนดคลาสไว้อย่างชัดเจน หน้าต่าง คลาสขนาดไม่ได้มีไว้สำหรับตรรกะประเภท isTablet เปลี่ยนเป็นหน้าต่าง คลาสขนาดต่างๆ จะกำหนดโดยขนาดหน้าต่างที่พร้อมใช้งานสำหรับแอปพลิเคชันของคุณ โดยไม่คํานึงถึงอุปกรณ์ประเภทที่แอปกําลังใช้อยู่ ซึ่งมีส่วนสำคัญ 2 ประการ ผลกระทบ:
อุปกรณ์จริงไม่รับประกันคลาสขนาดหน้าต่างที่เจาะจง พื้นที่หน้าจอที่พร้อมใช้งานสำหรับแอปของคุณอาจแตกต่างจากขนาดหน้าจอของ อุปกรณ์นี้ด้วยเหตุผลหลายประการ ในอุปกรณ์เคลื่อนที่ โหมดแยกหน้าจอสามารถ แบ่งหน้าจอระหว่าง 2 แอปพลิเคชัน ใน ChromeOS แอป Android สามารถทำสิ่งต่อไปนี้ แสดงในหน้าต่างรูปแบบอิสระที่ปรับขนาดได้ตามต้องการ อุปกรณ์แบบพับได้มีหน้าจอขนาดแตกต่างกัน 2 หน้าจอเข้าถึงแยกกัน ด้วยการพับหรือกางอุปกรณ์
คลาสขนาดหน้าต่างอาจเปลี่ยนแปลงได้ตลอดอายุของแอป ขณะที่แอปทำงานอยู่ การวางแนวของอุปกรณ์จะเปลี่ยนไป การทำงานหลายอย่างพร้อมกัน และ การพับ/การกางอาจเปลี่ยนพื้นที่หน้าจอที่มีอยู่ เพื่อ คลาสขนาดหน้าต่างจะเป็นแบบไดนามิก และ UI ของแอปควรปรับ ตามนั้น
คลาสขนาดหน้าต่างจะแมปกับเบรกพอยท์แบบกะทัดรัด ปานกลาง และขยายใน เลย์เอาต์ดีไซน์ Material คำแนะนำ ใช้คลาสขนาดหน้าต่างเพื่อตัดสินใจเกี่ยวกับเลย์เอาต์ของแอปพลิเคชันในระดับสูง เช่น การตัดสินใจว่าจะใช้เค้าโครงหน้า Canonical ที่เจาะจงเพื่อใช้ประโยชน์จาก พื้นที่หน้าจอเพิ่มเติม
คำนวณ WindowSizeClass
ปัจจุบันโดยใช้
ฟังก์ชันระดับบนสุด currentWindowAdaptiveInfo()
ของ
คลัง androidx.compose.material3.adaptive
ฟังก์ชันนี้จะแสดงค่า
อินสแตนซ์ของ WindowAdaptiveInfo
ซึ่งมี windowSizeClass
ตัวอย่างต่อไปนี้จะแสดงวิธีคำนวณคลาสขนาดหน้าต่างและรับ
จะอัปเดตเมื่อคลาสขนาดหน้าต่างมีการเปลี่ยนแปลง:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
จัดการเลย์เอาต์ด้วยคลาสขนาดหน้าต่าง
คลาสขนาดหน้าต่างจะช่วยให้คุณเปลี่ยนเลย์เอาต์ของแอปเป็นพื้นที่แสดงผลได้ สำหรับการเปลี่ยนแปลงของแอป เช่น เมื่ออุปกรณ์พับหรือกางออก การวางแนวของอุปกรณ์เปลี่ยนไป หรือปรับขนาดหน้าต่างแอปในหลายหน้าต่าง
แปลตรรกะเพื่อรับมือกับการเปลี่ยนแปลงขนาดการแสดงผลโดยการส่งขนาดหน้าต่าง คลาสลงเป็นสถานะไปยัง Composable ที่ซ้อนกันอยู่เช่นเดียวกับสถานะอื่นๆ ของแอป
@OptIn(ExperimentalMaterial3AdaptiveApi::class) @Composable fun MyApp( windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass ) { // Perform logic on the size class to decide whether to show the top app bar. val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag. MyScreen( showTopAppBar = showTopAppBar, /* ... */ ) }
คลาสขนาดหน้าต่างทดสอบ
เมื่อเปลี่ยนเลย์เอาต์ ให้ทดสอบลักษณะการทำงานของเลย์เอาต์ในทุกหน้าต่างขนาด โดยเฉพาะที่ความกว้างเบรกพอยท์ที่กะทัดรัด ปานกลาง และขยายแล้ว
หากคุณมีเลย์เอาต์สำหรับหน้าจอแบบกะทัดรัดอยู่แล้ว ให้เพิ่มประสิทธิภาพเลย์เอาต์ก่อน สำหรับคลาสขนาดความกว้างที่ขยาย เนื่องจากคลาสขนาดนี้จะมีพื้นที่มากที่สุด เพื่อดูเนื้อหาและการเปลี่ยนแปลง UI เพิ่มเติม จากนั้นตัดสินใจว่าเลย์เอาต์ใดที่เหมาะกับ คลาสความกว้างปานกลาง ให้พิจารณาเพิ่มการออกแบบพิเศษ
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้คลาสขนาดหน้าต่างเพื่อสร้างการปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้ โปรดดูวิธีต่อไปนี้
สำหรับเลย์เอาต์แบบ Compose: รองรับหน้าจอขนาดต่างๆ
สำหรับเลย์เอาต์ที่อิงตามมุมมอง: การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้พร้อมด้วยมุมมอง
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่ทำให้แอปทำงานได้ดีในอุปกรณ์และหน้าจอทุกขนาด ดู: