How to modify gridView with the following example - swift

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