В этой статье мы на разберем основы декларативного подхода написания android-приложений. Это статья подойдёт для тех, кто раннее не работал с Jetpack Compose.
Декларативное программирование представляет собой способ указание программе, что она должна делать, а не как она это сделает.
Jetpack Compose как раз предполагает декларативный API, который является более интуитивно понятный, нежели устаревшая xml-верстка.
Для работы с Jetpack Compose необходимо иметь базовые знания языка программирования Kotlin.
Первым делом вам нужно установить последнюю версию Android Studio через официальный сайт.
После полной установи и запуска перед вами откроется стартовое окно:
Для создания первого приложения нажмём на кнопку "New Project" в верхнем правом углу. Далее откроется окно выбора макетов для создания приложения. Нам нужно выбрать "Empty Compose Activity" и нажать кнопку "Next" в нижнем правом углу.
В следующем окне укажем имя нашего приложения. В самое первое поле ввода введем "First App", остальные поля оставим для начала по умолчанию
После проделанных шагов нажмем "Finish" и создадим приложение.
После создания проекта нужно дождаться, пока Gradle соберет полностью проект, это может занять некоторое время. После окончания сборки можно начать писать код.
Пользовательский интерфейс в Jetpack Compose строится с помощью взаимодействия composable-функций(функция, которая имеет аннотацию @Composable).
Этапы отрисовки кадров Compose:
1. Composition: какой UI показывать. Compose запускает composable-функции и создает описание вашего UI;
2. Layout: где размещать UI. Этот шаг состоит из двух: измерение и размещение(measurement и placement). Элементы верстки измеряют и помещают самих себя и все дочерние элементы в 2D-координатах.
3. Drawing: как рендерить. UI-элементы отрисовываются в Canvas, обычно на экране устройства.
Эти три этапа идут последовательно, поэтому для оптимизации при перерисовке Compose будет пропускать выполнение composable-функций, если предыдущие входные данные не были изменены. В этом заключается мощный подход рекомпозиции. Его мы рассмотрим в следующей статье.
А сейчас давайте создадим нашу первую composable-функцию. Название composable-функций принято начинать с большой буквы, также название должно быть осмысленным, чтобы можно было сразу понять, за что она отвечает. Но в нашем примере, мы можем её назвать как хотим. Я создал функцию с именем CoolFunc.
После создание функции, нам также стоит создать для неё Preview-функцию, чтобы наблюдать за построением интерфейса без запуска эмулятора. После всех проделанных этапов ваш код должен выглядеть так:
Чтобы убедиться, что мы всё правильно сделали в правом верхнем углу нажмем на "split" и дождемся, пока интерфейс прорисуется. Для этого потребуется нажать на всплывающее окно "Build and Refresh".
После прорисовки вы увидите небольшое окно, где будет написано "Hello World".
Теперь разберем некоторые встроенные параметры composable-функции Text(). Эта функция служит для отображения любого текста на экране вашего телефона.
color - изменяет цвет вашего текста;
fontSize - изменяет размер вашего текста. Измеряется в sp (Пример: 12.sp, 14.sp);
fontWeight - изменяет толщину шрифта (Пример: FontWeight.Bold)
Давайте добавим эти параметры в функцию Text().
Функция примет такой вид:
После проделанных изменений нажмем "Build and Refresh" в окне "split", если всплывающее окно не вылезло, то можно обновить в ручную. Для этого надо нажать на кнопку обновления в верхнем левом углу:
После обновлений, вы заметите, что текст стал красного цвета и жирным шрифтом.
На этом я закончу свою первую стать, если есть какие-то недочеты или пожелания напишите в комментарии. Буду рад конструктивной критике. Всего хорошо и может быть до скорого.