🤖 ⚙️ Адаптивность под разные экраны — одна из тех вещей, которые откладывают до последнего. А когда приходит требование поддержать планшет, начинается боль. Хотя в Compose это решается в несколько строк.

GridCells.Adaptive сам рассчитывает колонки под доступное пространство — ничего не нужно задавать вручную:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 160.dp),
    modifier = Modifier.fillMaxSize()
) {
    items(list) { ItemCard(it) }
}

Но почти всегда забывают про пагинацию. pageSize хардкодят, и это ломает всю адаптивность. На планшете с 4 колонками те же 20 элементов — это 5 строк. Пользователь упирается в конец страницы раньше чем успел проскроллить.

Правильно — считать pageSize от реального числа колонок:

BoxWithConstraints {
    val columns = (maxWidth / 160.dp)
        .toInt().coerceAtLeast(1)
    val rows = (maxHeight / 120.dp)
        .toInt().coerceAtLeast(1)
    val pageSize = columns * rows

    val items = remember(pageSize) {
        Pager(PagingConfig(pageSize = pageSize)) { MyPagingSource() }
    }.flow.collectAsLazyPagingItems()

    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 160.dp)
    ) {
        items(items.itemCount) { ItemCard(items[it]) }
    }
}

На смартфоне выйдет ~10 элементов, на планшете ~30. Никаких магических чисел — только математика от реального пространства.

Самый хороший пример тут - галерея. Они показывают адаптивную сетку контента и имеет возможность настройки другого расположения элементов

🔗 Lazy lists and grids — Android Developers

#Compose #Android #AndroidDev #Ui #Adaptive #Адаптивность