Search code examples
iosswiftuikitchatimessage

How can I implement the iMessage gradient in Swift iOS?

What I'm trying to Achieve

I am trying to implement the gradient bubble effect in Swift iOS, where the chat bubbles towards the top are a lighter color and the chat bubbles towards the bottom are a darker color, and when you scroll a bubble you see the gradient change.

The link below is an example of the iMessage gradient effect.

An example image of the iMessage gradients

What I've Tried

  1. I created a view and added a gradient layer:
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)
gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPink.cgColor]
gradient.frame = UIScreen.main.bounds

view.layer.addSublayer(gradient)
view.backgroundColor = .yellow
  1. I created a view and used it as a mask
mask.backgroundColor = .yellow
mask.alpha = 1
mask.frame.size = CGSize(width: 100, height: 100)
mask.center = view.center
view.mask = mask

The result is like this Gif below:

Example of my progress using a Mask View

I was originally hoping to add a gradient to a UICollectionView and have the UICollectionViewCells mask the gradient to achieve the above iMessage gradient effect, but then I realized I can only apply one mask to a UIView (not multiple), so I'm stuck on using this approach.

Other Ideas My other ideas were to apply a gradient to each UICollectionViewCell and determine the gradient offset of each UICollectionViewCell manually based on the location of the cell, however, my main concern is this is not going to have good performance.

Please Help I was hoping to see if anyone could outline a general method or link to how to achieve the iMessage gradient background effect?

I understand this is a more general question and often times general questions are "bad" questions for stack overflow, but I'm really stuck on this problem and would incredibly appreciate any help or advice for achieving this effect!

Thank you for your time!

Solution Figured Out

Wow, this is sketchy/hacky to implement. Below is a GitHub Gist of how its done.

https://gist.github.com/josharnoldjosh/e04d41f10de6ab378da931ab11370d11

The way it works is you set a background to the gradient, then, you mask each individual cell, "cutting out" a hole in the cell to be transparent. The rest of the cell must be white to simulate the background being white.

Solution

  • There are multiple parts to this. First, you need to set up a gradient that is top-to-bottom. Your current gradient goes from the top right to the bottom left.

    Change these 2 lines:

    gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)

    To

    gradient.startPoint = CGPoint(x: 0.5, y: 0)
gradient.endPoint = CGPoint(x: 0.5, y: 1)

    Next is the issue of how to make the view take on the gradient color tied to the screen, as you scroll the table view/collection view. That is not easy, and I'm not sure how you'd do that. I would probably have to attach code to the table view/collection view's UIScrollViewDelegate and implement the scrollViewDidScroll(_:) method, figure out the change in scroll view offset, and shift the gradient layer to match the scroll offset.