Material 3 Adaptive 1.2.0 đã ổn định

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 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 cho các lớp kích thước cửa sổ và các chiến lược mới để tự động đặt 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 điều chỉnh luồng và nâng lên 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ổ có kích thước lớn hơn cả lớp kích thước cửa sổ Mở rộng. Bạn có thể bật điểm ngắt Lớn (L) và Rất lớn (XL) bằng cách thêm tham số sau vào lệnh gọi currentWindowAdaptiveInfo() trong toàn bộ mã nguồn của mình:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Cờ này cho phép thư viện 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: reflow (tái cấu trúc) và levitate (nổi)

Sắp xếp nội dung và ngăn hiển thị trong một cửa sổ là một việc 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 Thích ứng Material 3 mới, 2 công nghệ mới có thể giúp bạn đạt được bố cục thích ứng mà không tốn nhiều công sức.

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

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

Mặc dù việc 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ần được gắn vào một bên của cửa sổ hoặc nổi lên trên cửa sổ đó. Chiến lược levitate 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.

Di chuyển một ngăn từ bên cạnh vào giữa dựa trên tỷ lệ khung hình

Bạn có thể khai báo cả chiến lược di chuyển và chiến lược nâng lên trong hàm khởi tạo Navigator bằng cách sử dụng tham số adaptStrategies, đồng thời có thể áp dụng cả hai chiến lược này cho ngăn 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.