Программирование

Server Driven UI в Android с Compose

Вы когда-нибудь задумывались о том, как можно изменить пользовательский интерфейс приложения не выпуская новой версии?

Опубликовано

3 года назад

13.01.2022

Автор:

AppTractor

Вы когда-нибудь задумывались о том, как можно изменить пользовательский интерфейс приложения не выпуская новой версии? Или направить пользователя в нужном направлении? Или изменить действия для кнопок? Если да, то вам нужен пользовательский интерфейс, управляемый сервером — Server Driven UI.

Что такое управляемый сервером пользовательский интерфейс

В обычных приложениях данные управляются серверной частью, а пользовательский интерфейс управляется каждым клиентом (веб, iOS и Android), но что, если и данные, и пользовательский интерфейс управляются серверной частью? Происходят чудеса. Вы можете изменить дизайн своего приложения без обновления клиента. Потрясающе, да?

Различные способы реализации Server Driven UI

Есть несколько библиотек, которые мы можем использовать для реализации в наших приложениях такого подхода:

Epoxy от Airbnb
Litho от Facebook
Proteus от Flipkart
Graywater от Tumblr
Groupie

Или мы можем реализовать SD UI с Compose (и это то, на чем мы сосредоточимся в этой статье).

Как получить данные и пользовательский интерфейс с сервера

Как понятно, нам нужно получить и данные, и пользовательский интерфейс с сервера. Как? Смотрите приведенный ниже JSON-ответ:

{
 "data": [
   {
     "type": "SCAFFOLD",
     "top_bar": [
       {
         "type": "APP_BAR",
         "children": [
           {
             "type": "TEXT",
             "value": "Server Driven Ui"
           }
         ]
       }
     ],
     "children": [
       {
         "type": "VERTICAL_LIST",
         "children": [
           {
             "type": "ROW",
             "children": [
               {
                 "type": "TEXT",
                 "value": "Hi 1"
               },
               {
                 "type": "IMAGE",
                 "value": "https://8pic.ir/uploads/flowers.png"
               }
             ]
           },
           {
             "type": "ROW",
             "children": [
               {
                 "type": "TEXT",
                 "value": "Hi 2"
               },
               {
                 "type": "IMAGE",
                 "value": "https://8pic.ir/uploads/tree.png"
               }
             ]
           },
           {
             "type": "ROW",
             "children": [
               {
                 "type": "TEXT",
                 "value": "Hi 3"
               },
               {
                 "type": "IMAGE",
                 "value": "https://8pic.ir/uploads/cactus.png"
               }
             ]
           }
         ]
       }
     ]
   }
 ]
}

С сервера поступают не только данные, но и пользовательский интерфейс. Мы должны определить наши важные View, такие как изображение, текст, карточка, строка, столбец и другие представления, а также значения, которые нам нужны для них. Например, нам нужна строка для нашего текстового представления или ссылка на изображение для нашего представления изображения. UI Kit помогает нам в работе с Server Driven UI.

Модель Android

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

Все наши View имеют тип данных. Но некоторые содержат больше данных, как вы видели ранее, поэтому мы должны их определить.

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

Вот модель, которую я сделал:

class RemoteModel {
   @SerializedName("data")
   val data: ArrayList<Data> = ArrayList()
}

data class Data(
   @SerializedName("children") val children: ArrayList<Data> = ArrayList(),
   @SerializedName("top_bar") val topBar: ArrayList<Data> = ArrayList(),
   @SerializedName("type") var type: Type = Type.UNKNOWN,
   @SerializedName("value") var value: String = "",
   @SerializedName("size") val size: Int = 0,
)

enum class Type {
   SCAFFOLD,
   TEXT,
   APP_BAR,
   IMAGE,
   VERTICAL_LIST,
   HORIZONTAL_LIST,
   ROW,
   COLUMN,
   UNKNOWN
}

Парсим Модель в Compose View

Существует простой способ распарсить данные, которые мы получаем с сервера, в представление. Просто посмотрите код ниже:

@Composable
private fun setView(data: ArrayList<Data>) {
   data?.forEach { value ->
       checkUiType(value)
   }
}

@Composable
private fun checkUiType(value: Data) {
   when (value.type) {
       Type.SCAFFOLD -> showScaffold(value = value)
       Type.TEXT -> showText(value = value)
       Type.APP_BAR -> showAppBar(value = value)
       Type.IMAGE -> ImageView(value = value)
       Type.VERTICAL_LIST -> verticalList(value = value)
       Type.HORIZONTAL_LIST -> verticalList(value = value)
       Type.ROW -> rowView(value = value)
       Type.COLUMN -> columnView(value = value)
       Type.UNKNOWN -> Spacer(modifier=Modifier.requiredSize(0.dp))
   }
}

Например, вы можете показать текстовый View с помощью функции ниже:

@Composable
private fun showText(value: Data) {
   Text(
      text = "${value.value}",
   )
}

Но что, если есть представление внутри другого представления? Тогда вы должны сделать цикл, чтобы добраться до последнего вида, и вот как можно это сделать:

@Composable
private fun verticalList(value: Data) {
   LazyColumn(
       modifier = Modifier.fillMaxSize()
   ) {
       item {
           setView(data = value.children)
       }
   }
}