Основы Jetpack Compose: Урок №1

Что такое Jetpack Compose

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

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

Урок 1: Composable функции

Фреймворк работает на основе Composable функций. Эти функции позволяют программно определять пользовательский интерфейс вашего приложения, описывая его форму и зависимости, а не сосредотачиваться на процессе создания пользовательского интерфейса. Чтобы создать “составную” функцию, просто добавьте аннотацию @Composable к имени функции.

Добавляем текстовый элемент

Для начала следуйте инструкциям по настройке Jetpack Compose и создайте приложение, используя шаблон Empty Compose Activity. Шаблон по умолчанию уже содержит некоторые элементы Compose, но давайте создадим его шаг за шагом. Сначала удалите функции Greeting и Default Preview и удалите блок setContent из MainActivity, оставив действие пустым. Скомпилируйте и запустите пустое приложение.

Теперь добавьте текстовый элемент в пустое действие. Вы делаете это, определяя блок содержимого и вызывая функцию Text().

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

Блок setContent определяет макет активити. Вместо определения содержимого макета с помощью XML-файла, мы вызываем composable функции. Jetpack Compose использует кастомный плагин компилятора Kotlin для преобразования этих составных функций в элементы пользовательского интерфейса приложения. Например, функция Text() определяется библиотекой Compose UI — вы вызываете эту функцию, чтобы объявить текстовый элемент в своем приложении.

Определите Composable функцию

Составные функции могут вызываться только в рамках других составных функций. Чтобы сделать функцию составной, добавьте аннотацию @Composable. Чтобы попробовать это, определите функцию Greeting(), которой передается имя и которая использует это имя для настройки текстового элемента.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }
}

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

Предварительный просмотр вашей функции в Android Studio

Текущая canary сборка Android Studio позволяет вам предварительно просматривать ваши составные функции прямо в IDE, вместо того, чтобы загружать приложение на устройство Android или в эмулятор. Основное ограничение заключается в том, что составная функция не должна принимать никаких параметров. По этой причине вы не можете предварительно просмотреть функцию Greeting() напрямую. Вместо этого создайте вторую функцию с именем PreviewGreeting(), которая вызывает Greeting() с соответствующим параметром.

Добавьте аннотацию @Preview перед @Composable.

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

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

Пересоберите свой проект. Само приложение не поменяется, поскольку новая функция previewGreeting() нигде не вызывается, но Android Studio добавляет окно предварительного просмотра. В этом окне отображается предварительный просмотр элементов пользовательского интерфейса, созданных Composable функцией, отмеченной аннотацией @Preview. Чтобы обновить предварительный просмотр в любое время, нажмите кнопку обновления в верхней части окна предварительного просмотра.

Источник

Дополнительные материалы по Jetpack Compose

• Jetpack Compose Samples: примеры работы с Compose
• Mobile People Talks: Jetpack Compose — взгляд изнутри

Второй урок — Макеты в Jetpack Compose.