iOS Square Radial Gradient

Question

How to create a radial gradient in a square shape?

Follow this link, may be it will help you : https://stackoverflow.com/questions/31853859/radial-gradient-background-in-swift — Sagar Chauhan, Feb 08 '18 at 10:56
Yeah, this image makes it look like a shadow, but I'd like to control the number & spacing of colours, which I don't believe you can do in a shadow — SomaMan, Feb 08 '18 at 11:06
On Stack Overflow, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)** within the question itself — Rob, Feb 08 '18 at 18:41
I think I know how to ask questions on SO - I attempted to solve this problem, but my efforts were completely useless & probably not even going in the right direction - as the question originally said, I don't even know where to start. There is nothing I can find in the frameworks which can get me started - it would be more helpful to everyone to leave the question open in the hope that someone might have an idea of how to solve it. — SomaMan, Feb 09 '18 at 13:23

score 1 · Answer 1 · answered Feb 08 '18 at 11:02

1

You can draw a radial gradient directly in a UIView subclass like this:

override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()!
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let colors = [UIColor.red.cgColor, UIColor.green.cgColor] as NSArray
    let gradient = CGGradient(colorsSpace: colorSpace, colors: colors, locations: nil)!
    let center = CGPoint(x: bounds.midX, y: bounds.midY)
    context.drawRadialGradient(gradient, startCenter: center, startRadius: 0, endCenter: center, endRadius: bounds.width/2, options: [.drawsAfterEndLocation])
}

Or simply check out this lib to draw any gradient you want out of the box - https://github.com/maxkonovalov/MKGradientView

answered Feb 08 '18 at 11:02

maxkonovalov

3,651
34
36

Unfortunately this is circular, doesn't seem to be any way of making it square – SomaMan Feb 08 '18 at 11:05
@SomaMan, yes the code produces radial gradient, seems like what you are after is a different kind of gradient altogether. You can try looking into the sources of the lib I provided - it should be quite possible to achieve the desired effect by utilising the approach for generating gradients from there. – maxkonovalov Feb 08 '18 at 14:43

score 0 · Answer 2 · answered Feb 08 '18 at 11:08

I can suggest you 2 ways.

First:

You can make 2 UIViews one inside the other with constraints to the inside UIView so that it is in the center and smaller than the other. Then you add background color to the inside UIView yellow and for the other UIView you can use this library https://github.com/ViccAlexander/Chameleon and make a UIGradientStyleRadial color with yellow and back.

Second: You can use https://www.paintcodeapp.com/ which will be also lighter for your app

iOS Square Radial Gradient

2 Answers2