Jetpack Compose - новый и простой способ создания UI материалов в Android

Узнайте, как создать пользовательский интерфейс без каких-либо файлов XML

1. Вступление.
2. Зачем нам Jetpack Compose?
3. Интеграция.
4. Запуск нового действия Compose.
5. Составные функции.
6. Создание контейнера с помощью Jetpack Compose.
7. Компонент материала с помощью Jetpack Compose.
8. CustomViews.
9. Полезные ссылки.

Вступление

Прежде чем мы обсудим создание Jetpack, вы знаете, что такое Jetpack?

Android Jetpack - это набор программных компонентов Android, которые помогают нам создавать отличные и отличные приложения для Android.

Эти программные компоненты помогают:

1. Следуйте лучшим практикам и пишите меньше шаблонного кода.
2. Делать сложные вещи простыми.

Jetpack Compose - одна из недавних попыток Google упростить разработчикам Android разработку пользовательского интерфейса. Jetpack Compose находится на очень ранней стадии, но он получил шумиху, как и любые другие библиотеки Jetpack (WorkManager, Room и Pagination).

Jetpack Compose - это современный набор инструментов для создания собственного пользовательского интерфейса Android. Jetpack Compose упрощает и ускоряет разработку пользовательского интерфейса на Android с меньшим количеством кода, мощными инструментами и интуитивно понятными API-интерфейсами Kotlin. - Разработчики Android

Примечание. Если вы хотите использовать Jetpack Compose с Android Studio, вы должны использовать Android Studio Canary 4.1 или выше.

Зачем нам нужен Jetpack Compose?

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

Как правило, мы используем относительный макет, линейный макет или макет кадра для создания файлов макета, но затем на сцену вышел макет со сверхограничениями, который привлек всех нас (разработчиков Android). Это хорошо, но их можно использовать только в наших традиционных файлах макета.

• Что делать, если в файлах макета больше нет относительных отношений макета или ограничений макета ограничений?
• Мы можем пойти немного дальше и сказать: «Что, если у нас есть новый способ создания пользовательского интерфейса без файлов макета?»

Является ли это возможным? Да, это так, и это то, что мы называем Jetpack Compose.

Независимо от того, сколько у нас расширенных макетов, таких как макеты с относительными ограничениями, нам всегда не хватало декларативного пользовательского интерфейса в Android.

Хотя у нас есть несколько сторонних библиотек, было бы здорово иметь родную библиотеку и теперь она есть. Его имя - Jetpack Compose.

В Google IO ’19 Google запустил Jetpack Compose для создания декларативного пользовательского интерфейса в Android. Итак, по сути, декларативный пользовательский интерфейс означает указание элементов пользовательского интерфейса, которые вы хотите, в формате с использованием определенного языка.

Интеграция

Это можно сделать за четыре простых шага.

• Добавьте google() в build.gradle файл проекта.

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
    }
}

• Обновите свои инструменты Gradle и плагин Kotlin.

dependencies {
        classpath 'com.android.tools.build:gradle:4.0.0-alpha01'
        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25'
    }

• Включите Compose и установите для компиляторов Java и Kotlin цель Java 8, как показано ниже в файле build.gradle уровня приложения.

buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...
    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

• Наконец, добавьте зависимости Jetpack Compose.

implementation "androidx.compose:compose-runtime:0.1.0-dev02" implementation "androidx.ui:ui-core:0.1.0-dev02" 
implementation "androidx.ui:ui-layout:0.1.0-dev02" 
implementation "androidx.ui:ui-framework:0.1.0-dev02" 
implementation "androidx.ui:ui-material:0.1.0-dev02" 
implementation "androidx.ui:ui-foundation:0.1.0-dev02" implementation "androidx.ui:ui-text:0.1.0-dev02" 
implementation "androidx.ui:ui-tooling:0.1.0-dev02"

Вот и все, с интеграцией закончили.

Начало нового действия по созданию сообщения

Теперь, когда мы закончили настройку, пришло время создать новое действие с помощью Jetpack Compose.

В функции onCreate мы используем setcontent вместо setcontentview, потому что здесь мы больше не используем файлы макета для пользовательского интерфейса. Как мы уже упоминали о флаге buildFeatures { compose true } в build.gradle, это должно работать нормально.

Поскольку мы, разработчики, изучаем азбуку Jetpack Compose, давайте начнем с простого текстового представления с текстом «Hello world». Посмотри:

Составные функции

Составная функция - это обычная функция, помеченная знаком @Composable.

Это позволяет вашей функции вызывать другие @Composable функции внутри нее. Вы можете видеть, как функция Greeting помечена как @Composable. Эта функция создаст часть иерархии пользовательского интерфейса.

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

Создание контейнера с помощью Jetpack Compose

Здесь мы собираемся построить поведение линейного макета с вертикальным режимом. Давайте создадим новую историю с компонуемым интерфейсом, как показано ниже.

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

Итак, здесь у нас есть новая концепция под названием столбец, которая похожа на макеты в файлах XML. Давайте посмотрим на приведенный выше пример со столбцами и интервалом.

Вот так у вас будет пользовательский интерфейс со стилем вертикального линейного макета и стандартным интервалом.

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

Компонент материала с помощью Jetpack Compose

Jetpack Compose построен с учетом материальных компонентов, другими словами, он сильно инвестирует в материальные компоненты. Давайте посмотрим на пример создания карты материалов, как показано ниже:

Если вы внимательно присмотритесь, в нем есть несколько рекомендаций по материалам, таких как закругленные углы, интервалы, стили текста и т. Д. Давайте посмотрим, как реализовать это с помощью @Composable методов.

Теперь давайте рассмотрим код, шаг за шагом.

1. Во-первых, оберните весь код в card, это похоже на карточку материала в XML-файле.
2. У карты закругленные углы. Для достижения этого пользовательского интерфейса мы использовали атрибут shape на карточке с радиусом 4dp.
3. Чтобы выровнять виды по вертикали, мы использовали столбец.
4. Чтобы загрузить изображение в Jetpack Compose, у нас есть функция с именем SimpleImage, с помощью которой мы можем загружать удаленные URL-адреса, файлы или URI.
5. Что касается текстовых представлений, мы уже обсуждали, как создавать и назначать им текст.
6. Но здесь есть кое-что еще о базовом текстовом представлении. Здесь текстовые представления имеют разные цвета и размеры текста. Для этого мы использовали концепцию стилей.
7. Здесь стили создаются на основе правил материалов.
8. Наконец, чтобы завершить дизайн, мы добавили две кнопки с row (выравнивание видов по горизонтали).
9. Опять же, мы использовали материальный дизайн, чтобы придать кнопкам такую ​​форму, как сейчас.

CustomViews

Независимо от того, сколько у нас представлений по умолчанию, дизайнеры всегда каким-то образом придумывают новые дизайны и странные представления.

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

Здесь, в Jetpack, нам просто нужно создать компонуемую функцию для создания настраиваемого представления. У нас есть строительные блоки, которые помогают создавать пользовательские представления, в которых draw и layout являются двумя основными.

Рисовать

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

Макет

Jetpack предоставляет основные макеты в начале с столбцом и строкой. Теперь он работает над добавлением макета ограничений в Jetpack Compose.

Полезные ссылки

Спасибо за чтение.