Новый способ создания реактивных приложений с пользовательским интерфейсом 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 и пользовательском интерфейсе, управляемом сервером, ознакомьтесь со следующими статьями.

Надеюсь, вы узнаете что-то полезное, спасибо за чтение.

Вы можете найти меня в Medium, Twitter, Quora и LinkedIn.