#Compose #UI #Animation #Debugging

🎨 Compose 1.11.0 — Визуальная отладка анимаций

Shared Elements анимации и работа с Modifier.animatedBounds стали прозрачнее благодаря инструменту LookaheadAnimationVisualDebugging.

Ключевые возможности:

▫️Прямо в Runtime можно увидеть траектории движения объектов и их целевые границы (target bounds).
▫️Визуализация помогает понять, почему элемент «прыгает» или обрезается при переходе между экранами.

Инструмент полезен в первую очередь для сложных UI-переходов, где раньше приходилось полагаться только на логи и интуицию.

🎨 Mobile Compose 💬 Чат канала
♾

⚙️ Отладка shared element анимаций в Compose 1.11 стала проще. Появилась функция LookaheadAnimationVisualDebugging, визуализирующая анимацию

#Compose

🤖 Styles API в Compose: революция в кастомизации UI

До недавнего времени стилизация компонентов в Compose делалась через параметры Composable функции (color = ..., padding = ...) или модификаторы. Это работало, но могло приводить к:
👉 избыточным рекомпозициям при смене состояний;
👉 дублированию кода для разных вариаций кнопок/карточек;
👉 сложностям с анимацией переходов между стилями.

Google представил Styles API (экспериментальный, о причинах такого статуса ниже) — новый подход, вдохновлённый CSS. Нужен Jetpack Compose 1.11.0 или свежее

Ключевые возможности
1️⃣ Производительность
Стили вычисляются на этапах layout и drawing, минуя composition. Это значит, что изменение стиля (например, при наведении) не вызывает рекомпозицию родительских компонентов.

2️⃣ Работа с состояниями
Без кучи if/else и animate*AsState. Просто описываете стиль для каждого состояния (нажат, сфокусирован, включён, ошибка и т.д.).

3️⃣ Встроенные анимации
Переходы между состояниями анимируются автоматически с физическими параметрами (демпфирование, жёсткость). Не нужно писать Animatable или Transition.

// Пример использования стиля
// Определяем стиль для кнопки
val buttonStyle = Style {
    default {
        backgroundColor = Color.Blue
        shape = RoundedCornerShape(8.dp)
    }
    pressed {
        backgroundColor = Color.DarkBlue
        scale = 0.98f
    }
    disabled {
        backgroundColor = Color.Gray
        alpha = 0.5f
    }
}

// Используем
Button(
    onClick = { /* ... */ },
    style = buttonStyle, // ← вместо кучи параметров
    enabled = isEnabled
) {
    Text("Нажми меня")
}

style — новый параметр, который появляется у всех компонентов Material 3 и базовых (Box, Row, Column).

⚠️ Styles API не заменяет модификаторы
Модификаторы остаются для позиционирования, кликов, размеров. Styles API заменяет только внутреннюю стилизацию (цвета, формы, тени, отступы внутри компонента). Это как разделение «темы» и «вёрстки».

API остаётся экспериментальным пока на него полностью не перейдет Material 3 Compose, чтобы учесть все необходиcмоти API и не делать breaking changes. По работе оно уже стабильно, но вот изменения в коде, возможно, будут.

🔗 Официальная документация

В целом с таким подходом уже привыкли работать в Android XML Layout, то почему бы сразу было его не использовать? Тем более в Compose плюсы очевидны!

💬 Пробовали уже играться со Styles API? Как вам идея отделить стили от композиции? Делитесь мнениями в комментариях 👇

#Compose #Material

🏝 HyperKey - Kotlin DSL для работы с ноткеями в Compose на Android и Desktop (чего iPadOS забыли)

HotKeyBox(
    hotkeys = {
        Key.S + Ctrl press { save() }
        Key.K + Ctrl andThen Key.P press { openCommandPalette() }
        Key.Space + Hyper press { spotlight() }
    }
) {
    MyApp()
}

#Kotlin #Android #Desktop

⚙️ Compose 1.11: Composition host defaults — мелочь, важная для KMP

В апрельском релизе Jetpack Compose под номером 1.11 в compose-runtime завезли четыре новых API: HostDefaultProvider, LocalHostDefaultProvider, HostDefaultKey и ViewTreeHostDefaultKey. Плюс билдер compositionLocalWithHostDefaultOf для авторов библиотек.

Он позволяют объявить CompositionLocal, у которого дефолтное значение резолвится из окружения хоста — например, через Android View tag'и (как это делает ViewTreeLifecycleOwner или ViewTreeOnBackPressedDispatcherOwner). Раньше для такого паттерна была обязательна зависимость на compose-ui. Теперь только compose-runtime.

