如何解决TabLayout中两类分类数据的显示与同步异常问题

问题描述 #

我用TabLayout展示收入（Income）和支出（Expense）两类分类，通过CategoriesViewModel获取全部分类数据并监听变化。切换标签时过滤数据展示对应分类，同时移除旧观察者添加新观察者，但遇到两个问题：

• 切换标签时，选中标签的分类上方偶尔出现空白区域，像是旧分类视图没有被清理
• 在某标签增删分类时，另一标签的分类有时会出现在当前标签，甚至会被错误地以当前标签的类型存入数据库（比如有3个收入分类，在支出标签删除分类时，这些收入分类有时会被复制成支出分类）

原Fragment代码 #

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val categoriesRV = view.findViewById<RecyclerView>(R.id.categories_recycler_view)
        currentTab = arguments?.getString("currentTab") ?: "income"
        val tabLayout = view.findViewById<TabLayout>(R.id.type_tab_layout)
        for (i in 0 until tabLayout.tabCount) {
            val tab = tabLayout.getTabAt(i)
            val tabText = tab?.text?.toString()?.lowercase()
            if (tabText == currentTab) {
                tabLayout.selectTab(tab)
            }
        }

        categoryVM.getAllCategories().observe(viewLifecycleOwner) { categories ->
            val filteredCategories = filterCategories(categories, currentTab)
            val categoriesAdapter = CategoriesAdapter(filteredCategories, this)
            categoriesRV.adapter = categoriesAdapter
        }

        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                currentTab = tab?.text.toString().lowercase()

                if (categoryVM.getAllCategories().hasObservers()) categoryVM.getAllCategories().removeObservers(viewLifecycleOwner)

                categoryVM.getAllCategories().observe(viewLifecycleOwner) { categories ->
                    val filteredCategories = filterCategories(categories, currentTab)
                    val categoriesAdapter =
                        CategoriesAdapter(filteredCategories, this@CategoriesFragment)
                    categoriesRV.adapter = categoriesAdapter
                }
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                // Handle tab reselect
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                // Handle tab unselect
            }
        })

        val newCategoryButton = view.findViewById<Button>(R.id.new_category_button)
        newCategoryButton.setOnClickListener {
            openCategoryDialog(null) {
                categoryVM.addCategory(it.name, it.iconId, currentTab)
            }
        }
    }

原CategoriesAdapter代码 #

class CategoriesAdapter(
    private var categoryList: List<Category>,
    private val deleteClickListener: OnCategoryDeleteClickListener
) : RecyclerView.Adapter<CategoriesAdapter.CategoriesViewHolder>() {

    class CategoriesViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val categoryName: TextView
        val categoryIcon: ImageView
        val deleteBadge: ImageButton

        init {
            categoryName = view.findViewById(R.id.category_name)
            categoryIcon = view.findViewById(R.id.category_icon)
            deleteBadge = view.findViewById(R.id.badgeIcon)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CategoriesViewHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.item_category, parent, false)
        return CategoriesViewHolder(view)
    }

    override fun onBindViewHolder(holder: CategoriesViewHolder, position: Int) {
        val category = categoryList[position]
        holder.categoryName.text = category.name
        holder.categoryName
        if (category.iconId != null) {
            holder.categoryIcon.visibility = View.VISIBLE
            holder.categoryIcon.setImageResource(category.iconId)
            val layoutParams = holder.categoryIcon.layoutParams
            layoutParams.width = 130 // Adjust the width as per your requirement
            layoutParams.height = 130 // Adjust the height as per your requirement
            holder.categoryIcon.layoutParams = layoutParams
        }
        holder.deleteBadge.setOnClickListener {
            deleteClickListener.onDeleteClick(category)
        }
    }

    override fun getItemCount() = categoryList.size
}

interface OnCategoryDeleteClickListener {
    fun onDeleteClick(category: Category)
}

问题根源 #

1. 重复创建观察者：每次切换标签都移除旧观察者再添加新的，容易出现观察者清理不及时的情况，导致数据库变化时多次触发回调，数据处理逻辑混乱。
2. 频繁替换Adapter：每次切换标签都新建Adapter赋值给RecyclerView，旧Adapter的视图无法被正确回收，导致出现空白区域；同时多次创建Adapter会引发数据更新不一致的问题。
3. currentTab取值不安全：观察者回调可能在后台线程执行，而Tab切换修改currentTab在主线程，易导致过滤时使用错误的标签类型，进而引发数据错乱。

修复方案 #

1. 重构Fragment代码，复用观察者与Adapter #

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val categoriesRV = view.findViewById<RecyclerView>(R.id.categories_recycler_view)
    currentTab = arguments?.getString("currentTab") ?: "income"
    val tabLayout = view.findViewById<TabLayout>(R.id.type_tab_layout)

    // 初始化选中对应标签
    for (i in 0 until tabLayout.tabCount) {
        val tab = tabLayout.getTabAt(i)
        val tabText = tab?.text?.toString()?.lowercase()
        if (tabText == currentTab) {
            tabLayout.selectTab(tab)
            break
        }
    }

    // 初始化Adapter并绑定到RecyclerView
    val categoriesAdapter = CategoriesAdapter(emptyList(), this)
    categoriesRV.adapter = categoriesAdapter

    // 只添加一次观察者，回调中根据当前标签过滤数据
    categoryVM.getAllCategories().observe(viewLifecycleOwner) { categories ->
        val filteredCategories = filterCategories(categories, currentTab)
        categoriesAdapter.updateData(filteredCategories)
    }

    // 标签切换时仅更新currentTab，手动触发数据刷新
    tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab?) {
            currentTab = tab?.text.toString().lowercase()
            // 手动刷新当前数据，无需等待数据库变化
            categoryVM.getAllCategories().value?.let { categories ->
                val filteredCategories = filterCategories(categories, currentTab)
                categoriesAdapter.updateData(filteredCategories)
            }
        }

        override fun onTabReselected(tab: TabLayout.Tab?) {
            // 重选标签时刷新数据，避免数据不一致
            categoryVM.getAllCategories().value?.let { categories ->
                val filteredCategories = filterCategories(categories, currentTab)
                categoriesAdapter.updateData(filteredCategories)
            }
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
            // 无需额外操作
        }
    })

    val newCategoryButton = view.findViewById<Button>(R.id.new_category_button)
    newCategoryButton.setOnClickListener {
        openCategoryDialog(null) {
            categoryVM.addCategory(it.name, it.iconId, currentTab)
        }
    }
}

2. 修改Adapter，添加数据更新方法 #

给Adapter新增updateData方法，复用现有实例更新数据集并通知RecyclerView刷新：

class CategoriesAdapter(
    private var categoryList: List<Category>,
    private val deleteClickListener: OnCategoryDeleteClickListener
) : RecyclerView.Adapter<CategoriesAdapter.CategoriesViewHolder>() {

    // 原有ViewHolder、onCreateViewHolder、onBindViewHolder、getItemCount代码保持不变

    // 添加数据更新方法
    fun updateData(newList: List<Category>) {
        categoryList = newList
        notifyDataSetChanged()
    }
}

3. 额外优化建议 #

• 不要在onBindViewHolder中动态修改View的LayoutParams，建议直接在布局文件中设置固定大小，或者在onCreateViewHolder中初始化，提升性能。
• 检查filterCategories方法逻辑，确保严格根据分类的类型字段过滤，避免逻辑漏洞。
• 确认ViewModel中增删分类的方法逻辑正确，比如删除时根据分类ID操作，而非仅按类型过滤，防止误操作其他类型的分类。

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