Compose

Cовременная, декларативная библиотека для создания пользовательских интерфейсов в Android. Compose значительно упрощает разработку UI, заменяя традиционную императивную модель (основанную на Views и XML) на декларативный подход.

• Декларативный UI: В Compose UI описывается как функция. Вы определяете, как интерфейс должен выглядеть в зависимости от текущего состояния данных, а библиотека автоматически обновляет UI при изменении этих данных.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

• Состояние и управление: Compose использует состояние для обновления интерфейса. Если изменяется состояние, вызов функции обновляет только измененные части интерфейса — это называется рекомпозицией. Состояние в Compose управляется с помощью таких функций, как remember, mutableStateOf, rememberSaveable.

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

• Без XML: Compose полностью устраняет необходимость в XML-файлах для описания интерфейсов. Всё создается и управляется на уровне кода.

• Модульность и многократное использование: Compose предлагает возможность создавать небольшие, независимые и переиспользуемые компоненты. Это упрощает создание и поддержку сложных интерфейсов.

• Совместимость с View: Compose и традиционные Views могут взаимодействовать друг с другом. Вы можете встраивать Views в Compose или использовать Compose в существующих проектах с Views.

@Composable
fun CustomView() {
    AndroidView(factory = { context -> 
        TextView(context).apply {
            text = "This is a traditional Android View!"
        }
    })
}

• Упрощенная анимация: В Compose встроена поддержка анимаций, которая позволяет легко добавлять динамичные эффекты в интерфейс.

@Composable
fun AnimatedBox() {
    var expanded by remember { mutableStateOf(false) }
    val size by animateDpAsState(if (expanded) 200.dp else 100.dp)

    Box(
        Modifier
            .size(size)
            .clickable { expanded = !expanded }
            .background(Color.Blue)
    )
}

Жизненный цикл Compose отличается от традиционных View-систем в Android, так как он основан на декларативном подходе к построению интерфейсов. В Compose нет привычных методов жизненного цикла, таких как onCreate, onStart и onDestroy. Вместо этого, основной механизм работы с UI — это рекомпозиция и управление состоянием.

Использовать когда входные данные меняются чаще чем нужна рекомпозиция. Пример: изменение положения скролла. Действует анологично оператору distinctUntilChanged в Kotlin Flow. Подписывается на изменения состояний, которые были прочитаны за первый проход. Примеры:

• Порог прокрутки (scrollPosition > 0).

• Количество элементов больше порог(items > 0).

• Валидация формы (username.isValid)

val listState = rememberLazyListState()
val showButton by remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } }

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

• Инициализация состояния: produceState позволяет задать начальное значение и автоматически обновлять его при изменении зависимостей.

• Обновление состояния: Когда происходит изменение зависимостей, асинхронная операция запускается снова, и состояние обновляется.

val someData = produceState(initialValue = null) {
    value = fetchData() // Асинхронная операция
}

Концепция, которая используется в Compose для управления состоянием и его отслеживания. Она обеспечивает механизм для наблюдения за изменениями данных и синхронизирует эти изменения с интерфейсом пользователя (UI). Основная цель механизма снапшотов — сделать работу с состоянием в Compose реактивной, то есть когда данные изменяются, UI автоматически обновляется. Снимки состояния позволяют изолировать и отслеживать изменения, сделанные в реактивных данных, и гарантируют, что эти изменения будут безопасно применяться, особенно в многопоточных приложениях.

// Compose позволяет вручную управлять снапшотами, используя методы вроде Snapshot.takeSnapshot, 
// чтобы работать с состоянием более тонко, когда это необходимо.

@Composable
fun ManualSnapshotExample() {
    val state = remember { mutableStateOf("Initial") }

    Column {
        Text(text = "Current state: ${state.value}")

        Button(onClick = {
            // Создаём новый снапшот
            Snapshot.takeSnapshot {
                state.value = "Changed in Snapshot"
            }
        }) {
            Text("Change State in Snapshot")
        }
    }
}

