Всем привет! Последнее время я люблю использовать в своих проектах Compose. Давайте расскажу, что это такое и как использовать. Эта статья будет первой и, конечно же, не последней на эту тему. Кто еще не пробовал использовать Compose в своих проектах, присоединяйтесь.
Jetpack Compose - это современный декларативный UI-фреймворк от Google для разработки пользовательских интерфейсов в приложениях Android. Он был представлен в 2019 году и предоставляет новый подход к созданию пользовательских интерфейсов, основанный на композиции, где пользовательский интерфейс строится из отдельных компонентов (композиций) с помощью кода на языке Kotlin.
В Jetpack Compose используются составные функции.
Составные функции (Composable functions) - это основной строительный блок в Jetpack Compose, декларативном UI-фреймворке для Android. В Jetpack Compose все пользовательские интерфейсы создаются путем композиции (составления) различных составных функций.
Основные характеристики составных функций:
1. Декларативность: Составные функции описывают пользовательский интерфейс в декларативной форме, что позволяет определить, как должен выглядеть интерфейс, не задавая явно последовательность действий для его построения.
В этом примере у нас есть две составные функции: Greeting и MyApp. Функция Greeting принимает аргумент name и выводит текст приветствия с указанным именем. Функция MyApp использует Greeting для вывода приветствий "Hello, John!" и "Hello, Alice!" в вертикальном списке (Column).
Когда Compose анализирует код внутри функции MyApp, он понимает, что это декларативное описание пользовательского интерфейса, а не последовательность шагов для его построения. Compose автоматически создает и управляет компонентами интерфейса для отображения приветствий.
Если мы хотим изменить данные, например, заменить имя "John" на "Mike", нам не нужно писать код для обновления пользовательского интерфейса вручную. Мы просто меняем аргумент name в MyApp, и Compose автоматически обновляет интерфейс.
Кроме того, декларативный подход позволяет более легко читать и поддерживать код. Вы определяете, что должно быть на экране, что делает код более понятным и легким для сопровождения.
2. Переиспользуемость: Составные функции - это независимые компоненты, которые можно использовать повторно для создания различных пользовательских интерфейсов. Это делает код более модульным и упрощает его поддержку.
В этом примере у нас есть две составные функции PrimaryButton и SecondaryButton, которые представляют собой переиспользуемые компоненты для отображения кнопок с различными стилями.
Функция PrimaryButton создает кнопку с синим фоном и белым текстом, а функция SecondaryButton создает кнопку с серым фоном и черным текстом. Оба компонента используют общий компонент Button, но применяют различные стили и цвета через параметры.
В функции MyApp мы использовали эти два компонента для создания нескольких кнопок с различными текстами и стилями. Благодаря высокой переиспользуемости компонентов, мы можем использовать PrimaryButton и SecondaryButton в других частях приложения, не повторяя код и легко меняя внешний вид кнопок во всем приложении.
3. Функции высшего порядка: В Jetpack Compose функции первого класса, что означает, что их можно передавать как аргументы в другие функции или возвращать из других функций. Это позволяет создавать более гибкие и мощные пользовательские интерфейсы.
В этом примере у нас есть две составные функции: Greeting и MyApp. Функция Greeting принимает два аргумента - name и onClick, где onClick является функцией без аргументов, которая будет вызвана при клике на текст приветствия.
Функция MyApp создает состояние count, которое будет изменяться при клике на текст приветствия. При каждом клике на текст "John" счетчик count увеличивается, а при клике на текст "Alice" - уменьшается. Значение счетчика также отображается ниже текста приветствия.
В примере мы передаем функции onClick из MyApp в компонент Greeting как аргумент. Таким образом, мы можем использовать одну и ту же компоненту Greeting для отображения приветствий и управления счетчиком при клике.
Это делает код более гибким и мощным, позволяя нам легко определять и переиспользовать различные обработчики событий для пользовательского интерфейса. Функции высшего порядка в Jetpack Compose - это мощный инструмент для создания интерактивных и реактивных пользовательских интерфейсов.
4. Реактивность: В Compose реактивность обеспечивается с помощью State и MutableState - это особые типы данных, которые могут изменяться и при изменении автоматически вызывают перерисовку пользовательского интерфейса(про State и MutableState расскажу в следующей статье).
В этом примере мы создаем реактивную переменную count, используя remember { mutableStateOf(0) }. Затем мы выводим значение этой переменной на экран с помощью Text, и при нажатии на кнопки "Increment" и "Decrement" значение count изменяется, и пользовательский интерфейс автоматически перерисовывается для отображения нового значения.
Обратите внимание, что благодаря использованию реактивности, Compose автоматически обновляет только те части пользовательского интерфейса, которые зависят от измененных реактивных переменных, что позволяет достичь эффективного перерисовывания и повышения производительности приложения.
Аннотации в compose.
В Compose аннотации используются для объявления и описания функций и классов, которые принимают или создают пользовательский интерфейс с помощью Compose-фреймворка. Аннотации Compose выполняют различные задачи, такие как пометка функций как `@Composable`, предоставление предварительного просмотра с `@Preview`, и т. д. Вот некоторые основные аннотации Compose:
1. @Composable:
- `@Composable` - это аннотация, которая используется для обозначения функций, которые создают пользовательский интерфейс с помощью Compose.
- Функции, помеченные `@Composable`, могут вызываться из других `@Composable`-функций, и они могут содержать другие `@Composable`-функции в качестве дочерних элементов.
- Compose использует аннотацию `@Composable` для понимания и управления деревом вызовов функций и перерисовкой пользовательского интерфейса при изменении состояния.
2. @Preview:
- `@Preview` - это аннотация, которая используется для предварительного просмотра пользовательского интерфейса, созданного с помощью Compose.
- Эта аннотация позволяет вам сразу же увидеть, как будет выглядеть ваш пользовательский интерфейс, без необходимости запуска приложения на устройстве или эмуляторе.
- Вы можете использовать `@Preview` на `@Composable`-функциях или классах, которые создают пользовательский интерфейс.
3. @PreviewParameter:
- `@PreviewParameter` - это аннотация, которая используется для определения параметров предварительного просмотра, которые можно настроить из панели инструментов предварительного просмотра в Android Studio.
- Позволяет изменять значения параметров просмотра без необходимости изменения кода предварительного просмотра.
4. @PreviewParameterProviderClass и `@PreviewParameterProviderMethodName`:
- Эти аннотации используются для указания класса и метода, который предоставляет значения для параметров предварительного просмотра.
- Это позволяет динамически изменять значения параметров просмотра в зависимости от различных условий или данных.
5. @Model:
- `@Model` - это аннотация, которая применяется к классам данных (data class) или классам, наследующим `Observable` или `MutableState`, чтобы определить, что класс является моделью данных для Compose.
- Когда данные в такой модели изменяются, Compose автоматически перерисовывает соответствующий пользовательский интерфейс, использующий эту модель.
6. @Stable:
- `@Stable` - это аннотация, которая применяется к классам, функциям или объектам данных для указания того, что они являются стабильными (immutable) и не изменяют своих значений после создания.
- Использование `@Stable` позволяет Compose оптимизировать процесс перерисовки и предотвращает неожиданное поведение.
На начальном этапе освоения compose достаточно запомнить аннотации `@Composable` и `@Preview`.