⚙️ Пример реализации подобной анимации в Compose. Весь подход выделили в библиотеку 🐱 ThemeAnimator, которую можете подключить к себе.

Анимация смены темы реализована через перехват отрисовки в Modifier.Node: сначала делается снимок UI в старой теме, затем тема переключается, фиксируется новое состояние и запускается анимация между двумя скриншотами. Переход рисуется как круговое раскрытие новой темы, что позволяет избежать мерцаний и добиться плавного эффекта.

#Compose #Анимация

⚙️ Compose Stability Analyzer 0.7.0 🔥

Вышел крупный релиз плагина для Android Studio. Две главные фичи:

👉 Recomposition Cascade Visualizer
Правый клик на любой @Composable → "Analyze Recomposition Cascade" — и получаешь дерево всех downstream-компонентов, которые будут перерисованы. Для каждого показывается статус (skippable / non-skippable), общая статистика и максимальная глубина. Двойной клик по узлу — переход к исходнику. Работает с защитой от циклов и ограничением глубины до 10 уровней.

👉 Live Recomposition Heatmap
Прямо в редакторе, над каждой composable-функцией, в реальном времени отображается количество рекомпозиций с подключённого устройства через ADB. Цветовая индикация:
🟢 < 10 — всё ок
🟡 10–50 — стоит присмотреться
🔴 50+ — проблема

Данные читаются из TraceRecomposition событий logcat. Поддерживается несколько устройств одновременно.

#Compose #Performance

#see Compose Multiplatform на ОС Аврора

Демонстрация сборки приложения Compose Multiplatform на эмулятор ОС Аврора.

▶️ Rutube

⚙️ Dejavu — тесты на рекомпозицию в Compose

Мэтт МакКенна выпустил библиотеку, которая превращает рекомпозиции в обычные test assertions. Dejavu решает проблемы постоянного мониторинга за рекомпозияцими без изменений в продакшн-коде — только Modifier.testTag(), который скорее всего у вас уже есть:

// Пример теста
@get:Rule
val composeTestRule = createRecompositionTrackingRule()

@Test
fun incrementCounter_onlyValueRecomposes() {
    composeTestRule.onNodeWithTag("inc_button").performClick()

    composeTestRule.onNodeWithTag("counter_value")
        .assertRecompositions(exactly = 1)

    composeTestRule.onNodeWithTag("counter_title")
        .assertStable() // ноль рекомпозиций
}

Когда тест падает, получаете структурированный отчёт:

UnexpectedRecompositionsError: testTag='product_header'
  Composable: demo.app.ui.ProductHeader (ProductList.kt:29)
  Expected: exactly 0 recomposition(s)
  Actual: 1 recomposition(s)

  All tracked composables:
    ProductListScreen = 1
    ProductHeader     = 1  <-- FAILED
    ProductItem       = 1

  Recomposition timeline:
    #1 at +0ms — param slots changed: [1] | parent: ProductListScreen

  Possible cause:
    1 state change(s) of type Int
    Parameter/parent change detected (dirty bits set)

Видно какой composable, сколько раз рекомпозировался и почему. Под капотом используется CompositionTracer API из compose-runtime 1.2.0, никаких Gradle-плагинов и байткод-манипуляций. Запускается как instrumented тест.

🐱 Dejavu Github

#Android #AndroidDev #Compose #JetpackCompose

⚙️ Анимации в Jetpack Compose LazyColumn: почему это сложнее, чем кажется

Наткнулся на отличный разбор от ребят из Т-Банка — они переписывали главный экран с XML+View на Compose и столкнулись с проблемой, которую многие, думаю, обходят стороной.

Суть: есть LazyColumn, в нём элемент с animateContentSize(). Когда элемент расширяется по высоте, нижние карточки не успевают сместиться в такт — небольшой, но заметный рассинхрон.

Казалось бы — поменяй spring на tween, синхронизируй тайминги и готово. Спойлер: нет.

1️⃣ Замена на линейный tween — разницы визуально почти ноль. Скорость placementSpec тоже не влияет на смещение нижних айтемов при ресайзе верхнего.

2️⃣ Установка placementSpec = null — синхронизация появляется, но полностью ломает анимацию перемещения айтемов. Не вариант.

