Стабильная версия адаптивного макета Material 3 1.2.0

Мы рады сообщить, что адаптивный макет Material 3 версии 1.2.0 теперь стабилен.

В этом выпуске мы продолжаем развивать возможности предыдущих версий, добавляя поддержку большего количества точек останова для классов размеров окон и новые стратегии автоматического размещения панелей.

Что нового в версии 1.2.0 библиотеки Material 3 Adaptive

Этот стабильный выпуск основан на поддержке WindowManager 1.5.0 для больших и очень больших точек останова и представляет новые стратегии перекомпоновки и зависания для ListDetailPaneScaffold и SupportingPaneScaffold. 

Новые классы размеров окон: "Большой" и "Очень большой"

В версии 1.5.0 библиотеки WindowManager появились две новые точки останова для класса размера окна по ширине, которые позволяют поддерживать окна большего размера, чем класс "Развернутое окно". Чтобы включить точки останова "Большой" (L) и "Очень большой" (XL), добавьте в вызов currentWindowAdaptiveInfo() в базе кода следующий параметр:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Этот флаг позволяет библиотеке возвращать точки останова L и XL, когда они необходимы.

Новые адаптивные стратегии: перекомпоновка и левитация

Расположение контента и панелей в окне – сложная задача, при решении которой необходимо учитывать множество факторов, начиная с размера окна. Новая адаптивная библиотека Material 3 позволяет создавать адаптивные макеты с минимальными усилиями. В этом вам помогут две новые технологии.

При перекомпоновке панели перестраиваются при изменении размера или соотношения сторон окна. Если окно достаточно широкое, вторая панель размещается рядом с первой, а если окно высокое, вторая панель размещается под первой. Этот метод также применяется, когда окно уменьшается: контент перекомпоновывается вниз.

Перекомпоновка панели в зависимости от размера окна

Перекомпоновка – отличный вариант во многих случаях, но иногда контент нужно закрепить сбоку окна или поднять над ним. Стратегия "Левитация" не только закрепляет контент, но и позволяет настраивать такие функции, как возможность перетаскивания и изменения размера, а также затемнение фона.

Как переместить панель из боковой части в центр экрана с учетом соотношения сторон

Стратегии flow и levitate можно объявить в конструкторе Navigator с помощью параметра adaptStrategies. Обе стратегии можно применить к панели со списком и подробными сведениями и к вспомогательной панели scaffolds:

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

Чтобы узнать больше о том, как использовать новые адаптивные стратегии, посетите сайт Material и ознакомьтесь с образцами кода на GitHub.