เรายินดีที่จะประกาศให้ทราบว่า Material 3 Adaptive 1.2.0 พร้อมใช้งานแล้ว

การเปิดตัวครั้งนี้ยังคงต่อยอดจากรากฐานของเวอร์ชันก่อนๆ โดยขยายการรองรับเบรกพอยต์เพิ่มเติมสำหรับคลาสขนาดหน้าต่างและกลยุทธ์ใหม่ในการวางบานหน้าต่างแสดงผลโดยอัตโนมัติ

มีอะไรใหม่ใน Material 3 Adaptive 1.2.0

รุ่นเสถียรนี้สร้างขึ้นจากการรองรับ WindowManager 1.5.0 สำหรับเบรกพอยต์ขนาดใหญ่และใหญ่พิเศษ และนำเสนอกลยุทธ์การปรับข้อความและเลื่อนใหม่สำหรับ ListDetailPaneScaffold และ SupportingPaneScaffold 

คลาสขนาดหน้าต่างใหม่: ใหญ่และใหญ่พิเศษ

WindowManager 1.5.0 ได้เปิดตัวเบรกพอยต์ใหม่ 2 รายการสำหรับคลาสขนาดหน้าต่างความกว้างเพื่อรองรับหน้าต่างที่ใหญ่กว่าคลาสขนาดหน้าต่างแบบขยาย คุณเปิดใช้จุดพักขนาดใหญ่ (L) และขนาดใหญ่พิเศษ (XL) ได้โดยเพิ่มพารามิเตอร์ต่อไปนี้ลงในการเรียก currentWindowAdaptiveInfo() ในฐานของโค้ด

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

โดยแฟล็กนี้จะช่วยให้ไลบรารีแสดงเบรกพอยต์ L และ XL ได้ด้วยทุกเมื่อที่จำเป็น

กลยุทธ์การปรับใหม่: การปรับข้อความให้ไหลและลอย

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

เมื่อใช้การจัดวางใหม่ ระบบจะจัดเรียงแผงใหม่เมื่อขนาดหน้าต่างหรือสัดส่วนการแสดงผลเปลี่ยนแปลง โดยจะวางแผงที่ 2 ไว้ข้างแผงแรกเมื่อหน้าต่างกว้างพอ หรือจัดวางแผงที่ 2 ใหม่ไว้ใต้แผงแรกเมื่อใดก็ตามที่หน้าต่างสูงขึ้น เทคนิคนี้ยังใช้ได้เมื่อหน้าต่างมีขนาดเล็กลงด้วย โดยเนื้อหาจะไหลไปที่ด้านล่าง

การปรับโฟลว์ของบานหน้าต่างตามขนาดหน้าต่าง

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

เลื่อนแผงจากด้านข้างไปตรงกลางตามสัดส่วนภาพ

ทั้งกลยุทธ์โฟลว์และกลยุทธ์เลวิเทตสามารถประกาศภายในNavigatorเครื่องมือสร้างโดยใช้พารามิเตอร์ adaptStrategies และสามารถใช้ทั้ง 2 กลยุทธ์กับรายละเอียดรายการและแผงสนับสนุน scaffolds ได้

val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>(
        adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(
            detailPaneAdaptStrategy = AdaptStrategy.Reflow(
                reflowUnder = ListDetailPaneScaffoldRole.List
            ),
            extraPaneAdaptStrategy = AdaptStrategy.Levitate(
                alignment = Alignment.Center
            )
        )
    )

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ประโยชน์จากกลยุทธ์แบบปรับได้ใหม่เหล่านี้ได้ที่เว็บไซต์ Material และโค้ดตัวอย่างฉบับสมบูรณ์ใน GitHub