Как изменить gridView с помощью следующего примера

Question

Я пытался выяснить, как выполнить sh этот вид gridView для моего приложения,

Пример изображения того, что мне нужно сделать sh

у меня есть этот блок кодов, который возник из другого вопроса, относящегося к gridView, но тексты внутри каждого представления отображаются неправильно

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

Что ж, это то, что вы только что задали макет для представления коллекции, но вы должны использовать CustomCell для правильного дизайна внутри элементов коллекции, а также для руководства по макету выше, я бы предложил использовать расширение, как это

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
  } 

}

Относительно создания пользовательских ячеек используйте эту ссылку https://www.ioscreator.com/tutorials/custom-collection-view-cell-ios-tutorial,

В вашем случае просто используйте одну ячейку с одним изображением и 2 метками ниже и сделайте их centerAlign (используя ограничение) И используйте это ячейка на вашем контроллере, как показано ниже

 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

}

, дайте мне знать, если вам нужна какая-либо другая помощь по этому вопросу