UICollection View custom layout

Question

I am trying to layout a UICollectionView like the mock-up I have drawn in the photo(also showing the index of each item).

I did some research on UICollectionViewLayout and also implement some of the methods but the result is nothing

enter image description here

enter code here

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding
        if indexPath.row == 3{
            return CGSize(width: collectionViewSize, height: collectionViewSize/2)
        }
        else{
        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
        }
    }

using above function i get result shown in image...but i not want 3rd number cell

For this layout overriding https://developer.apple.com/documentation/uikit/uicollectionviewdelegateflowlayout/1617708-collectionview should be enough. — Larme, Mar 20 '18 at 09:42
can you give me any example...and i want to design layout for iPhone as well as iPad — kruti, Mar 20 '18 at 10:06
It may help you- https://stackoverflow.com/questions/28325277/how-to-set-cell-spacing-and-uicollectionview-uicollectionviewflowlayout-size-r — iDeveloper, Mar 20 '18 at 11:31
First cell is at row 0. We start with index 0 in most of programming language, not 1, so `if indexPath.row == 3{` should be `if indexPath.row == 2{`. Note that with collectionView we tend to prefers using `item` instead of `row`. — Larme, Mar 21 '18 at 06:59

Hudi Ilfeld · Answer 1 · 2018-03-21T13:26:14.887

try as following:

Declare a CGFloat for the margin at the top of the class and set it in your viewDidLoad() like this:

var margin: CGFloat!

override func viewDidLoad() {
    super.viewDidLoad()

    // set your margin to whatever suits you
    margin = 2

}

Override minimumInteritemSpacingForSection function and set it to return your margin variable:

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

Override sizeForItem function as the following code:

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

    if indexPath.item < 3 {
       if indexPath.item > 0 && indexPath.item == 2 {
        return CGSize(width: view.frame.width, height: 100)
       } else {

          return CGSize(width: (collectionView.frame.width / 2) - margin, height: 100)
       }
    } else {
    if (indexPath.item + 1) % 3 == 0 {
        return CGSize(width: view.frame.width, height: 100)
    } else {
        return CGSize(width: (collectionView.frame.width / 2) - margin, height: 100)
    }
 }

}

Hope it helps :)

UICollection View custom layout

1 Answers1