Chúng tôi rất vui mừng thông báo rằng Material 3 Adaptive 1.2.0 hiện đã ổn định!

Bản phát hành này tiếp tục xây dựng dựa trên nền tảng của các phiên bản trước, mở rộng khả năng hỗ trợ cho nhiều điểm ngắt hơn đối với các lớp kích thước cửa sổ và các chiến lược mới để tự động đặt các ngăn hiển thị.

Tính năng mới trong Material 3 Adaptive 1.2.0

Bản phát hành ổn định này được xây dựng dựa trên khả năng hỗ trợ WindowManager 1.5.0 cho các điểm ngắt lớn và cực lớn, đồng thời giới thiệu các chiến lược mới về việc sắp xếp lại và nâng cao cho ListDetailPaneScaffold và SupportingPaneScaffold. 

Các lớp kích thước cửa sổ mới: Lớn và Cực lớn

WindowManager 1.5.0 đã giới thiệu 2 điểm ngắt mới cho lớp kích thước cửa sổ theo chiều rộng để hỗ trợ các cửa sổ lớn hơn cả lớp kích thước cửa sổ Mở rộng. Bạn có thể bật các điểm ngắt Lớn (L) và Cực lớn (XL) bằng cách thêm tham số sau vào lệnh gọi currentWindowAdaptiveInfo() trong cơ sở mã của mình:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Cờ này cho phép thư viện cũng trả về các điểm ngắt L và XL bất cứ khi nào cần.

Các chiến lược thích ứng mới: sắp xếp lại và nâng cao

Việc sắp xếp nội dung và các ngăn hiển thị trong một cửa sổ là một nhiệm vụ phức tạp cần phải tính đến nhiều yếu tố, bắt đầu từ kích thước cửa sổ. Với thư viện Material 3 Adaptive mới, 2 công nghệ mới có thể giúp bạn đạt được bố cục thích ứng với nỗ lực tối thiểu.

Với sắp xếp lại, các ngăn sẽ được sắp xếp lại khi kích thước cửa sổ hoặc tỷ lệ khung hình thay đổi, đặt ngăn thứ hai ở bên cạnh ngăn đầu tiên khi cửa sổ đủ rộng hoặc sắp xếp lại ngăn thứ hai bên dưới ngăn đầu tiên bất cứ khi nào cửa sổ cao hơn. Kỹ thuật này cũng được áp dụng khi cửa sổ trở nên nhỏ hơn: nội dung sẽ sắp xếp lại xuống dưới cùng.

Sắp xếp lại một ngăn dựa trên kích thước cửa sổ

Mặc dù sắp xếp lại là một lựa chọn tuyệt vời trong nhiều trường hợp, nhưng có thể có những tình huống mà nội dung có thể cần được gắn vào một bên của cửa sổ hoặc nâng cao lên trên cửa sổ đó. Chiến lược nâng cao không chỉ gắn nội dung mà còn cho phép bạn tuỳ chỉnh các tính năng như khả năng kéo, khả năng đổi kích thước và thậm chí cả lớp phủ nền.

Nâng cao một ngăn từ bên cạnh lên trung tâm dựa trên tỷ lệ khung hình

Bạn có thể khai báo cả chiến lược sắp xếp lại và nâng cao bên trong hàm khởi tạo Navigator bằng tham số adaptStrategies và có thể áp dụng cả 2 chiến lược cho danh sách chi tiết và ngăn hỗ trợ scaffolds:

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

Để tìm hiểu thêm về cách tận dụng các chiến lược thích ứng mới này, hãy xem trang web Material và mã mẫu hoàn chỉnh trên GitHub.