【TECH BLOG】XMLで書かれたUIをJetpack Composeで書き換える手順の紹介

はじめに

ブランドソリューション開発本部フロントエンド部FAANSの山田（@yshogo87）です。

本投稿では、すでにXMLで書かれたレイアウトをJetpack Composeにリファクタリングした理由とその手順について紹介します。

リファクタリングする画面の問題点

FAANSでは「コーデ閲覧数、送客数、売上数」を表示する画面があります。

この画面はUIの状態が一元管理されておらず状態がViewのみにしかないことで、機能の追加修正時に不具合を作り込みやすく、リリースまでに時間がかかるという問題がありました。

UIの状態変更が一元管理されていない

この画面ではUIの状態変更が複数の異なるソースコードから行われていて、一元管理されていませんでした。UIの状態を変えている場所は大きく分けると2つです。

現在のUIの状態変更が別のUIから行われる

この画面は1つのXMLファイルにViewPagerとRecyclerViewがあり、ViewPagerのグラフタップや横スワイプで下のRecyclerViewの情報も変わる仕様になっています。

この仕様のため、AdapterクラスにFragmentのBindingを渡して直接別のRecyclerViewの状態を変更する実装でした。

// Adapterクラス
class CoordinateImpressionsGraphAdapter(
    private val binding: FragmentCoordinateImpressionsBinding,
    private val viewModel: CoordinateImpressionsActionDelegateImpl,
    diffCallBack: DiffCallBack = DiffCallBack()
) : RecyclerView.Adapter<CoordinateImpressionsGraphBindingHolder>() {
    override fun onBindViewHolder(holder: CoordinateImpressionsGraphBindingHolder, position: Int) {
        ・
        ・
        ・
        // グラフのタップイベント
        chart.setOnChartValueSelectedListener(object : OnChartValueSelectedListener {
            override fun onValueSelected(e: Entry, h: Highlight?) {
                // 別のRecyclerViewを直接更新している
                (binding.impressionsDetail.adapter as CoordinateImpressionDetailAdapter).submitList(initialBrandList)
            }
            override fun onNothingSelected() {}
        })
        ・
        ・
        ・
    }
}

このようにAdapterクラスから別のUIの状態を変更され、現在のUIの状態がViewにしか保持されていないことが問題でした。UIの状態がViewだけに存在すると、状態の把握・管理することが難しくなり実装に時間を要していました。

UIの状態変更が複数のLiveDataから行われる

ViewModelからFragmentにイベントやUIの状態変更時にLiveDataを使っていました。これらのLiveDataは「UIの状態変更すること」と「イベントをFragmentに伝えること」の2つの役割があって区別されていませんでした。

class CoordinateImpressionsViewModel @Inject constructor(
    private val coordinateImpressionsUseCase: CoordinateImpressionsUseCase
) : ViewModel() {
    ・
    ・
    ・
    ・
    private val _navigatePopStack = MutableLiveData<Event<Unit>>()
    val navigatePopStack: LiveData<Event<Unit>>
        get() = _navigatePopStack
    private val _coordinateImpressions = MutableLiveData<WearCoordinateImpressions>()
    val coordinateImpressions: LiveData<WearCoordinateImpressions>
        get() = _coordinateImpressions
    private val _hasError = MutableLiveData<ErrorType>()
    val hasError: LiveData<ErrorType>
        get() = _hasError
    private val _isLoading = MutableLiveData<Boolean>()
    val isLoading: LiveData<Boolean>
        get() = _isLoading
    private val _currentPosition = MutableLiveData<Int>()
    val currentPosition: LiveData<Int>
        get() = _currentPosition

UIの状態を変更するLiveDataが分かれているので、状態を変更する処理を追って確認しながら実装していく必要があるため、機能追加や仕様変更に時間を要していました。