Fill multiple UIViews with gradient

Question

I have a cup with a liquid container, consisting of two UIViews — one for the main body of the liquid, and one for the animated wave on the surface. The liquid container is masked to a cup shape.

Is there any way I can fill both the primary liquid and wave views with one colour (preferably a gradient) to effectively merge them? Can this be done with another mask?

have you tried this: https://stackoverflow.com/questions/45987883/how-can-i-add-a-gradient-that-spans-two-views — Shubham Mishra, Dec 12 '18 at 09:38

score 0 · Answer 1 · answered Dec 14 '18 at 09:20

If I understood correctly:

your main body liquid view and the wave view are added as subviews to container view.
you have added a mask to that container view (liquidContainer)
then you have added the liquidContainer to another main view where you have the cup as subview as well

If that's the case, you could trying adding a CAGradientLayer to the layer of the container view as sublayer:

    let gradient = CAGradientLayer()

    gradient.startPoint = someStartPoint
    gradient.endPoint = someEndPoint
    gradient.frame = someFrame
    gradient.colors = someColorsArray //note that it uses CGColor if you use UIColor it won't work
    liquidContainerView.layer.addSublayer(gradient)

If I misunderstood your view hierarchy, why not try to reproduce this hierarchy in your setup and see if it works.

Fill multiple UIViews with gradient

1 Answers1