Custom change color of cell bottom border

Question

I need to change color of bottom cell in UICollectionView, in this question just I do this

I need set color to bottom cell like this

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor(red: 184/255, green: 215/255, blue: 215/255, alpha: 1).cgColor
border.frame = CGRect(x: 0, y: cell.frame.size.height - width, width: cell.frame.size.width, height: cell.frame.size.height)
border.borderWidth = width
cell.layer.addSublayer(border)
cell.layer.masksToBounds = true

Answer 1

Instead of trying to add it as a border, I would add two layers instead as it is much easier. Something like :

 override func layoutSubviews() {
    super.layoutSubviews()

    backgroundShape = CAShapeLayer.init()
    backPath = UIBezierPath.init(rect: self.bounds)// Use your path
    backgroundShape.path = backPath.cgPath
    backgroundShape.fillColor = UIColor.blue.cgColor//border color in your case
    self.layer.addSublayer(backgroundShape)

    foregroundShape = CAShapeLayer()
    forgroundPath = UIBezierPath.init(rect: CGRect.init(x: 0, y: -20, width: self.bounds.width, height: self.bounds.height))// Use your path with  a little negative y
    foregroundShape.path = forgroundPath.cgPath
    foregroundShape.fillColor = UIColor.yellow.cgColor//white in your case
    self.layer.addSublayer(foregroundShape)  
}

---

A detailed answer:

class BorderedCell: UICollectionViewCell{

var backgroundShape: CAShapeLayer!
var backPath: UIBezierPath!
var foregroundShape: CAShapeLayer!
var forgroundPath: UIBezierPath!




override func layoutSubviews() {
    super.layoutSubviews()

    backgroundShape = CAShapeLayer.init()
    backPath = drawCurvedShape(with: 0)
    backgroundShape.path = backPath.cgPath
    backgroundShape.fillColor = UIColor(red:0.76, green:0.86, blue:0.86, alpha:1.0).cgColor
    self.layer.addSublayer(backgroundShape)

    foregroundShape = CAShapeLayer()
    forgroundPath = drawCurvedShape(with: -8)
    foregroundShape.path = forgroundPath.cgPath
    foregroundShape.fillColor = UIColor.white.cgColor
    self.layer.addSublayer(foregroundShape)
}


func drawCurvedShape(with startingY: CGFloat) -> UIBezierPath{
    let path = UIBezierPath.init()
    path.move(to: CGPoint.init(x: 0, y: startingY))
    path.addLine(to: CGPoint.init(x: self.bounds.width, y: startingY))
    path.addLine(to: CGPoint.init(x: self.bounds.width, y: self.bounds.height + startingY - 30))
    path.addQuadCurve(to: CGPoint.init(x: self.bounds.width - 30, y: self.bounds.height + startingY), controlPoint: CGPoint.init(x: self.bounds.width, y: self.bounds.height + startingY))
    path.addLine(to: CGPoint.init(x: 0, y: self.bounds.height + startingY))
    path.addLine(to: CGPoint.init(x: 0, y: startingY))
    path.close()

    return path
}
}

Output:

I did not make the drawShape exactly to the shape you require, just to something that would serve the purpose.