Когда я только начал работать с Jetpack Compose, адаптивная вёрстка казалась сложной. Но после нескольких проектов и множества ошибок я выработал подход, который позволяет создавать интерфейсы, работающие на любых устройствах — от компактных смартфонов до планшетов и foldable-устройств.
В этой статье я поделюсь проверенными методами, которые использую сам.
1. Как я определяю размер экрана
Раньше я использовал жесткие значения вроде 600.dp, но это приводило к багам на некоторых устройствах. Теперь я работаю через WindowSizeClass, который делит экраны на три категории:
- Compact (телефоны)
- Medium (планшеты в книжной ориентации, foldable в сложенном состоянии)
- Expanded (планшеты в альбомной ориентации, десктопы)
Мой код:
Почему так лучше?
- Не нужно гадать, какие dp считать планшетом.
- Система сама определяет логические границы.
2. Как я делаю гибкие макеты
BoxWithConstraints — мой любимый инструмент
Раньше я использовал несколько @Composable для разных экранов, но это усложняло поддержку. Теперь я чаще применяю BoxWithConstraints, который даёт информацию о доступном пространстве прямо внутри композиции.
Weight и fillMaxSize — основа адаптивности
Я заметил, что многие новички фиксируют размеры, из-за чего интерфейс ломается на больших экранах. Вместо этого я использую:
- Modifier.weight() — для гибкого распределения пространства
- Modifier.fillMaxWidth(fraction) — для относительного растягивания
Как я применяю:
3. Как я адаптирую навигацию
Раньше я везде использовал BottomNavigation, но на планшетах это выглядело нелепо. Теперь я делаю так:
- На телефонах — BottomNavigation
- На планшетах — NavigationRail
- На десктопах — PermanentNavigationDrawer
Моя реализация:
4. Как я работаю с изображениями и списками
Адаптивные изображения
Раньше они растягивались или обрезались, пока я не начал использовать:
Списки на широких экранах
Вместо обычного LazyColumn на планшетах я применяю LazyVerticalGrid:
Вывод: мой чек-лист для адаптивности
- Всегда начинаю с WindowSizeClass.
- Избегаю жестких размеров, использую weight и fillMaxWidth.
- Тестирую на эмуляторах с разными DPI.
- Оптимизирую навигацию под тип устройства.
- Использую BoxWithConstraints для сложных случаев.
Если внедрить эти принципы, интерфейсы станут по-настоящему адаптивными. Попробуйте — и вы сразу заметите разницу!
Есть вопросы? Пишите в комментарии, разберёмся вместе. 🚀