How to make a UITableView look like this?

Question

I'm curious of how Youtube `s UITableViewCells are done, here is a screenshot:

Like you can see the cells are like squared and centred, how can I do that?

Answer 1

Use a UICollectionView instead of a UITableView

Cells are automatically centered, just create a square size.

Answer 2

While you actually can use UICollectionView instead of a UITableView, this layout (YouTube App) can actually be achieved with UITableView as well.

You will need to create a custom UITableViewCell, that has few images and labels. When you create a custom UITableViewCell, you add items to the contentView property. You can then change the constraints or frame of the contentView property to achieve the effect.

Of course, there are more ways to achieve this layout, but I would follow this one:

1. Create a custom subclass of UITableViewCell.
2. Give UITableViewCell a clear background.
3. Give white background to the contentView UIView property of the created subclass.
4. Add constraints for margin between cells to contentView in UITableViewCell.
5. Design the layout of the cell in contentView.

It is basically not hard to create a design like this.