Search code examples
iosswiftuitableviewlayoutnslayoutconstraint

How are complex iOS screens made?


I'm trying my first steps in iOS development, and so far my app is going well. However, I've reached the point where simple UITableViews are just not cutting it.

For starters, I have a table view with two sections. I've implemented the method providing each section's title. But when I compare it to, for example, iOS's Settings screen, Apple's style (which I've seen implemented in other apps) looks much better, with better styling in the "section titles" and complex controls in the "table cells":

iOS's Settings screen

Now in my app, in some screens I would like to implement something similar to WhatsApp's settings screen. In this case, each "cell" does not have anything very noteworthy layout-wise, but I like the spacing between the different sections:

WhatsApp's settings screen

My last question is: when I am composing a cell, it is very clear to me how to implement a layout, its constraints, etc. Now imagine that I want to show a Table View showing a list of teams, and for each team I want to show the team players underneath, one player by line. It is not yet clear to me how I define layout contraints with an arbitrary number of elements. How would I approach doing this? Grid inside cell?

To sum it all up, my question is: are these screens TableViews with fancy styles and cells and more complex implementations? Or a different View that I am not aware of? Or even an empty canvas that they then compose "by hand"?

For context, I am developing with XCode 9, Swift, on a project with storyboards.


Solution

  • They are custom UITableViewCell cells (like the volume and profile avatar) or standard cell prototypes (WhatsApp settings are UITableViewCellStyleDefault with cell.imageView.image set.