Раньше чтобы из библиотеки достать значение из View tree, приходилось тянуть compose-ui ради LocalView и платформенные функции поиска по дереву View. Код жил в Android-сорсах, в commonMain такое не положишь:

    // androidMain — compose-ui + Android-only API
    val LocalMyOwner = compositionLocalOf<MyOwner?> { null }

    @Composable
    fun ProvideMyOwner(content: @Composable () -> Unit) {
        val view = LocalView.current
        val owner = remember(view) {
            view.findViewTreeMyOwner()
        }
        CompositionLocalProvider(LocalMyOwner provides owner) {
            content()
        }
    }

С новым API описание CompositionLocal живёт в commonMain и тянет только compose-runtime. Связку с View tree описывает ViewTreeHostDefaultKey, и хост сам отдаёт значение через своего провайдера:

    // commonMain — только compose-runtime
    val MyOwnerKey = ViewTreeHostDefaultKey<MyOwner>(
        viewTagId = R.id.view_tree_my_owner
    )

    val LocalMyOwner = compositionLocalWithHostDefaultOf(MyOwnerKey)

    // Использование — без изменений
    @Composable
    fun MyComponent() {
        val owner = LocalMyOwner.current
        // ...
    }

Теперь авторы Compose библиотек могут держать определение CompositionLocal в общем модуле без зависимости на compose-ui. Профит - меньше транзитивных зависимостей в KMP-библиотеках и более чистое разделение слоёв runtime и UI.

#Compose #CMP

⚙️ Compose Multiplatform 1.11.0 вышел

Главные фичи:
1️⃣ Нативный text input на iOS через UIView, UITextInput и UIKeyInput (экспериментально)
2️⃣ v2 API для Compose UI-тестов на не-Android таргетах
3️⃣ Переписанный с нуля скроллинг на Web

Breaking изменения, которые заденут почти всех:
👉 Минималка Kotlin поднята до 2.3.10
👉 Минимальная iOS теперь 14 (поддержка 13 ушла)
👉 iosX64 и macosX64 удалены полностью
👉 Shader на не-Android стал wrapper-классом

Я ждал нативный input на iOS с того момента, как Compose туда заехал. Текущая реализация на Skia всегда чувствовалась чужой на ощупь, особенно при сложном выделении и системных меню. Надо пробовать!

#compose #cmp #kotlin

👨‍💻 Опенсорсим yx_navigation — декларативную навигацию для Flutter

Навигация во Flutter сначала кажется автору простой: push и pop. Но по мере роста проекта появляются табы, вложенные модули, диплинки — и каждый экран начинает открываться по-своему, а pop() ведёт себя непредсказуемо.

Navigator 1.0 прост, но не масштабируется. Navigator 2.0 даёт контроль, но требует тонны бойлерплейта. Пакеты вроде go_router (режим поддержки) и auto_route (кодогенерация) решают часть проблем, но не все.

Автор и его команда прошли через все эти варианты в Яндекс Про — приложении с сотнями фич, несколькими командами и вложенной навигацией. Так появился yx_navigation — новый пакет в экосистеме архитектурных решений для Flutter, следующий после yx_scope (DI) и yx_state (управление состоянием).

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

👉 Читать статью

📌 Лучшие вакансии для мобильных разработчиков

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

#свежак #Flutter

🏝 JetBrains обновили дефолтную структуру KMP проектов. Теперь общий код живёт в shared модуле, а под каждую целевую платформу свой отдельный application модуль.

Раньше всё было в одном composeApp, который одновременно был и KMP библиотекой, и приложением. Это создавало путаницу в build конфигах и платформенных настройках. iOS при этом уже жил в отдельной папке, и асимметрия торчала наружу.

Главным триггером изменений стал Android Gradle Plugin 9, который больше не позволяет применять Android application plugin к multiplatform модулю. Entry point Android приложения теперь обязательно вынесен в отдельный модуль.

Если в проекте есть нативный UI (например, SwiftUI для iOS), shared разбивается на два модуля: sharedLogic без Compose зависимостей и sharedUI только для платформ с Compose Multiplatform. Для проектов с серверной частью добавляется server модуль и core с общими моделями и валидацией для шаринга между клиентом и сервером.

Я ещё до этого держал каждый application в отдельном модуле, так что для меня новая дефолтная структура лишь оформляет то что уже стало здравым смыслом. Раньше с одним shared было неприятно из-за того что Kotlin stdlib и зависимости тащились в каждый iOS framework. Несколько атомарных shared модулей решают эту проблему и позволяют точечнее управлять тем что попадает на каждую платформу. Очень рад что JetBrains двигаются в сторону более атомарных модулей, но пока есть вопросы не будет ли дублирования базовых Kotlin библиотека в каждый Xcode фреймворк.

Новая структура уже доступна в KMP wizard на kmp.new и в IDE плагине.

🔗 Анонс
📹 Видео разбор от JetBrains

#Kotlin #KMP #Gradle