@Composable
fun SnapshotFlowExample() {
    val count = remember { mutableStateOf(0) }
    val scope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        // Преобразуем изменения состояния в Flow с помощью snapshotFlow
        snapshotFlow { count.value }
            .collect { newValue ->
                // Обрабатываем новое значение из snapshotFlow
                println("Collected new value: $newValue")
            }
    }

    Column {
        Text(text = "Counter: ${count.value}")

        Button(onClick = {
            count.value += 1
        }) {
            Text("Increase Counter")
        }
    }
}

Определяет стратегию автоматического удаления композиции. Для ComposeView и AbstractComposeView. Нужен для интеропа Compose и View.

• DisposeOnDetachedFromWindowOrReleasedFromPool. Используется по умолчанию. Композиция будет автоматически удалена при отсоединении View от Window если только она не является частью контейнера пула такого как RecyclerView.

• DisposeOnDetachedFromWindow - композиция будет автоматически удалена при отсоединении View от Window.

• DisposeOnLifecycleDestroyed(LifecycleOwner) - удаляет композицию когда возвращенный LifecycleOwner уничтожается.

• DisposeOnViewTreeLifecycleDestroyed - удаляет композицию при переходе Lifecycle в состояние Destroyed.

Позволяет перехватывать и обрабатывать нажатие кнопки «Назад» внутри @Composable-функции.

@Composable
fun MyScreen() {
    // Обработка нажатия кнопки "Назад"
    BackHandler(enabled = isHandlerEnabled) {
        // Действия, которые должны выполниться при нажатии кнопки "Назад"
    }

    // Основное содержимое экрана
    Text(text = "Текст")
}

Сспособ реагировать на фазы цикла вложенной прокрутки.

• Пример: дочерний экран со списком внутри Pager на родительском экране с AppBar. При скролле будет прокручиваться список дочернего экрана, когда перемотка будет завершена - будет прокручиваться AppBar родительского экрана.

val nestedScrollConnection = rememberNestedScrollInteropConnection()

Scaffold(
    modifier = Modifier.nestedScroll(nestedScrollConnection)
) {}

Механизм оптимизации, который пропускает выполнение кода композиции, если входные данные для функции не изменились. Он позволяет существенно снизить нагрузку на систему, избегая ненужных перерисовок.

@NonSkippableComposable
@Composable
fun CriticalComposable(data: Int) {
    // Эта функция будет вызвана при каждом recomposition
    println("Recomposing with data: $data")
}

@DontMemoize
@Composable
fun NonCachedComposable(): String {
    return UUID.randomUUID().toString() // Всегда генерируется новое значение
}

• remember (4)

  1. Что из себя представляет remember?

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

  2. Различие между remember и rememberSaveable?

     remember сохраняет состояние при пересоздании композиций, а rememberSaveable сохраняет состояние при пересоздании, включая изменение конфигурации (например, поворот экрана).

  3. Как сохранить данные между рекомпозициями?

     Использовать remember.

  4. Сохранится ли состояние с remember при изменении конфигурации?

     Нет, так как remember сохраняет данные только во время жизни текущей композиции.

