Grouped UITableView is too transparent for row animations

Question

I have a grouped UITableView with custom section header views and want to perform add/remove rows animation when user clicks on these header views:

tableView.insertRows(at: rowsToInsertOrDelete, with: .top)
//or
tableView.deleteRows(at: rowsToInsertOrDelete, with: .top)

It should look like "combobox" animation.

The problem is gaps between groups. It seems they contain no UI elements so they are transparent and animation overlaps them (only the first group/section works properly). In the same time custom section header views are above the animation and hide it properly for each section.

How to fix this issue? For example by adding opaque views overlapping these gaps?

Answer 1

I had the same problem — the animation peeks through the groups between sections.

I tried using .plain style with blank footer views. That eliminates the animation glitch, but the footer floats over the cells at the bottom of long scrollable sections, which looks worse.

I settled on .grouped style with .middle animation. It doesn't have that drop-down combobox look I wanted, but the animation is limited to the section where the cells change, which is less distracting than the glitch with .top.

Answer 2

My current solution is to avoid empty sections. It seems everything becomes ok if each section has at least one row.

How I found out it - the speed of this buggy animation depends on count of sequential empty sections.

In other words try to replace sections without rows with sections with 1 UITableViewCell with zero row height