Android: form builder на старых добрых View

Привет всем! Хочу поделится идеей создания form builder-а, которую я реализовал некоторое время назад.

В приложении я писал модуль, отвечающий за платежи. По предварительным расчетам модуль должен был поддерживать более 300 платежей, каждый платеж приблизительно 10 экранов, т.е. это более 3000 различных экранов. Я тогда не использовал jetpack compose и от мысли, что мне придется написать огромное количество “View-based layouts” xml файлов (а потом их рефакторить и поддерживать) мне становилось как-то не по себе.

Мне предложили сделать form builder, который позволял бы легко и в декларативной манере добавлять новые экраны, не плодить огромное количество однотипных файлов и легко вносить изменения. Конечно jetpack compose позволяет достичь всего этого из коробки, но бывает, что по тем или иным причинам вы остаетесь на старом добром View UI и идея какого-либо builder-а может быть для вас актуальна.

Итак первое, что мне было нужно – это не плодить xml файлы тысячами. В идеале, хорошо бы иметь один общий файл формы и наполнять его различным содержимым. В моем случае формы были достаточно похожи друг на друга: набор ограниченного числа UI элементов и внизу формы кнопка типа “submit form” (иногда с какими-то пояснениями / ссылками под ней). Решил использовать RecyclerView, в который можно было динамически вставлять нужное количество элементов. Как-то так выглядел xml файл формы:

…     <data>         <variable name="vm" type="…BaseViewModel" />     </data>      <androidx.constraintlayout.widget.ConstraintLayout         android:layout_width="match_parent"         android:layout_height="match_parent" >          <androidx.recyclerview.widget.RecyclerView             android:id="@+id/rv_form"             android:layout_width="0dp"             android:layout_height="0dp"             app:adapter="@{vm.rvMainAdapter}"             app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"             app:listData="@{vm.mainItems}"             …          />          <androidx.recyclerview.widget.RecyclerView             android:id="@+id/rv_bottom"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_marginBottom="@dimen/ps_button_bottom_margin"             app:adapter="@{vm.rvBottomAdapter}"             app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"             app:listData="@{vm.bottomItems}"             …          />          <ProgressBar …

RecyclerView понадобилось два, один для основных элементов формы и другой для кнопки / кнопок внизу экрана и связанных с ней UI элементов. С помощью data binding-а форма связывалась с ViewModel и получала все необходимые элементы и все их изменения (для этого эл-ты были обернуты в LiveData).

Далее BaseViewModel:

internal abstract class BaseViewModel(appContextProvider: AppContextProvider) : ViewModel() {     val rvMainAdapter = MutableLiveData<ListAdapter<*, *>>(ViewsAdapter())     val rvBottomAdapter = MutableLiveData<ListAdapter<*, *>>(ViewsAdapter())     val mainItems = MutableLiveData<List<BaseFieldValue>>()     val bottomItems = MutableLiveData<List<BaseFieldValue>>() … }  @BindingAdapter("adapter") internal fun setRecyclerViewAdapter(recyclerView: RecyclerView, adapter: ListAdapter<*, *>) {     recyclerView.adapter = adapter }  @BindingAdapter("listData") internal fun bindRecyclerView(recyclerView: RecyclerView, data: List<BaseFieldValue>?) {     (recyclerView.adapter as ListAdapter<BaseFieldValue, *>).submitList(data) }

В нем находятся адаптеры и списки UI элементов для RecyclerView, которые “байндяться” к форме.

 Теперь о самих UI элементах. Для каждого элемента создается свой xml файл. Приведу пример наиболее сложного элемента InputView:

<data>     <variable name="fv" type="…InputFieldValue" /> </data>  <...InputView     android:id="@+id/item"     android:layout_width="match_parent"     android:layout_height="wrap_content"     app:design_label="@{fv.title}"     app:design_hint="@{fv.hint}"     app:design_assistiveText="@{fv.assistive}"     app:design_text="@={fv.text}"     app:error_text="@{fv.error}"     app:design_icon="@{fv.endDrawableRes}"     app:design_iconColor="@{fv.endDrawableColorRes}"     app:inputType="@{fv.inputType}"     app:imeOptions="@{fv.imeOptions}"     app:enabled="@{fv.enabled}"     app:onIconClickListener="@{() -> fv.onIconClick()}"     app:fv="@{fv}" /> 