• @Composable-функция (7)

  1. Как работает @Composable-функция?

     Функция с аннотацией @Composable описывает часть UI, которая добавляется в дерево композиций и может реагировать на изменения состояния. При каждом изменении состояния система вызывает функцию заново, чтобы обновить соответствующие элементы интерфейса.

  2. Как часто вызывается @Composable-функция?

     Функция @Composable вызывается каждый раз, когда изменяется её состояние или параметры. Если параметры функции изменяются, она будет вызвана снова для обновления пользовательского интерфейса, даже без изменения состояния.

  3. Гарантирован ли порядок выполнения @Composable-функций?

     Не гарантирован, так как Compose может оптимизировать выполнение и вызывать функции в произвольном порядке.

  4. Что делает объект Composer под капотом у @Composable-функций?

     Управляет состоянием и перерисовкой @Composable-функций, отслеживая их изменения и обновляя только измененные части UI. Он строит и изменяет дерево композиций, оптимизируя обновление интерфейса для повышения производительности.

  5. Жизненный цикл @Composable-функции?

     • Вызов - функция вызывается, когда необходимо отобразить UI.

     • Рекомпозиция - если изменяется состояние, вызывается повторный запуск функции для обновления UI.

     • Размещение - Compose устанавливает композируемые элементы на экране.

     • Отмена - Если @Composable-функция больше не требуется (например, при удалении из иерархии), она отменяется и освобождает ресурсы.

  6. Как происходит процесс отрисовки фрейма?

     • Изменение состояния - когда изменяется состояние приложения, вызываются функции, обновляющие UI.

     • Рекомпозиция - Compose перерисовывает только те @Composable-функции, которые зависят от изменившегося состояния.

     • Создание дерева компонентов - на основе текущего состояния создается дерево UI-компонентов.

     • Измерение - определяются размеры и позиции каждого компонента в дереве.

     • Отрисовка - каждый компонент рисуется на канвасе с использованием методов отрисовки.

     • Композиция и рендеринг - готовый UI отображается на экране.

  7. Что такое skippable и restartable в Compose?

     Это характеристики композиции:

     • skippable означает, что при рекомпозиции часть UI может быть пропущена, если её состояние не изменилось.

     • restartable указывает, что можно перезапустить выполнение композиции, начиная с этой точки, при изменении состояния.

