iOS - Draw gradient - Swift

Question

I'm trying to draw a gradient to UILabel, but it draws only the colors I can't see the text. I saw the code from here StackOverflow

my modification:

extension String{
    func gradient(x:CGFloat,y:CGFloat, fontSize:CGFloat)->UIImage{
        let font:UIFont = UIFont.systemFontOfSize(fontSize)
        let name:String = NSFontAttributeName
        let textSize: CGSize = self.sizeWithAttributes([name:font])
        let width:CGFloat = textSize.width         // max 1024 due to Core Graphics limitations
        let height:CGFloat = textSize.height       // max 1024 due to Core Graphics limitations
        UIGraphicsBeginImageContext(CGSizeMake(width, height))
        let context = UIGraphicsGetCurrentContext()
        UIGraphicsPushContext(context!)
        //draw gradient
        let glossGradient:CGGradientRef?
        let rgbColorspace:CGColorSpaceRef?
        let num_locations:size_t = 2
        let locations:[CGFloat] = [ 0.0, 1.0 ]
        let components:[CGFloat] = [(202 / 255.0), (197 / 255.0), (52 / 255.0), 1.0,  // Start color
            (253 / 255.0), (248 / 255.0), (101 / 255.0), 1.0] // End color
        rgbColorspace = CGColorSpaceCreateDeviceRGB()
        glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations)
        let topCenter = CGPointMake(0, 0);
        let bottomCenter = CGPointMake(0, textSize.height);
        CGContextDrawLinearGradient(context, glossGradient, topCenter, bottomCenter, CGGradientDrawingOptions.DrawsBeforeStartLocation)
        UIGraphicsPopContext()
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return  gradientImage
    }
}

and the setup of the imageView

    self.timeLeftIV = UIImageView(frame: CGRectMake(self.pyramidFakeView.frame.origin.x/2-25,0, 100,20))
    self.timeLeftIV.image = "59:48".gradient(timeLeftIV.frame.origin.x, y: timeLeftIV.frame.origin.y, fontSize: 6.0)

the result of the code:

beyowulf · Accepted Answer · 2017-04-18T16:05:11.693

There is an easier way of getting a gradient as a UIImage. You can use a CAGradientLayer. For example:

func yellowGradientImage(bounds:CGRect) -> UIImage
{
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [UIColor(red: (202 / 255.0), green: (197 / 255.0), blue: (52 / 255.0), alpha: 1.0).CGColor, UIColor(red: (253 / 255.0), green: (248 / 255.0), blue: (101 / 255.0), alpha: 1.0).CGColor]
    gradientLayer.bounds = bounds
    UIGraphicsBeginImageContextWithOptions(gradientLayer.bounds.size, true, 0.0)
    let context = UIGraphicsGetCurrentContext()
    gradientLayer.renderInContext(context!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

To apply the gradient to text you next need to use the image returned as the textColor using UIColor(patternImage: ...). For example:

let label = UILabel()
label.font = UIFont.systemFontOfSize(150.0)
label.text = "HELLO WORLD"
label.sizeToFit()

let image = yellowGradientImage(label.bounds)
label.textColor = UIColor(patternImage: image)

Which results in:

swift 3.0:

func yellowGradientImage(bounds:CGRect) -> UIImage
{
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [UIColor(red: (202 / 255.0), green: (197 / 255.0), blue: (52 / 255.0), alpha: 1.0).cgColor, UIColor(red: (253 / 255.0), green: (248 / 255.0), blue: (101 / 255.0), alpha: 1.0).cgColor]
    gradientLayer.bounds = bounds
    UIGraphicsBeginImageContextWithOptions(gradientLayer.bounds.size, true, 0.0)
    let context = UIGraphicsGetCurrentContext()
    gradientLayer.render(in: context!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}

let label = UILabel()
label.font = UIFont.systemFont(ofSize: 150.0)
label.text = "HELLO WORLD"
label.sizeToFit()

let image = yellowGradientImage(bounds: label.bounds)
label.textColor = UIColor(patternImage: image)

:- It appears like this when i tested in playground. https://drive.google.com/open?id=0B62pT4Le2is4UkhSTGlLQUhBWXM — Vivek Sehrawat, Apr 19 '17 at 06:23
@VivekSehrawat That's a regression in Xcode 8.3. `import PlaygroundSupport` and set the label as the `liveView` of the playground page and it shows up for me. — beyowulf, Apr 19 '17 at 14:41

score 1 · Answer 2 · answered Jul 26 '16 at 14:24

add a view, modify draw rect with below code.

override func drawRect(rect: CGRect) {
        // Drawing code

        let currentContext = UIGraphicsGetCurrentContext()

        CGContextSaveGState(currentContext);
        let colorSpace = CGColorSpaceCreateDeviceRGB()

        let startColor = UIColor(red: 0.1, green: 0.0, blue: 0.0, alpha: 0.0)
        let startColorComponents = CGColorGetComponents(startColor.CGColor)
        let middleColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.2)
        let middleColorComponents = CGColorGetComponents(middleColor.CGColor)
        let lowerMiddleColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
        let lowerMiddleColorComponents = CGColorGetComponents(lowerMiddleColor.CGColor)
        let endColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
        let endColorComponents = CGColorGetComponents(endColor.CGColor)

        var colorComponents = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], middleColorComponents[0], middleColorComponents[1], middleColorComponents[2], middleColorComponents[3], lowerMiddleColorComponents[0], lowerMiddleColorComponents[1], lowerMiddleColorComponents[2], lowerMiddleColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
        var locations:[CGFloat] = [0.0, 0.6, 0.8, 1.0]
        let gradient = CGGradientCreateWithColorComponents(colorSpace,&colorComponents,&locations,4)
        let startPoint = CGPointMake(0, 0)
        let endPoint = CGPointMake(0, self.bounds.height)
        CGContextAddRect(currentContext, CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height));
        CGContextClip(currentContext);
        CGContextDrawLinearGradient(currentContext,gradient,startPoint,endPoint, CGGradientDrawingOptions.DrawsBeforeStartLocation)
        CGContextRestoreGState(currentContext)
    }

Now in storyboard add a view change class to your gradient class and add a label to this view.

See if it works for you.

I don't know how to import that code drawrect to my image view to receive the image. Can you be more specific ? — Bogdan Bogdanov, Jul 26 '16 at 14:30
Add a new class which is subclass of UIView. And just copy the code that I sent you — Kuntal Gajjar, Jul 26 '16 at 14:33
I do this without success: class timeLeftView: UILabel{ your code} and I set the class of the label to be timeLeftView... — Bogdan Bogdanov, Jul 26 '16 at 14:42
No you don't need to change class of label. You need to add a uiview and need to change a class of UIVIew and than add a label to that view. — Kuntal Gajjar, Jul 26 '16 at 14:59
Can't do it sorry it's too hard or you don't explain good, I'm going to accept the answer of @beyowolf — Bogdan Bogdanov, Jul 26 '16 at 15:07

iOS - Draw gradient - Swift

2 Answers2

Linked

Related