CODEWITHSUNDEEP
iosuser-interfacedesign-guidelines
John Doe
John Doe

Reputation: 2501

What layout is better for a UI with two card cells per row?

What is an optimal way to create a grid view for iOS with two columns per row as shown in the screenshot?

grid

I am currently using tableview with static cells, but the UI gets distorted on some iPad. Also how best to arrange the grid border? Currently I use imageview of center ones, and a new cell for the horizontal ones with an imageview. But this does not feel right.

Upvotes: 1

Views: 207

Answers (2)

Gustavo Vollbrecht
Gustavo Vollbrecht

Reputation: 3256

That should be made with an UICollectionView, it has a specific delegate which is UICollectionViewDelegateFlowLayout that makes it very easy to reach that appearance.

Step 1

Add UICollectionViewDelegateFlowLayout in your UIViewController, like: <#Your View Controller#> : UICollectionViewDelegateFlowLayout

Step 2

The amount of cells per row is calculated based on the amount of cells that fit the UICollectionView width. Therefore, having cells with half the width will fit 2 cells per row.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.width / 2, height: /* your desired height here */)
}

Tips:

You can even make it a little smaller than half the screen, by multiplying values like this: (collectionView.frame.width / 2) * 0.98, you can also subtract constant values.

You may need to set collectionView.minimumInteritemSpacing = 0 since this attribute default value is 10.0

Documentation: UICollectionViewFlowLayout

Upvotes: 2

Tim Kokesh
Tim Kokesh

Reputation: 879

This looks like a job for a UICollectionView! (It shouldn't be too hard to change your UITableViewDataSource protocol methods to their UICollectionViewDataSource equivalents.)

Upvotes: 1

Related Questions