How to modify gridView with the following example

Question

I've been trying to figure out how to accomplish this kind of gridView display for my app,

Image example of what i need to accomplish

i have this block of codes, which came from another question relating to gridView, but the texts inside each views are not displaying properly

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
    let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)

    let width = self.collectionView.frame.size.width
    let size:CGFloat = (width - space) / 2.0

    if indexPath.row == 0 {
       return CGSize(width: width, height: width / 2.0)
    }

    return CGSize(width: size, height: size)
}

Answer 1

Well , This is something you have just give layout to collection view but you have to use CustomCell to proper design inside items of collectionview, also for above layout guide i would suggest to use Extension like this

Extension Yourviewcontroller: UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

     let width = self.collectionView.frame.size.width
     let size:CGFloat = (width - space) / 2.0

     if indexPath.row == 0 {
       return CGSize(width: width, height: width / 2.0)
     }

     return CGSize(width: size, height: size)
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
  } 

}

Regarding custom cell creation use this link https://www.ioscreator.com/tutorials/custom-collection-view-cell-ios-tutorial ,

In your case just use one cell with one image and 2 lables below and make them centerAlign(Using constraint) And use that cell on your viewcontroller as below

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell

     cell.imageView.image = Yourimage
     cell.lableName.text = yourlable
     cell.lableDetail.text = yourdetailtext

     return cell

}

let me know if you need any other help on this