Добавить в корзинуПозвонить
Найти в Дзене
Кодовые решения
39 подписчиков

Jetpack Compose без боли: адаптивность, которая работает

35
1 мин
Когда я только начал работать с Jetpack Compose, адаптивная вёрстка казалась сложной. Но после нескольких проектов и множества ошибок я выработал подход, который позволяет создавать интерфейсы, работающие на любых устройствах — от компактных смартфонов до планшетов и foldable-устройств. В этой статье я поделюсь проверенными методами, которые использую сам. Раньше я использовал жесткие значения вроде 600.dp, но это приводило к багам на некоторых устройствах. Теперь я работаю через WindowSizeClass, который делит экраны на три категории: Мой код: Почему так лучше? Раньше я использовал несколько @Composable для разных экранов, но это усложняло поддержку. Теперь я чаще применяю BoxWithConstraints, который даёт информацию о доступном пространстве прямо внутри композиции. Я заметил, что многие новички фиксируют размеры, из-за чего интерфейс ломается на больших экранах. Вместо этого я использую: Как я применяю: Раньше я везде использовал BottomNavigation, но на планшетах это выглядело нелепо.
Оглавление

Когда я только начал работать с Jetpack Compose, адаптивная вёрстка казалась сложной. Но после нескольких проектов и множества ошибок я выработал подход, который позволяет создавать интерфейсы, работающие на любых устройствах — от компактных смартфонов до планшетов и foldable-устройств.

В этой статье я поделюсь проверенными методами, которые использую сам.

1. Как я определяю размер экрана

Раньше я использовал жесткие значения вроде 600.dp, но это приводило к багам на некоторых устройствах. Теперь я работаю через WindowSizeClass, который делит экраны на три категории:

  • Compact (телефоны)
  • Medium (планшеты в книжной ориентации, foldable в сложенном состоянии)
  • Expanded (планшеты в альбомной ориентации, десктопы)

Мой код:

-2

Почему так лучше?

  • Не нужно гадать, какие dp считать планшетом.
  • Система сама определяет логические границы.

2. Как я делаю гибкие макеты

BoxWithConstraints — мой любимый инструмент

Раньше я использовал несколько @Composable для разных экранов, но это усложняло поддержку. Теперь я чаще применяю BoxWithConstraints, который даёт информацию о доступном пространстве прямо внутри композиции.

-3

Weight и fillMaxSize — основа адаптивности

Я заметил, что многие новички фиксируют размеры, из-за чего интерфейс ломается на больших экранах. Вместо этого я использую:

  • Modifier.weight() — для гибкого распределения пространства
  • Modifier.fillMaxWidth(fraction) — для относительного растягивания

Как я применяю:

-4

3. Как я адаптирую навигацию

Раньше я везде использовал BottomNavigation, но на планшетах это выглядело нелепо. Теперь я делаю так:

  • На телефонах — BottomNavigation
  • На планшетах — NavigationRail
  • На десктопах — PermanentNavigationDrawer

Моя реализация:

-5

4. Как я работаю с изображениями и списками

Адаптивные изображения

Раньше они растягивались или обрезались, пока я не начал использовать:

-6

Списки на широких экранах

Вместо обычного LazyColumn на планшетах я применяю LazyVerticalGrid:

-7

Вывод: мой чек-лист для адаптивности

  1. Всегда начинаю с WindowSizeClass.
  2. Избегаю жестких размеров, использую weight и fillMaxWidth.
  3. Тестирую на эмуляторах с разными DPI.
  4. Оптимизирую навигацию под тип устройства.
  5. Использую BoxWithConstraints для сложных случаев.

Если внедрить эти принципы, интерфейсы станут по-настоящему адаптивными. Попробуйте — и вы сразу заметите разницу!

Есть вопросы? Пишите в комментарии, разберёмся вместе. 🚀