How to create table view with rounded corners around the list items

Question

I am trying to recreate a menu similar to the ones in the detail view of the iOS 13 Health app. Please refer to the marked up screenshot.

I know that this can be done with a table view. There's a section title and list items. But what I want to achieve is similar to the look shown in the screenshot whereby there's a background colour on the list items (not including the section title) and rounded corners at the top and bottom of the list.

Can anybody tell me how I can achieve this with the table view? Or point me towards the right direction? I already know how to setup table views and programmatically add the details. I just need help on how to achieve the styling as shown below.

Thanks!

Answer 1

So, I was able to figure it out. For the benefit of the devs who stumble in the same dilemma, I'm posting my solution here. But I will be tagging Glenn's answer above as the correct answer as it lead me to find the solution. Thanks again Glenn!

It appears that I didn't have to do anything special with my code. I just discovered that on XCode 11 and iOS 13, there's a new table view style called "Inset Grouped". You may set this property from IB or via code.

With a quick experimentation I was able to come up with the result as shown on the screenshot below.

Answer 2

It's not that complex to do. This one of the multiple ways that that style can be done.

a. You can use grouped tableView, as what you've indicated in the screenshot.

b. Provide section title, or better yet, a section view (for more customization!).

c. For each section, you have ONE tableViewCell.

d. For each cell of that c., you will have a tableView.

e. For each tableView of that d., you will have your a new cell of course (item cell).

f. How to compute for the height of the tableView of e.? There are multiple ways.

• Provide static height (if your number of items are static).

• If dynamic count, but you have constant height of each cell, then you can just compute it like so: itemsCount * heightConstantOfCell

• If again you have dynamic count of rows/items, and you have iether constant height of each cell or dynamic height of each cell, then you can observe the frame key of the whole tableView.

g. Finally, just add some corner radius to each container view of your tableView in d..

Note, this screenshot ONLY shows the item g.. It's merely a corner radius of each container view of your tableView in a tableViewCell that is a cell of your main tableView.

---

Another way is to use UICollectionView, but kinda more complex than what I've discussed - at least for me.