Create custom bubble with jsqmessegesviewcontroller

Question

I am using JSQMessagesViewController pod.

I want to create custom bubble like below. Ignore the blue border.

I am able to create a shape like image. But not able to add gradient effect.

How can I add such gradient using core graphics?

Answer 1

Add extension to UIView

extension UIView {

    func fillGradiant() {

        let gradient = CAGradientLayer()

        gradient.frame = self.bounds
        gradient.frame.size.width = UIScreen.main.bounds.size.width;
        gradient.colors = [UIColor(hex:"3067d5").cgColor,UIColor(hex:"009bdf").cgColor] //Choose your gradiant colors
        gradient.startPoint = CGPoint.zero
        gradient.endPoint = CGPoint(x: 1, y: 0)
        self.layer.insertSublayer(gradient, at: 0)

    }
}

Now you can add a gradient to particular UIView by calling this method like this:

yourBubbleView.fillGradiant()

Extension for UIColor to add hex:

extension UIColor {
    convenience init(hex: String) {
        let scanner = Scanner(string: hex)
        scanner.scanLocation = 0
        var rgbValue: UInt64 = 0
        scanner.scanHexInt64(&rgbValue)

        let r = (rgbValue & 0xff0000) >> 16
        let g = (rgbValue & 0xff00) >> 8
        let b = rgbValue & 0xff

        self.init(
            red: CGFloat(r) / 0xff,
            green: CGFloat(g) / 0xff,
            blue: CGFloat(b) / 0xff, alpha: 1
        )
    }
}