使用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添加十六進制：

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