Spacing after Collectionview Cell

Question

I want to create a UICollectionview like the picture. Here I am having 18 Squares. The width of the Collection view is addition of 6 times square width and three border lines width.Similarly the height is also addition of 3 times the height of square and two border lines.

In collectionView how can i add the borderlines in the front as well as in between the cells as in the picture.

Answer 1

Output

You can get above design layout from UICollectionViewLayout.

Three Files: 1. SquareViewController 2. SquareCollectionViewCell 3. SquareLayout

SquareViewController----

class SquareViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

// CONSTRAINTS: top 20, left 0, right 0, height 100.
@IBOutlet weak var squareCollectionVw: UICollectionView!

// SET squareCollectionVw HEIGHT CONSTRAINT OUTLET
@IBOutlet weak var collectionVwHeightConst: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()

    collectionVwHeightConst.constant = (UIScreen.main.bounds.width / 6) * 3 + 1
    squareCollectionVw.backgroundColor = UIColor.darkGray

    // Do any additional setup after loading the view.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {

    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return 18
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "square", for: indexPath) as! SquareCollectionViewCell

    cell.backgroundColor = UIColor.white
    cell.layer.borderColor = UIColor.lightGray.cgColor
    cell.layer.borderWidth = 1.0

    return cell
}
}

SquareCollectionViewCell

class SquareCollectionViewCell: UICollectionViewCell {

}

SquareLayout [UICollectionViewLayout]

class Square: UICollectionViewLayout {

    var CELL_HEIGHT = 0.0
    var CELL_WIDTH = 0.0

    var portrait_Ypos : Double = 0.0
    var portrait_Xpos : Double = 0.0
    var contentSize = CGSize.zero

    var cellAttrsDictionary = Dictionary<IndexPath, UICollectionViewLayoutAttributes>()

    override var collectionViewContentSize : CGSize {
        return self.contentSize
    }

    override func prepare() {

        CELL_WIDTH = (Double(UIScreen.main.bounds.width) / 6) - 0.5
        CELL_HEIGHT = CELL_WIDTH


        if let sectionCount = collectionView?.numberOfSections, sectionCount > 0 {

            for section in 0...sectionCount-1 {

                if let rowCount = collectionView?.numberOfItems(inSection: section), rowCount > 0 {

                    for item in 0...rowCount-1 {

                        let cellIndex = IndexPath(item: item, section: section)

                        if item <= 5
                        {
                            portrait_Ypos = 1

                            if item == 0
                            {

                                portrait_Xpos = 1
                            }
                            else
                            {

                                if item == 3
                                {

                                    portrait_Xpos = portrait_Xpos + CELL_WIDTH + 1
                                }
                                else
                                {

                                    portrait_Xpos = portrait_Xpos + CELL_WIDTH
                                }

                            }
                        }
                        else
                        {
                            if item == 6
                            {
                                portrait_Ypos = 1 + CELL_HEIGHT
                                portrait_Xpos = 1
                            }
                            else
                            {
                                if item % 6 == 0
                                {
                                    portrait_Ypos = portrait_Ypos + CELL_HEIGHT
                                    portrait_Xpos = 1
                                }
                                else
                                {
                                    if item % 6 == 3
                                    {
                                        portrait_Xpos = portrait_Xpos + CELL_WIDTH + 1
                                    }
                                    else
                                    {
                                        portrait_Xpos = portrait_Xpos + CELL_WIDTH
                                    }

                                }
                            }


                        }

                        let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
                        cellAttributes.frame = CGRect(x: portrait_Xpos, y: portrait_Ypos, width: CELL_WIDTH, height: CELL_HEIGHT)

                        if section == 0 && item == 0 {
                            cellAttributes.zIndex = 4
                        } else if section == 0 {
                            cellAttributes.zIndex = 3
                        } else if item == 0 {
                            cellAttributes.zIndex = 2
                        } else {
                            cellAttributes.zIndex = 1
                        }
                        cellAttrsDictionary[cellIndex] = cellAttributes

                    }

                }

            }
        }

        let contentWidth = UIScreen.main.bounds.width
        let contentHeight = CGFloat(portrait_Ypos) + CGFloat(CELL_HEIGHT)
        self.contentSize = CGSize(width: contentWidth, height: contentHeight)

        print("sPort.contentSize     ", self.contentSize)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        var attributesInRect = [UICollectionViewLayoutAttributes]()

        for cellAttributes in cellAttrsDictionary.values {
            if rect.intersects(cellAttributes.frame) {

                attributesInRect.append(cellAttributes)
            }
        }

        return attributesInRect
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {

        return cellAttrsDictionary[indexPath]!

    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

Embedd UICollectionViewLayout in UICollectionView:

Select squareCollectionVw, and Click Attributes Inspector,

1. Change Layout as Custom from Flow

2. Class as SquareLayout [ For me, Square ]

Answer 2

For add space between cell

Suppose there are 2 cell in one row of UICollectionView

For example:

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

        let width = (self.view.frame.size.width - 15) / 2.0 //total view width and 15 space between each cell
        let height = CGFloat(70.0) //Height is 70. (you can take same as width also)
        return CGSize(width: width, height: height)
    }

This will help you to add space between cell.

For add border between cell

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionCell
    cell.layer.borderWidth = 1.0
    cell.layer.borderColor = UIColor.black

}

Answer 3

From my opinion, you have to create a 2 identical cells and configure it in UICollectionViewFlowLayoutDelegate that each cell width is screen.width / 2 and put border for those 2 cells. In part of border you might have to play with layer (CALayer) to make it equal for 4 sides

Answer 4

You can simply put two UICollectionViewCell, with nine squares inside, in your UICollectionView and in the method cellForItem

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

    cell.layer.borderWidth = 2
    cell.layer.borderColor = .black

    return cell
}