Gradient Color over Template Image in Swift 4

Question

I am trying to make a chat app in my application using swift 4.

I want the chat bubble to appear with gradient color That I set programatically.

I Achieved That by a solid color by rendering the image as template as the following:

    let TestImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
    let TestImage = ChatBubble
    let TestImage2 = TestImage.resizableImage(withCapInsets: TestInsets, resizingMode: .stretch).withRenderingMode(UIImageRenderingMode.alwaysTemplate)
    TestImageView.image = TestImage2
    TestImageView.tintColor = UIColor.red

How to do it?

Update: I made it by Mr.Matt solution but I went through some troubles in sizing. This is my Final Code after Making it inside a class:

class UIChatBubbleView: UIView {

override func draw(_ rect: CGRect) {
    let ChatBubbleView = UIImageView(frame: rect)
    let BubbleInsets = UIEdgeInsets(top: 100, left: 200, bottom: 240, right: 240)
    let BubbleImage = #imageLiteral(resourceName: "ChatBubble").resizableImage(withCapInsets: BubbleInsets, resizingMode: .stretch)
    ChatBubbleView.image = BubbleImage
    let MyView = UIView(frame: ChatBubbleView.bounds)
    MyView.layer.contents = ChatBubbleView.image?.cgImage
    let GradientLayer = CAGradientLayer()
    GradientLayer.frame = ChatBubbleView.bounds
    GradientLayer.colors = [UIColor.red.cgColor,UIColor.blue.cgColor]
    GradientLayer.mask = ChatBubbleView.layer

    MyView.layer.addSublayer(GradientLayer)
    MyView.layer.shadowColor = UIColor.black.cgColor
    MyView.layer.shadowOffset = CGSize(width: 3.0, height: 3.0)
    MyView.layer.shadowOpacity = 0.5
    MyView.layer.shadowRadius = 3
    self.addSubview(MyView)
}

override init(frame:CGRect) {
    super.init(frame:frame)
    self.isOpaque = false
}
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

}

The final result appeared like this:

I want the gradient bubble size to be exactly as the black one.

(See for example my answer here: https://stackoverflow.com/a/23202718/341994) — matt, Nov 05 '17 at 17:15
By the chat bubble shape. (Exactly as, in the linked answer, the gradient is masked by the bezier path shape.) — matt, Nov 05 '17 at 18:31
Sorry, But the chat bubble is a PNG Image. how to make a shape from it? — FamousMaxy, Nov 05 '17 at 18:33
Stack Overflow is not a "give me the codez" site. You write the code. We help. Besides, I linked you to an answer that shows actual code. — matt, Nov 05 '17 at 18:44

score 0 · Accepted Answer · answered Nov 05 '17 at 18:46

0

Draw the gradient (a CAGradientLayer is the easiest way). Then use your bubble shape to mask the gradient.

For example, here's a sample bubble shape:

Here's that shape masking a red-to-orange gradient:

Now you can put your text inside the bubble (as a label, a CATextLayer, or whatever is convenient).

answered Nov 05 '17 at 18:46

matt

515,959
87
875
1,141

Ok Thanks, I will search for the code of how to convert an Image to mask that can applied as a CAShapeLayer to the CAGradientLayer. Thanks for the tip. – FamousMaxy Nov 05 '17 at 19:04
There's nothing to convert. All I did was use the bubble shape image in an image view as the mask for the view containing the gradient layer. – matt Nov 05 '17 at 19:35
Thanks a lot, What made me confuse here is to try to make a CAShapeLayer from the provided image as your answer in the linked post. But now I figured out that I Must Create a Mask by a CALayer and make its contents the bubbleImage.cgimage and then masking the gradient layer and add it only to the sublayer of the chatbubble not also the Mask layer your post. However I was very far from making it without your help. Thanks Again. – FamousMaxy Nov 05 '17 at 19:47
1

No problem, although what I did was even simpler than that. :) Because, as I said, a view itself can have a `mask` which is another view. So I used a UIImageView holding the bubble as the view `mask`. – matt Nov 05 '17 at 19:52
Tried that now and worked as a charm, and it is better than the old solution because it preserve the content scaling of the original UIImageView. – FamousMaxy Nov 06 '17 at 13:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158334/discussion-between-famousmaxy-and-matt). – FamousMaxy Nov 06 '17 at 15:54
@Tometoyou I've given examples of how to mask a gradient so many times... https://stackoverflow.com/questions/23202228/how-to-fill-a-uibezierpath-with-a-gradient/23202718#23202718 and https://stackoverflow.com/questions/42035746/core-graphics-angle-gradient-for-gauge/42036390#42036390 and https://stackoverflow.com/questions/53934686/ios-circular-gradient/53935318#53935318, I could go on and on. – matt Jan 08 '19 at 18:18

Gradient Color over Template Image in Swift 4

1 Answers1

Linked