how do i fix this error when i try and set the color of a border to a gradient color

Question

I have created a messaging app and I want to set the border colour as a gradient instead of just a solid colour.

So far when I run my code this is what is see:

The gradient colour is supposed to be a border colour for each message cell

I don't know what is making it look the way it does this is how I coded it :

I've created an extension to deal with the gradient and it looks like this:

extension UIView {
     func gradientButton( startColor:UIColor, endColor:UIColor) {

        let view:UIView = UIView(frame: self.bounds)

        let gradient = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = self.bounds
        self.layer.insertSublayer(gradient, at: 0)
        self.mask = view

        view.layer.borderWidth = 2
    
}

}

and when I set the gradient I set it like this in my chatController class

class ChatController: UICollectionViewController, UICollectionViewDelegateFlowLayout, ChatCellSettingsDelegate {

    func configureMessage(cell: ChatCell, message: Message) {
        cell.bubbleView.gradientButton(startColor: blue, endColor: green)
    }

The bubbleView holds the text which is a textView of the message which is created in my ChatCell class:

class ChatCell: UICollectionViewCell {
    
    let bubbleView: UIView = {
    let bubble = UIView()
    bubble.backgroundColor = UIColor.rgb(red: 0, green: 171, blue: 154, alpha: 1)
    bubble.translatesAutoresizingMaskIntoConstraints = false
    bubble.layer.masksToBounds = true
    bubble.layer.cornerRadius = 13
    bubble.backgroundColor = .white
    return bubble
}()

let textView: UITextView = {
    let text = UITextView()
    text.text = "test"
    text.font = UIFont.systemFont(ofSize: 16)
    text.backgroundColor = .clear
    text.translatesAutoresizingMaskIntoConstraints = false
    text.isEditable = false
    return text
}()


}

how do I fix this? any help would be helpful thank you

I can set the border colour to a solid colour with the following line:

cell.bubbleView.layer.borderColor = UIColor.rgb(red: 91, green: 184, blue: 153, alpha: 0.8).cgColor

and then it would look like this:

Answer 1

You can create your own bordered view and use it in your custom cell:

import UIKit
import PlaygroundSupport
public class GradientBorder: UIView {
    var startColor:   UIColor = .black
    var endColor:     UIColor = .white
    var startLocation: Double = 0.05
    var endLocation:   Double = 0.95
    var path: UIBezierPath!
    let shape = CAShapeLayer()
    var lineWidth: CGFloat = 5
    override public class var layerClass: AnyClass { CAGradientLayer.self }
    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
    func update() {
        gradientLayer.startPoint = .init(x: 0.0, y: 0.5)
        gradientLayer.endPoint   = .init(x: 1.0, y: 0.5)
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        path = .init(roundedRect: bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2), byRoundingCorners: [.topLeft, .bottomLeft, .topRight, .bottomRight], cornerRadii: CGSize(width: frame.size.height / 2, height: frame.size.height / 2))
        shape.lineWidth = lineWidth
        shape.path = path.cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradientLayer.mask = shape
    }
    override public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        update()
    }
}

---

Playground testing:

let gradientBorderedView = GradientBorder()
gradientBorderedView.frame = .init(origin: .zero, size: .init(width: 200, height: 40))
let view = UIView()
view.frame = .init(origin: .zero, size: .init(width: 375, height: 812))
view.backgroundColor = .blue
view.addSubview(gradientBorderedView)
PlaygroundPage.current.liveView = view