• Другие (26)

  1. Что такое Compose?

     Библиотека для создания UI в Android с использованием декларативного подхода. Она позволяет описывать UI как функции, автоматически управляя состоянием и обеспечивая высокую производительность через рекомпозицию.

  2. Чем Compose отличается от View?

     • Декларативный подход.

     • Интеллектуальная перекомпановка.

     • Типобезопасность Kotlin.

  3. Какие проблемы бывают в Compose?

     • Снижение производительности из-за избыточных рекомпозиций.

     • Ошибки в отображении и поведении UI из-за неправильной работы с состоянием.

  4. С какими трудностями можно столкнуться при переезде с View на Compose?

     • Изменение текущей архитектуры/навигации/асинхронной работы.

     • Внедрение UDF.

     • Интеграция с существующими библиотеками (Dagger/Coil)

  5. Как понять, что код на Compose оптимально написан?

     • Минимизация повторных композиций: используйте remember, чтобы кэшировать состояние и избегать ненужных пересчетов.

     • Правильное использование key для элементов списков: это помогает Compose отслеживать изменения и оптимизировать обновления.

     • Избегание тяжелых операций в @Composable функциях: старайтесь переместить сложную логику вне композиций.

     • Использование derivedStateOf для производных состояний, чтобы избежать лишних пересчетов.

     • Профилирование приложения с помощью инструментов, таких как Android Studio Profiler, для выявления узких мест.

  6. Какие этапы отрисовки есть в Compose?

     • Composition (Компоновка): разбор и построение иерархии компонентов на основе функции @Composable. На этом этапе создаётся структура UI из компонентов, которые необходимо отобразить.

     • Layout (Разметка): определение размеров и позиций элементов на экране. Каждый компонент измеряет себя и свои дочерние элементы, определяя их размеры и положение.

     • Drawing (Рисование): финальная отрисовка элементов на экране. На этом этапе компоненты визуально отображаются с учетом их размеров, позиции и стиля.

  7. Как ускорить Compose?

     • Заменить XML-иконки на ImageVector.

     • Заменить Modifier.composed на Modifier.Node.

     • Использовать специальные типы для MutableState.

     • Использовать аннотации @Stable @Immutable @ReadOnlyComposable.

     • Подключить линтеры.

  8. Что такое рекомпозиция? (Как работает)

     Рекомпозиция в Compose — это процесс обновления UI при изменении состояния. Когда состояние изменяется, Compose определяет, какие компоненты требуют обновления, и пересоздает только их. Это позволяет эффективно управлять интерфейсом, минимизируя переработку и повышая производительность.

  9. Как избегать ненужных рекомпозиций?

     • Использовать remember для сохранения состояний между рекомпозициями.

     • Применять key в списках для отслеживания изменений элементов.

     • Разделять UI на мелкие компоненты и контролировать их состояние через remember и derivedStateOf.

  10. Как Compose понимает, что стейт поменялся?

      Через изменение входных параметров функции или отслеживаемых данных.

  11. Какие типы в Compose считаются стабильными?

      Типы @Stable, неизменяемые (val), встроенные (Int, String и пр.), а также data class с неизменяемыми полями.

  12. Почему List не считается стабильным типом в Compose?

      List не считается стабильным в Compose, так как его содержимое может изменяться, нарушая предсказуемость при перерисовке, что мешает оптимизации и контролю за изменениями.

  13. Как сделать типы в Compose стабильными?

      С помощью аннотаций @Stable и @Immutable.

  14. Как работают аннотации @Stable и @Immutable?

      • @Immutable указывает, что объект полностью неизменен и его состояние не изменится после создания, что позволяет Compose оптимизировать рендеринг.

      • @Stable обозначает, что объект может изменяться, но изменения управляются контролируемо, что позволяет Compose правильно отслеживать такие изменения и обновлять UI при необходимости.

  15. Число лежит в mutableState без remember при клике увеличивается. Что произойдет через 3 нажатия?

      Если число хранится в mutableState без remember, то при каждом клике оно будет увеличиваться, но после пересоздания компонента (например, при изменении конфигурации) состояние будет потеряно. После трех нажатий число будет увеличено, но при пересоздании оно вернется к начальному значению, так как remember не сохраняет состояние.

  16. Для чего нужен mutableState?

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

  17. Для чего используется derivedStateOf?

      Используется для создания производного состояния, которое зависит от других состояний. Оно позволяет оптимизировать производительность, так как обновление производного состояния будет происходить только при изменении его зависимостей, а не при каждом обновлении родительского состояния.

  18. Для чего используется snapshotFlow?

      Используется для создания потоков (Flow), которые реагируют на изменения состояния в Compose. Он позволяет получать значения из состояния в виде потоков и обрабатывать их асинхронно, что упрощает интеграцию с корутинами и позволяет отслеживать изменения состояния в реактивном стиле.

  19. Что такое SnapshotStateList?

      Изменяемый список, который автоматически отслеживает изменения и триггерит рекомпозицию при обновлении. Он используется для управления состоянием списков, позволяя эффективно обновлять пользовательский интерфейс при добавлении, удалении или изменении элементов.

  20. Для чего используется produceState?

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

  21. Для чего нужен nestedScrollConnection?

      nestedScrollConnection используется для обработки вложенной прокрутки в Compose, позволяя компонентам взаимодействовать с прокруткой друг друга, что обеспечивает плавное поведение при взаимодействии с несколькими прокручиваемыми элементами.

  22. Разница между rememberCoroutineScope и remember { CoroutineScope }?

      rememberCoroutineScope привязан к жизненному циклу Composable и отменяется при выходе из него, а remember { CoroutineScope } создает независимый scope, который нужно вручную очищать, чтобы избежать утечек.

  23. Как под капотом устроен rememberCoroutineScope?

      rememberCoroutineScope() сохраняет CoroutineScope, привязанный к жизненному циклу Composition. Когда этот элемент уходит из Composition, CoroutineScope отменяется. Под капотом он создает CoroutineScope, используя remember, а контекстом для корутин выступает Dispatchers.Main.immediate и Job, привязанный к текущему Composition.

  24. Что компилятор неявно пробрасывает во все Composable-функции?

      Объект Composer, который управляет состоянием и рекомпозицией во время выполнения функции.

  25. В инспекторе отображается много рекомпозиций как понять в чем проблема?

      Использовать Сompose compile metrics.

  26. Что произойдет при выполнении функции?

      @Composable
      fun CounterSample() {
      		Column {
      				var count by mutableStateOf(0)
      				
      				if (count > 0) {
      						Text("Counter is $count")
      				}
      				
      				Button(
      						onClick = { count++ },
      						enabled = count < 5
      				) {
      						Text("Increase counte")
      				}
      		}
      }

      1. IDE подсветит ошибку создания mutableState без remember, придется добавить @SuppressLint("UnrememberedMutableState").
      2. При запуске отобразится только Button.
      3. При клике на кнопку ничего не произойдет, count не будет увеличен.