Spacing after Collectionview Cell - ios

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,
Change Layout as Custom from Flow
Class as SquareLayout [ For me, Square ]

Answer 2

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
}

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

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
}