Адаптивный UI проще, чем кажется

Раньше с Android View, если требовалось поддержать верстку для планшетов, довольно часто просто делали отдельную верстку с нуля, и несмотря на то, что можно было расположить несколько фрагментов на одном экране, это не избавляло от сложностей навигации 🥲

Теперь же с приходом Compose и нового api делать адаптивную верстку стало значительно проще. И вот несколько рекомендаций как сделать современный адаптивный UI:

1️⃣ Не используйте флаги вроде isTablet и т.д., используйте window size classes для динамического определения размера окна: Compact, Medium, Expanded

2️⃣ Используйте готовые адаптивные компоненты вроде ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold

3️⃣ Рассмотрите возможность использования LazyGrid вместо LazyList

4️⃣ Меняйте расположение UI компонентов с помощью BoxWithConstraint и movableContentOf во избежание лишних рекомпозиций

5️⃣ Не блокируйте ориентацию экрана и не отключайте resizeableActivity

6️⃣ Меняйте размер и соотношение сторон у UI компонентов в зависимости от размеров окна

🌳 В Decompose также появилась поддержка адаптивной навигации и благодаря ChildPanels реализовать list-detail навигацию стало очень просто без лишнего бойлерплейта.

А есть ли адаптивная верстка в вашем приложении ❓
🫡 — только screenOrientation portrait, только хардкор
😎 — есть адаптивная верстка под любые экраны

#Compose #AdaptiveUI
@kotlin_adept