Для XML приложений часто приходилось создавать множество файлов с различными формами для элементов. В Jetpack Compose это располагается в одном месте и вам при этом необходимо передать внутрь только параметр, на сколько нужно закруглить View.
Для указания размера шрифта или другого элемента, используют следующий синтаксис: число.dp, число.sp.
Третий файл отвечает за цветовую схему в приложение, background, цвет текста и так далее. DarkColorPalette содержит в себе цвета для темной темы, можно дополнительно переопределить другие цвета, если это необходимо. LightColorPalette содержит цвета для светлой темы.
После определения светлой и темной темы, расположена Composable функция, которая отвечает за цвета в проекте. Таких функций может быть бесчисленное множество. Они вызываются внутри лямбда-блока setContent как это было реализовано в начальном проекте, который сгенерировала Android-студия.
Файл Type содержит настройки для шрифтов, внутри функции TextStyle можно задать название шрифта, вес, размер и т.д.
Жизненный цикл и рекомпозиция
Отрисовка элементов в Jetpack Compose разделяется на три этапа. Composition, Layout, Drawing.
1. Composition: какой UI показывать. Compose запускает Composable функции и создает описание вашего UI.
2. Layout: где размещать UI. Этот шаг состоит из двух: измерение и размещение. Элементы верстки измеряют и помещают самих себя и все дочерние элементы.
3. Drawing: как рендерить. UI-элементы отрисовываются в Canvas, обычно на экране устройства.
Jetpack Compose не всегда выполняет все эти три этапа при обновлении данных или отображении элементов. Будут перерисованы только те Composable функции, в которых произошли изменения, что хорошо отражается на производительности.
Внутри каждого из состояний происходит считывание состояния, опишем, что происходит внутри каждого из них.
Этап 1: Composition.
Чтение состояния в Composable функции или лямбда-блоке влияет на Composition и потенциально на следующие этапы. Когда значение состояния меняется, recomposer планирует перезапуск всех Composable функций, которые его считывали. Обратите внимание, что среда выполнения может решить пропустить некоторые или все Composable функции, если входные данные не изменились.
В зависимости от результата Composition, Compose UI запускает этапы Layout и Drawing. Эти этапы могут быть пропущены, если контент не изменился, и, следовательно, общий размер элементов не изменится.
Этап 2: Layout.
Этап Layout включает два шага: измерение и размещение. Шаг измерения запускает лямбда-функции измерения, переданные в Layout-composable, метод MeasureScope.measure интерфейса LayoutModifier. Размещение запускает блок функции layout, лямбду из Modifier.offset {…} и т.д.
Считывание состояний во время каждого шага затрагивает этапы Layout и, потенциально, Drawing. Когда значение состояния меняется, Compose UI планирует выполнение этапа Layout.
