Phone – Foldable – Tablet

Кто такой NavigationSuiteScaffold

NavigationSuiteScaffold – компонент для верхнеуровневой навигации. Он сам подбирает подходящий навигационный UI под размер окна приложения. Одно и то же приложение должно быть удобным и на телефоне, и на планшете, и в десктопном окне. Для компактного экрана будет использоваться нижняя панель навигации, а для более широкого – вертикальная Rail-навигация, потому что она лучше использует горизонтальное пространство.

С обычным Scaffold всю эту логику – когда показывать NavigationBar, когда NavigationRail и как это синхронизировать с окном – ты пишешь и поддерживаешь сам. Он не умеет сам выбирать тип навигации. В рекомендациях по адаптивному UI рекомендуется использовать готовые API вместо ручного переизобретения такого поведения.

• :kotlin-black: Код Scaffold с NavigationBar
• :image: Картинка Scaffold c NavigationBar

Подключить:

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

Миграция со Scaffold на NavigationSuiteScaffold

Перейдем с ручного Scaffold + BottomAppBar на NavigationSuiteScaffold, но пока без отображения Rail на планшетах и десктопах. Ограничим navigationSuiteType значением NavigationSuiteType.ShortNavigationBarCompact. Это позволит уже сейчас перейти на новый API NavigationSuiteScaffold, но сохранить привычный bottom bar во всех форм-факторах.

• :kotlin-black: Код NavigationSuiteScaffold с ShortNavigationBarCompact
• :image: Картинка NavigationSuiteScaffold c ShortNavigationBarCompact

Автоматический выбор типа навигации navigationSuiteType

Добавим автоматическое переключение между нижней панелью и боковой в зависимости от ширины экрана. Для этого используется параметр navigationSuiteType. Он поддерживает следующие значения:

ShortNavigationBarCompact

ShortNavigationBarMedium

WideNavigationRailCollapsed

WideNavigationRailExpanded