Новый способ создания реактивных приложений с пользовательским интерфейсом JetPack Compose
Что такое пользовательский интерфейс, управляемый сервером?
Теоретически это просто: мы делаем запрос к серверу и получаем ответ JSON, в котором у нас есть логика для увеличения количества просмотров на экране. Основываясь на ответе, мы должны отобразить в макете встроенные компоненты пользовательского интерфейса. Это приводит к высококачественному пользовательскому интерфейсу (благодаря встроенному пользовательскому интерфейсу) и позволяет компаниям больше контролировать то, что пользователи могут видеть (мы можем контролировать каждый пиксель на экране с наших серверов).
Пользовательский интерфейс, управляемый сервером, - лучший способ получить больший контроль над контентом, который мы показываем в мобильных приложениях. Он существует уже некоторое время, но не так популярен, потому что нет собственного шаблона пользовательского интерфейса платформы для создания приложений с помощью пользовательского интерфейса, управляемого сервером.
Хотя такие приложения, как Airbnb, Swiggy и FlipKart, реализовали свои собственные фреймворки для создания приложений с использованием пользовательского интерфейса, управляемого сервером, ни одно из них не преуспело за пределами своей среды.
Что такое JetPack Compose?
Jetpack Compose - это современный набор инструментов для создания собственного пользовательского интерфейса Android. Jetpack Compose упрощает и ускоряет разработку пользовательского интерфейса на Android с меньшим количеством кода, мощными инструментами и интуитивно понятными API-интерфейсами Kotlin. - Разработчики Android
JetPack Compose приближает разработку пользовательского интерфейса к декларативному шаблону. Декларативный пользовательский интерфейс означает указание необходимых элементов пользовательского интерфейса в формате с использованием определенного языка.
JetPack Compose кажется первым нативным решением для создания приложений для Android с помощью шаблона SDUI. Jetpack Compose - одна из недавних попыток Google упростить разработчикам Android разработку пользовательского интерфейса. Jetpack Compose находится на очень ранней стадии.
Как реализовать SDUI с помощью JetPack Compose?
Как мы уже говорили, состав Jetpack - это декларативный подход к созданию пользовательского интерфейса. Здесь у нас есть функции, помеченные composable
, в которых мы пишем код пользовательского интерфейса. Эти функции представляют собой отдельные представления, которые могут быть расширены в соответствии с требованиями.
Мы можем добиться этого с помощью JetPack Compose, создав Composable
функции для каждого типа строки и раздувая их на экране, используя scaffold
в compose.
Глубокое погружение
Хватит теоретической части, давайте начнем строить простой экран на основе ответа сервера с помощью Jetpack Compose. Я полагаю, вы знакомы с основами создания реактивного ранца; если нет, пожалуйста, ознакомьтесь с этой статьей, прежде чем двигаться дальше.
Давайте создадим экран, на котором мы будем показывать горизонтальные списки телешоу типа Netflix на основе ответа сервера. На верхнем уровне у нас есть три типа представлений, означающих composable
функции для верхней панели, горизонтального списка и полноразмерных баннеров.
Если копнуть глубже, вы увидите еще три представления, например обычные баннеры и большой баннер для выделения контента. Это просмотры, которые мы фактически рассматриваем как recyclerview
элементов.
На изображении выше представлен вид с высоты птичьего полета на то, как функции компоновки Jetpack создают пользовательский интерфейс с использованием составных функций. Как мы видим на изображении, каждая компонуемая функция представляет определенный вид. Вы увидите полную реализацию составляемых функций в следующей части этой статьи.
Чтобы сопоставить типы представлений, которые мы получаем в ответ на конкретную компонуемую функцию, у нас будет функция сопоставления. Например, если тип представления в ответе bannerView
, то вызывается составная функция bannerItem
с необходимыми параметрами. Взгляните на следующий код, представляющий функцию сопоставления:
TopAppBar
Следующая составная функция MoviesTopBar
представляет верхнюю панель экрана с заголовком TvShows. Здесь мы использовали три параметра TopAppBar
для отображения релевантного содержания.
- title: Заголовок, который будет отображаться в центре TopAppBar
- действия: действия, отображаемые в конце TopAppBar. Нравится пункты меню в целом.
- backgroundColor: цвет фона для TopAppBar.
Заголовок
Каждый список, отображаемый на экране, имеет заголовок. headerview
- это компонуемая функция, которую мы использовали для отображения заголовка над каждым списком. headerview
function содержит простой UI-компонент под названием text
. Взглянем на реализацию:
Элементы списка
Теперь займемся элементами списка. Здесь у нас есть три типа элементов списка, такие как элемент баннера, элемент баннера оригинала и элемент нового выпуска. Здесь у нас есть три разные функции для представления каждого элемента подходящего размера. Давайте посмотрим на часть реализации этих функций:
The Coil - это загрузчик изображений Kotlin First от команды Instacart со многими расширенными функциями, такими как предварительная загрузка изображений, обратные вызовы, загрузка изображений с учетом жизненного цикла, преобразования, выборка изображений и многое другое. Прочтите эту статью, чтобы узнать больше о Coil.
На данный момент мы использовали специальную библиотеку, созданную Крисом Бэйнсом, для импорта Coil в проекты компоновки реактивного ранца. Эта библиотека предоставляет простые в использовании компоненты, которые могут извлекать и отображать изображения из внешних источников, таких как сеть, с помощью библиотеки загрузки изображений Coil. Чтобы интегрировать эту библиотеку, добавьте следующую строку в файл build.gradle на уровне приложения зависимостей.
Горизонтальный скроллер
При создании у нас есть два режима прокрутки -- HorizontalScroller
и VerticalScroller
. Эти компоненты похожи на scrollview
в нашей традиционной разработке пользовательского интерфейса. В первую очередь они содержат корневое представление, в котором есть все дочерние представления. Давайте посмотрим на синтаксис этих компонентов:
Просмотры верхнего уровня
Теперь, когда мы реализовали все компоненты по отдельности, пришло время использовать их на основе типов представлений в ответе сервера. Используя Scaffold
в компоновке, мы можем собрать их вместе, посмотрите:
Список параметров - это список компонентов, отображаемых на макете. В первом аргументе каркаса topAppBar
нам нужно реализовать topbar
экрана, если компонент topbar
находится в списке.
В следующем параметре Scaffold, bodyContent
, нам нужно отобразить все представления в ответе с помощью компонента Stack
.
Мы увидели, как реализовать составные функции для создания пользовательского интерфейса на основе ответа. Теперь сконцентрируемся на структуре ответа от сервера, посмотрим:
Для типичного ответа, подобного приведенному выше, результат будет таким, как показано ниже:
Точно так же, если мы хотим включить новый компонент или удалить существующий компонент с экрана, нам просто нужно изменить ответ. Мы также можем изменить порядок просмотров с серверов в мгновение ока.
Заключение
До сих пор мы реализовали все необходимые представления в виде отдельных универсальных составных функций, а затем сопоставили эти функции с типами представлений в ответе сервера.
Поскольку JepPack Compose находится на ранней стадии, фрагменты кода могут быть изменены. Но основная часть того, как SDUI работает с Jetpack compose, остается прежней.
Бонус
Чтобы узнать больше о JetPack Compose и пользовательском интерфейсе, управляемом сервером, ознакомьтесь со следующими статьями.
- « Изучение пользовательского интерфейса, управляемого сервером »
- « Jetpack Compose - новый и простой способ создания UI материалов в Android »
- « Глубокое погружение в состав Jetpack »
- « Интересные обновления от Jetpack Compose »
Надеюсь, вы узнаете что-то полезное, спасибо за чтение.