3️⃣ Попытка написать свой модификатор — обречена с самого начала. LazyLayoutAnimationSpecsNode помечен как internal, а внутренний LazyLayoutItemAnimator, который реально управляет анимациями, недоступен снаружи. Скопировать код не выйдет — каст по типу вернёт null, и вся механика рассыпается. Форкать 5000+ строк LazyColumn — очевидно нет.

Самое интересное — анимация удаления при кастомной реализации не работает в принципе: к моменту DisposableEffect.onDispose элемент уже удалён из дерева. А стандартный animateItem работает на уровне layout-фазы и может буквально «удерживать» элемент в дереве до окончания анимации.

Итог у команды — оставили RecyclerView для списка, айтемы внутри на Compose. Костыль, но рабочий, пока Google не откроет нужные API. Issue уже создан, подписывайтесь если сталкивались.

Я лично не сталкивался с таким кейсом в продакшне, но статья хорошо показывает, где у Compose сейчас реальные границы расширяемости и что без View пока никуда.

#Android #Compose #AndroidDev #JetpackCompose #Анимация

🐱 Tracey - чёрный ящик для Compose-приложения

Tracey записывает все жесты, переходы между экранами и кастомные события в кольцевой буфер — и при краше сохраняет его для воспроизведения. Видишь не просто стектрейс, а весь путь пользователя до момента падения.

Не сразу понял куда её применить, но пришла идея интеграции в флоу автоматического прокликивания экрана:

Разрабатываешь фичу локально, кликаешь руками, что-то идёт не так. Вместо того чтобы объяснять разработчику или агенту на словах "я нажал сюда, потом перешёл туда, потом кнопка не сработала" — просто скидываешь ему дамп сессии из Tracey. Он сам восстанавливает картину и сразу работает с контекстом, а не с твоим пересказом.

Структурированный контекст для дебаг-сессии с агентом, чтобы дать четкую информацию.

Библиотека на версии 0.0.2, только вышла, в продакшен пока не потащу. Но для этапа разработки и связки с AI-агентами идея выглядит рабочей.

#Compose #Android #AndroidDev

🐱 Kompass — ещё одна навигация для Compose Multiplatform

Да, у нас уже есть Jetpack Navigation 3 с официальной поддержкой KMP. Тем не менее авторы Kompass смотрят на проблему иначе, и идея тут любопытная.

Суть в том, что вся навигация строится на чистых редукторах. Любой переход — это State + Command → State, без побочных эффектов. Вот как это выглядит в коде:

// Граф описывает, какие экраны в нём живут и как рендерятся
class MainNavigationGraph : NavigationGraph {
    override fun canResolveDestination(id: String) =
        id in setOf("home", "profile")

    @Composable
    override fun Content(entry: BackStackEntry, destination: Destination, navController: NavController) {
        when (destination) {
            is MainDestination.Home -> HomeScreen(navController)
            is MainDestination.Profile -> ProfileScreen(navController)
        }
    }
}

// Хост принимает список графов и рендерит текущий экран
@Composable
fun AppNavigation() {
    val navController = rememberNavController(
        startDestination = MainDestination.Home
    )
    KompassNavigationHost(
        navController = navController,
        graphs = persistentListOf(MainNavigationGraph())
    )
}

// Навигация из экрана
navController.navigate(
    entry = BackStackEntry(destinationId = "profile", scopeId = newScope())
)

// Возврат с результатом
navController.pop(result = ProfileResult(userId = "123"))

NavigationState и BackStackEntry иммутабельны, поэтому всю навигацию можно покрыть обычными unit-тестами без инструментации: создаёшь NavigationHandler, кидаешь команду, проверяешь стейт.

Особенности:
👉 Таргеты — Android, iOS, Desktop (JVM).
👉 Scopes вместо ViewModel. rememberScoped<T> живёт ровно пока BackStackEntry в стеке, автоматически чистится при pop.
👉 Multi-graph. Несколько независимых графов с собственными лейаутами. Из коробки есть поддержка master-detail для планшетов.
👉 Дип-линки. Через DeepLinkHandler — типизированный парсинг URI в NavigationCommand.
🛠 Библиотека ещё в активной разработке

