如何使用MVVM模式为TabLayout与ViewPager2设置Tab标题

问题解答 #

1. 固定Tab标题场景（不需要动态更新）

如果你的Tab标题是固定不变的，完全不需要使用LiveData和Observer，不需要为了套用MVVM而生硬添加不必要的响应式逻辑，直接按如下方案改造即可：

改造后的ViewModel

class WorkoutListTabViewModel : ViewModel(){
    // 直接公开不可变的标题列表即可，数据层持有数据源符合MVVM分层原则
    val tabTitles = listOf(
        "CHEST", "BACK", "LEG", "SHOULDER", "BICEPS", "TRICEPS", "ABS"
    )
}

改造后的Fragment代码

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    adapter = WorkoutListPagerAdapter(this)
    binding.apply {
        pager.adapter = adapter
        TabLayoutMediator(tabs, pager) { tab, position ->
            // 直接从ViewModel取对应位置的标题赋值即可
            tab.text = viewModel.tabTitles[position]
        }.attach()
    }
    // 移除原有多余的LiveData观察者代码
}

2. 动态Tab标题场景（需要后续修改标题）

如果你的Tab标题需要在用户操作、接口返回等场景下动态更新，才需要引入LiveData做响应式更新：

改造后的ViewModel

class WorkoutListTabViewModel : ViewModel(){
    // 用LiveData持有整个标题列表，方便整体更新后通知观察者
    private val _tabTitles = MutableLiveData<List<String>>(
        listOf("CHEST", "BACK", "LEG", "SHOULDER", "BICEPS", "TRICEPS", "ABS")
    )
    val tabTitles: LiveData<List<String>> = _tabTitles

    // 对外提供修改标题的方法
    fun updateTabTitle(position: Int, newTitle: String) {
        val currentList = _tabTitles.value?.toMutableList() ?: return
        if (position in currentList.indices) {
            currentList[position] = newTitle
            _tabTitles.value = currentList
        }
    }
}

改造后的Fragment代码

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    adapter = WorkoutListPagerAdapter(this)
    binding.apply {
        pager.adapter = adapter
        TabLayoutMediator(tabs, pager) { tab, position ->
            // 初始化用当前列表的默认值
            tab.text = viewModel.tabTitles.value?.get(position) ?: ""
        }.attach()
    }
    // 监听标题列表变化，动态更新所有Tab的标题
    viewModel.tabTitles.observe(viewLifecycleOwner) { titles ->
        titles.forEachIndexed { index, title ->
            binding.tabs.getTabAt(index)?.text = title
        }
    }
}

原有代码问题说明 #

你之前的ViewModel只声明了单个String类型的LiveData，无法匹配多Tab需要多个标题的场景，是数据结构设计错误导致不知道如何编写观察者逻辑。

内容的提问来源于stack exchange，提问作者ybybyb