1

In Android it's easy to create a grid list with the next margins:

enter image description here

I found this solution for iOS but it doesn't add margins between cell and parent view, only between cells

let itemSpacing: CGFloat = 3
let itemsInOneLine: CGFloat = 2
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
flow.minimumInteritemSpacing = 3
flow.minimumLineSpacing = 3

enter image description here

How can I solve it?

P.S. I don't want to hardcode anything, so it should work ok for all iPhone/iPad devices

user924
  • 8,146
  • 7
  • 57
  • 139
  • Change flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) to flow.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5) – RajeshKumar R Apr 13 '19 at 02:11
  • @RajeshKumarR and what? https://i.postimg.cc/ZRSrbPkq/Screenshot-at-Apr-13-19-33-22.png – user924 Apr 13 '19 at 16:36

2 Answers2

2
let itemSpacing: CGFloat = 3
let itemsInOneLine: CGFloat = 2
let flow = UICollectionView().collectionViewLayout as! UICollectionViewFlowLayout
flow.sectionInset = UIEdgeInsets(top: itemSpacing, left: itemSpacing, bottom: itemSpacing, right: itemSpacing)
flow.minimumInteritemSpacing = itemSpacing
flow.minimumLineSpacing = itemSpacing
let cellWidth = (UIScreen.main.bounds.width - (itemSpacing * 2) - ((itemsInOneLine - 1) * itemSpacing)) / itemsInOneLine
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
RajeshKumar R
  • 15,445
  • 2
  • 38
  • 70
  • yes, actually it's better than constraint's constants and we can set shadow around cell – user924 Apr 19 '19 at 16:41
  • so it's better to set `UIEdgeInsets` and we can even set `flow.minimumInteritemSpacing = 0` because you can set space between cells in the same row by calculating the needed width of cell – user924 Apr 19 '19 at 16:43
  • Using sectionInset is better than adding space using constraint. If you need to use different padding for section that can't be done with constraints – RajeshKumar R Apr 19 '19 at 17:02
1

Add leading,trailing and top constraint with constant of 5 to your collection view.This will resolve your margin issue

Tayyab Faran
  • 36
  • 1
  • Thanks. It's what I needed. So I set 5 points everywhere (for `minimumInteritemSpacing`, `minimumLineSpacing`, leading, trailing and top constraint of collection view) and I tool into account all these margins, spacing to get the correct width `let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) - (margin * 2)`, both `itemSpace` and `margin` == 5. Now it looks great https://i.postimg.cc/VLWkS3S1/Screenshot-at-Apr-13-20-35-18.png – user924 Apr 13 '19 at 17:40
  • @user924 UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5) does the same work. Subtracting 10 in width calculation is needed in both approach – RajeshKumar R Apr 13 '19 at 17:52