#KMP #ComposeMultiplatform #Navigation #Kotlin #AndroidDev

⚙️ Запрещаем composable вне превью через @RequiresOptIn

Если composable нужен только для превью из другого модуля, internal не поможет. Зато поможет кастомная аннотация поверх @RequiresOptIn с уровнем ERROR.

kotlin@PreviewOnly
@Composable
fun renderScreenPreviewer(list: List) {
    renderList(list)
}

@RequiresOptIn(
    message = "This composable is intended for preview usage only",
    level = RequiresOptIn.Level.ERROR
)
@Retention(AnnotationRetention.BINARY)
@Target(AnnotationTarget.FUNCTION)
annotation class PreviewOnly

Теперь любой, кто попробует вызвать его в продакшн коде без @OptIn(PreviewOnly::class), получит ошибку компиляции, а не warning.

Небольшой минус: @OptIn(PreviewOnly::class) придётся писать в каждой превью-функции вручную, автоматического opt-in для @Preview нет. Но это копейки по сравнению с тем, что превью-composable физически не попадёт в продакшн.

Источник le0nidas.gr

#Compose

⚙️ Navigation3 1.1.0 стабилен

Самое интересное из нового: поддержка Shared Elements между экранами. Теперь достаточно обернуть NavDisplay в SharedTransitionLayout и передать scope:

SharedTransitionLayout {
    NavDisplay(
        backStack = backStack,
        sharedTransitionScope = this
    )
}

Второе большое добавление — SceneDecoratorStrategy. Отдельный интерфейс для декорирования сцен общими UI-элементами или для шаринга состояния между ними. Логика декорирования теперь отделена от логики выбора сцены в SceneStrategy.

Type safe metadata DSL через MetadataKey. Больше не нужны строковые ключи — типы значений описаны статически. Готовые NavMetadataKey позволяют задавать анимации переходов прямо в entryProvider:

entry<ScreenC>(
    metadata = metadata {
        put(NavDisplay.TransitionKey) {
            slideInVertically { it } togetherWith fadeOut()
        }
    }
) { ... }

#compose #navigation3 #jetpack

⚙️ Jetpack Compose 1.11 — стабильный релиз! 🚀

Что нового:
👉 Визуальная отладка переходов Shared Elements
👉 Переработанная поддержка трекпадов — теперь работают как мышь и распознают жесты
👉 Preview Wrappers для более быстрой работы с превью
👉 Host Defaults для KMP-проектов
👉 Testing APIs v2 для корутин
👉 Экспериментальные API: Styles, MediaQuery, Grid, FlexBox

Подробности по каждому пункту — отдельными постами в @compose_broadcast

#Compose #Android #AndroidJetpack

⚙️ Кажется, проблема с обёртками для Preview в Compose наконец-то решена нормально — без копипаста на каждый файл.

В Compose 1.11.0 завезли новый интерфейс PreviewWrapper и аннотацию @PreviewWrapperProvider. Идея простая: вместо того чтобы оборачивать каждый Preview в свою тему, CompositionLocalProvider, моки навигации и прочее, ты один раз описываешь обёртку и просто навешиваешь её аннотацией.

Выглядит это так:

class ThemeWrapper : PreviewWrapper {
    @Composable
    override fun Wrap(content: @Composable () -> Unit) {
        JetsnackTheme {
            content()
        }
    }
}

@PreviewWrapperProvider(ThemeWrapper::class)
@Preview
@Composable
private fun ButtonPreview() {
    Button(onClick = {}) {
        Text("Demo")
    }
}

Сценарии где может пригодиться:
👉 встроить тему в превью
👉 подложить FakeNavController или LocalActivity
👉 обернуть в Hilt/Koin провайдер с тестовыми зависимостями
👉 прокинуть моки через CompositionLocal

Раньше для этого либо городили собственную функцию и вызывали её руками в каждом превью, либо писали кастомные @Preview аннотации с ограниченным набором параметров.

‼️ ВАЖНО: фича работает только в Android Studio Panda 4 и выше. В более старых версиях аннотация просто проигнорируется.

💬 Уже успели опробовать? Делитесь впечатлениями и насколько жизнь стала удобнее

#compose #jetpackcompose #android