InputView – элемент из дизайн-библиотеки программы, которому передаются (“байндяться”) все необходимые данные.

Вот так выглядят FieldValues:

internal abstract class BaseFieldValue(     open val id: Int,     val type: ViewType,     var containerId: Int? = null,     var isVisible: Boolean = true,     open var data: Any? = null, ) {     abstract fun bind(parent: ViewGroup, binding: ViewDataBinding)      override fun equals(other: Any?): Boolean {…}      override fun hashCode(): Int {…} }  internal data class InputFieldValue(     @IdRes override val id: Int,     val title: String? = null,     val text: MutableLiveData<String?> = MutableLiveData(null),     var error: MutableLiveData<String> = MutableLiveData(""),     val inputType: String = INPUT_TYPE_NUMBER,     val imeOptions: String = IME_ACTION_NEXT,     val hint: String? = null,     val assistive: String? = null,     @DrawableRes val endDrawableRes: Int = 0,     @ColorRes val endDrawableColorRes: Int = 0,     var enabled: Boolean = true,     val formatter: BaseInputFieldFormatter = BaseInputFieldFormatter(),     val validator: BaseInputFieldValidator = BaseInputFieldValidator(),     val action: ((data: Any?) -> Unit)? = null,     override var data: Any? = null,     val onIconClickAction: ((data: Any?) -> Unit)? = null, ) : BaseFieldValue(id, ViewType.INPUT) {      override fun bind(parent: ViewGroup, binding: ViewDataBinding) {         (binding as PsItemInputViewBinding).fv = this     }      fun onIconClick() {         onIconClickAction?.invoke(data)     } }

Повторю, что InputView самый сложный элемент, другие выглядят сильно проще. Функция bind связывает данные с xml файлом. Для InputView используются formatter и validator для соответственно форматирования и проверки правильности введенных данных (например, через каждые несколько цифр можно добавлять пробел или тире и не давать вводить более определенного количества цифр, а номер карты можно проверять например по алгоритму Лу́на).

Еще один интересный элемент, который стоит отметить, это ContainerView. Он позволяет располагать элементы горизонтально (RecyclerView у меня вертикальная, т.е. элементы следуют друг за другом сверху вниз, а иногда в форме надо расположить несколько элементов горизонтально).

<data>     <variable name="fv" type="...ContainerFieldValue" /> </data>  <LinearLayout     android:id="@+id/container"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="horizontal" />  ----  internal data class ContainerFieldValue(     @IdRes override val id: Int = View.generateViewId(),     val items: List<BaseFieldValue> ) : BaseFieldValue(id, ViewType.CONTAINER) {      override fun bind(parent: ViewGroup, _binding: ViewDataBinding) {         val binding = _binding as PsItemContainerViewBinding         binding.fv = this         val view = binding.root as ViewGroup          items.forEach { field ->             val viewHolder = createViewHolderByType(parent, field.type.ordinal)             viewHolder.bind(field)             view.addView(viewHolder.itemView)             val lp = viewHolder.itemView.layoutParams as LinearLayout.LayoutParams             lp.weight = 1.0f             view.layoutParams = lp         }     } }

Здесь container, для каждого добавляемого элемента, создает ViewHolder, “байндит” элемент и добавляет его в container.

 Теперь, когда для каждого UI элемента есть xml файл и класс данных, и все необходимые поля связанны через data binding, настала очередь адаптера. Сначала ViewHolder:

internal class ViewHolder<Binding : ViewDataBinding>(     resId: Int,     val parent: ViewGroup,     var binding: Binding = DataBindingUtil.inflate(LayoutInflater.from(parent.context), resId, parent, false) ) : RecyclerView.ViewHolder(binding.root) {      init {         val fragment = parent.findFragment<Fragment>()          with(binding) {             lifecycleOwner = fragment.viewLifecycleOwner         }     }      fun bind(item: BaseFieldValue) {         item.bind(parent, binding)     } }

Он устанавливает lifecycleOwner и вызывает функцию bind для FieldValue.

Собственно ViewsAdapter получается достаточно простым:

