Библиотека мобильного разработчика | Android, iOS, Swift, Retrofit, Moshi, Chuck

🆒 5 трюков Jetpack Compose, о которых вы, вероятно, не знаете

Рассмотрим 5 недооцененных или малоизвестных трюков с пользовательским интерфейсом в Jetpack Compose, которые помогут вам создавать более эффективные, красивые и удобные в обслуживании пользовательские интерфейсы.

1️⃣ Анимируйте видимости с помощью переходов Enter/Exit

Вместо того чтобы переключать видимость с помощью if (visible) Box {}, вы можете использовать AnimatedVisibility для чистой анимации входа и выхода.

AnimatedVisibility(
    visible = showDetails,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically()
) {
    Text("Here's a smooth transition")
}

Почему это важно: это избавляет от необходимости ручной обработки анимации и мгновенно улучшает UX.

2️⃣ Используйте модификатора Layout для создания кастомных макетов

Иногда стандартных Row, Column и Box недостаточно. Тогда на помощь приходит модификатор Modifier.layout.

Modifier.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(placeable.width, placeable.height) {
        // Flip layout horizontally
        placeable.placeRelative(-placeable.width, 0)
    }
}

Пример использования: создание зеркальных макетов, переворачивание компонентов или нестандартное расположение UI.

3️⃣ Разделяйте элементы в LazyColumn

Хотите вставить разделитель или пробел между каждым элементом?

LazyColumn {
    itemsIndexed(items) { index, item ->
        Text(item)
        if (index != items.lastIndex) {
            Divider()
        }
    }
}

Бонус: вы можете не ограничиваться разделителями, а вставлять между рядами рекламу, советы или информационный контент.

4️⃣ Используйте drawBehind для расширения фонового рисунка за пределы границ

Функция drawBehind позволяет рисовать за макетом компонента, игнорируя отступы или даже рисуя за пределами границ.

Modifier
    .padding(16.dp)
    .drawBehind {
        drawRect(Color.Gray)
    }

Пример: добавьте тень или градиентный фон, выходящий за границы содержимого.

5️⃣ Закрепляйте заголовки в LazyColumn с помощью stickyHeader

Jetpack Compose имеет нативную поддержку «липких» заголовков:

LazyColumn {
    stickyHeader {
        Text(
            "Section Title",
            modifier = Modifier.background(Color.White)
        )
    }
    items(data) {
        Text(it)
    }
}

Отлично подходит для: групповых списков (например, контакты A-Z), разделов чата по дате и т.д.

Делитесь в комментариях лайфхаками, которыми вы пользуетесь 💬

🐸 Библиотека мобильного разработчика

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6🔥4🌚4

www.tgoop.com/mobileproglib/5878

1.27K viewsMay 30 at 16:07

🆒 5 трюков Jetpack Compose, о которых вы, вероятно, не знаете

Рассмотрим 5 недооцененных или малоизвестных трюков с пользовательским интерфейсом в Jetpack Compose, которые помогут вам создавать более эффективные, красивые и удобные в обслуживании пользовательские интерфейсы.

1️⃣ Анимируйте видимости с помощью переходов Enter/Exit

Вместо того чтобы переключать видимость с помощью if (visible) Box {}, вы можете использовать AnimatedVisibility для чистой анимации входа и выхода.

AnimatedVisibility(
    visible = showDetails,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically()
) {
    Text("Here's a smooth transition")
}

Modifier.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(placeable.width, placeable.height) {
        // Flip layout horizontally
        placeable.placeRelative(-placeable.width, 0)
    }
}

LazyColumn {
    itemsIndexed(items) { index, item ->
        Text(item)
        if (index != items.lastIndex) {
            Divider()
        }
    }
}

Modifier
    .padding(16.dp)
    .drawBehind {
        drawRect(Color.Gray)
    }

LazyColumn {
    stickyHeader {
        Text(
            "Section Title",
            modifier = Modifier.background(Color.White)
        )
    }
    items(data) {
        Text(it)
    }
}