使用jsqmessegesviewcontroller创建自定义气泡

Question

我正在使用JSQMessagesViewController pod。

我想创建如下的自定义气泡。忽略蓝色边框。

我能够创建像图像一样的形状。但是无法添加渐变效果。

如何使用核心图形添加此类渐变？

Answer 1

向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)

    }
}

现在，您可以通过调用此方法向特定的UIView添加渐变：

yourBubbleView.fillGradiant()

扩展UIColor以添加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
        )
    }
}