internal class ViewsAdapter : ListAdapter<BaseFieldValue, ViewHolder<out ViewDataBinding>>(DiffCalback) {     object DiffCalback : DiffUtil.ItemCallback<BaseFieldValue>() {         override fun areItemsTheSame(oldItem: BaseFieldValue, newItem: BaseFieldValue): Boolean {             return oldItem.id == newItem.id         }          override fun areContentsTheSame(oldItem: BaseFieldValue, newItem: BaseFieldValue): Boolean {             return oldItem == newItem         }     }      override fun getItemViewType(position: Int): Int {         return getItem(position).type.ordinal     }      override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder<out ViewDataBinding> {         return createViewHolderByType(parent, viewType)     }      override fun onBindViewHolder(holder: ViewHolder<out ViewDataBinding>, position: Int) {         holder.bind(getItem(position))     } }  internal enum class ViewType {     INPUT, CONTAINER, … }  internal fun createViewHolderByType(parent: ViewGroup, viewType: Int): ViewHolder<out ViewDataBinding> {     return when (viewType) {         ViewType.INPUT.ordinal -> ViewHolder<PsItemInputViewBinding>(R.layout.ps_item_input_view, parent)         …    } }

Ну и BaseFragment, от которого наследуются все Fragment-ы экранов:

internal abstract class BaseFragment<Binding: ViewDataBinding, WM: BaseViewModel> : Fragment() {     protected abstract val layoutRes: Int     private var _binding: Binding? = null     val binding         get() = _binding!!     protected abstract val viewModel: WM     …     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {         _binding = DataBindingUtil.inflate(inflater, layoutRes, container, false) ?: throw Exception(getString(R.string.ps_error_layout_id))              with(binding) {             lifecycleOwner = viewLifecycleOwner             setVariable(BR.vm, viewModel)         }              viewModel.onCreateView()                  viewModel.action.observe(viewLifecycleOwner) {…}         …         return binding.root     }     … }

ViewModel нужна здесь для вызова функций, связанных с жизненным циклом и для “observe” всего необходимого.

Собственно это вся обвязка. Дальше для каждого экрана создаются Fragment и ViewModel. Fragment очень простой:

internal class FineSearchFragment : BaseFragment<PsFragmentFormBinding, FineSearchViewModel>() {     override val viewModel: FineSearchViewModel by viewModels()     override val layoutRes = R.layout.ps_fragment_form }

Во ViewModel мы определяем наполнение нашего экрана. Вот так выглядит типичная форма:

internal class FineSearchViewModel @Inject constructor(     private val repository: ChargesRepository,     appContextProvider: AppContextProvider, ) : BaseViewModel(appContextProvider) {      override fun onCreate() {         super.onCreate()          val chargesData = repository.getData()          with(context.resources) {             addFields(listOf(                 InputFieldValue(                     id = R.id.ps_...,                     title = getString(R.string.ps_...),                     hint = getString(R.string.ps_...),                     text = MutableLiveData(…),                     inputType = INPUT_TYPE_TEXT,                     formatter = TemplateFieldFormatter(AUTO_DOCUMENTS_TEMPLATE),                     validator = NumberOrEmptyFieldValidator(VRC_LENGTH),                     endDrawableRes = R.drawable…,                     endDrawableColorRes = R.color…,                     onIconClickAction = ::showAdvice,                     data = VRC_ADVICE,                 ),                 CheckboxFieldValue(                     id = R.id.ps_...,                     title = getString(R.string.ps_...),                     selected = MutableLiveData(chargesData.saveDocuments),                 ),             ))              addField(                 ContainerFieldValue(                     id = R.id.ps_container1,                     items = listOf(                         ButtonFieldValue(                             text = MutableLiveData(getString(R.string.ps_.)),                             horizontalMarginRes = R.dimen.ps_...,                             action = ::onCancelButtonClick,                         ),                         ButtonFieldValue(                             text = MutableLiveData(getString(R.string.ps_.)),                             horizontalMarginRes = R.dimen.ps_...,                             action = ::onOkButtonClick,                         ),                     ),                 ),                 isMainFields = false             )         }     } }

Здесь addField / addFields ф-ции добавляющие элементы в список mainItems / bottomItems. Далее во ViewModel делаются необходимые сетевые запросы, заполняются / апдейтятся поля формы и т.д.

В общем удалось добиться того, чего хотелось: экран создается в декларативной манере (списком data class-ов с нужными данными), есть всего один xml файл формы и несколько xml файлов элементов, изменения вносятся в базовые файлы.

Надеюсь идея сможет кому-то пригодится.