Gradients on UIView and UILabels On iPhone [duplicate]

K

7

221

Possible Duplicate:
Manually drawing a gradient in iPhone apps?

My application needs to display text in either a UIView or UILabel but the back ground must be a gradient as opposed to a true UIColor. Using a graphics program to create desired look is no good as the text may vary depending on data returned from a server.

Does anyone know the quickest way to tackle this? Your thoughts are greatly appreciated.

Kp answered 7/1, 2009 at 20:58 Comment(0)

F

45

You could also use a graphic image one pixel wide as the gradient, and set the view property to expand the graphic to fill the view (assuming you are thinking of a simple linear gradient and not some kind of radial graphic).

Fredericksburg answered 8/1, 2009 at 0:59 Comment(8)

Hey Kendall, thanks man you triggered a duh switch for me. Solved it simply by placing a gradient into the UIImageView and place the dynamic label on top of that. Thanks to all for your help. Tony – Kp 8/1, 2009 at 11:20

With this approach, make sure to have two different gradients: one for regular displays and one for retina displays. – Regionalism 4/10, 2011 at 2:39

One important benefit of this solution, over the coded solutions, is that color gradients are normally a decoration property, and really shouldn't be expressed in code at all. This is what graphics guys are for. Writing code to express colors is a poor separation of logic from presentation. When the marketing team decides to change the colors, and a graphics guy asks how to do that, he's not going to like being told that you just adjust the color array on the CAGradientLayer in MyLabelView.m ... and nor should he. Doesn't matter much for a one person shop, but for teams it does. – Juliannajulianne 16/6, 2012 at 10:5

I agree with Nate on that, it can be good to let designers change assets as easily as possible. – Fredericksburg 16/6, 2012 at 21:5

@Juliannajulianne - Your code for your logic should be separate from your code for your presentation. That doesn't mean your only possible solution is to have a graphics file, and quite frankly, for each bitmap in your application, you're setting yourself up for more work in the future. Gradient code will always look great. Your bitmap will only look good until Apple decides to increase the resolution of the screen again. – Histolysis 30/12, 2012 at 3:48

Think of using a UIImageView for gradients as the ultimate way to separate logic from presentation. It is more work but the main thing to consider is it's work for the people who directly need the most control over it. It's not more coding work and that's important too. – Fredericksburg 30/12, 2012 at 4:29

Ditto for views with dynamic heights, like a cell whose height depends on how much text it has to hold. – Stela 24/1, 2013 at 5:4

Why would you be changing 50 xib files if you just have one gradient image that you change out? In theory it would be just as easy as changing code. The place I see using code for gradients is when you need to dynamically create the gradient for some reason. – Fredericksburg 11/10, 2013 at 20:24

H

780

I realize this is an older thread, but for future reference:

As of iPhone SDK 3.0, custom gradients can be implemented very easily, without subclassing or images, by using the new CAGradientLayer:

 UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

Take a look at the CAGradientLayer docs. You can optionally specify start and end points (in case you don't want a linear gradient that goes straight from the top to the bottom), or even specific locations that map to each of the colors.

Haha answered 19/12, 2009 at 0:38 Comment(25)

Just in case my comment catches anyone's eye as they consider implementing the other solutions above, DO THIS ONE. It couldn't be easier (but do remember that you'll need to add the QuartzCore framework and import #import <QuartzCore/QuartzCore.h> in your class). – Mansell 13/2, 2010 at 21:31

I like this but I'm wondering how the performance of this compares to pre-rendering an image with the gradient. I'm particularly thinking about the case of table view cells, where during scrolling there could be lots of redrawing. – Stumper 12/4, 2010 at 14:14

Good point. I only used this as a fixed background for the entire view, and didn't notice any significant overhead. Not sure how well it performs on individual table cells. Should be easy to find out, though. – Haha 14/4, 2010 at 21:26

Someone may apply additional effect e.g., cornerRadius. They must add more code here: view.layer.masksToBounds = YES; to make sure thing goes smooth. – Lanark 27/5, 2010 at 4:14

What way provides the best performance? Using CAGradientLayer or UIImageViews? – Kristine 3/10, 2010 at 3:47

My experimentation has shown that images with a fixed gradient image show better performance that using CAGradientLayer. – Featherstitch 17/11, 2010 at 21:33

Hm. My label text disappears when I use this solution. – Itinerancy 17/12, 2010 at 17:28

Hey, this is terrific - thanks! ("He wrote over a year later.") I wonder if I can use this for table view cells, in selected and unselected backgrounds? I s'pose I just insert sublayers to each of those views on the cell. Maybe. (I presume the selected state already has a gradient in play though - hmm ... !) – Ilonailonka 20/3, 2011 at 0:2

@Mike: How big are the performance differences? Do you have some specific tests / metrics to back your claim? – Magnifico 13/7, 2011 at 16:21

@Rafael A pretty big difference. I wrote an app very similar to the mail app and use a gradient filled blue ball in each cell in a table to mark when a message was unread. Scrolling the table was significantly slower than the alternative of just having a pre-made image for the ball. Try it and see. – Featherstitch 16/8, 2011 at 23:14

@Itinerancy I found that if I use a CAGradientLayer for a UILabel that I have to set the backgroundColor to [UIColor clearColor] (or equivalent) – Dyscrasia 9/9, 2011 at 4:44

I'm trying to use this for a uitableviewcell and the gradient overflows out of the right side of the cell. What am I doing wrong? – Discontinuous 22/5, 2012 at 19:32

Tip: to use the highlight (and show another gradient with highlight), subclass UIButton and use the "- (void)setHighlighted:(BOOL)highlight { if (highlight != self.highlighted){... }} " method. Then I pop a layer switching in there (from put normal layer at zero and highlight at 1). Works great. – Compose 1/6, 2012 at 18:52

I got it working, with gradients, highlighting (gradient on highlight too) rounded corners, etc. You can also download the code:banane.com/2012/06/01/iphone-gradient-buttons-with-highlighting – Compose 3/6, 2012 at 19:16

I added this to my table cell. I have have 9 rows visible at load. When I load the table via a button push on my main view, it takes a good 10 seconds for the table to push. Zero seconds without the gradient. Why such a delay? – Microdont 2/10, 2012 at 12:23

What is drawn using drawRect: still is under this gradient. Just a fun fact. – Psychokinesis 14/10, 2012 at 22:13

@Featherstitch - I wonder if you're using deque properly? Should not the drawing code only have to execute once per visible cell, and then never again if you're scrolling because it'll just reuse old cells? – Histolysis 30/12, 2012 at 4:14

You might need to link the QuartzCore lib: #7464899 Check the solution and the comment below =) – Stinger 9/1, 2013 at 23:26

fine code to apply gradient.really usefull – Amelina 27/2, 2013 at 7:31

Not working for UILabel. It is not showing gradient color in background. – Hake 13/3, 2013 at 10:8

Any idea how to make a radial gradient? – Distributor 8/1, 2014 at 14:8

This doesn't seem to work as a gradient for an all-app background. The layer doesn't auto-resize itself with the view. – Allred 21/1, 2014 at 16:7

@Allred see my answer here: https://mcmap.net/q/120500/-manually-drawing-a-gradient-in-iphone-apps – Illustrate 1/12, 2014 at 20:40

@MirkoFroehlich please check this question: #39256385 – Philter 1/9, 2016 at 3:11

one upvote for simple Answer.. Very Simple and useful, Thanks..! But how can i Acheive it for UILabel Text, not for background..... any idea...? – Nonmetallic 24/10, 2016 at 11:55

J

122

You can use Core Graphics to draw the gradient, as pointed to in Mike's response. As a more detailed example, you could create a UIView subclass to use as a background for your UILabel. In that UIView subclass, override the drawRect: method and insert code similar to the following:

- (void)drawRect:(CGRect)rect 
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

This particular example creates a white, glossy-style gradient that is drawn from the top of the UIView to its vertical center. You can set the UIView's backgroundColor to whatever you like and this gloss will be drawn on top of that color. You can also draw a radial gradient using the CGContextDrawRadialGradient function.

You just need to size this UIView appropriately and add your UILabel as a subview of it to get the effect you desire.

EDIT (4/23/2009): Per St3fan's suggestion, I have replaced the view's frame with its bounds in the code. This corrects for the case when the view's origin is not (0,0).

Jessalyn answered 7/1, 2009 at 21:39 Comment(9)

I tried this code but it is not correct. Instead of setting currentFrame to self.frame it should be set to self.bounds. – Hayse 22/4, 2009 at 20:20

You're right, thanks for pointing it out. I had since corrected my own code, but forgot that this needed updating. The case that gets you is when the origin of the view has a different Y position than 0. The gradient then gets drawn offset from the vertical center. – Jessalyn 23/4, 2009 at 12:33

Can be this applied to UIImage or UIImageView to have any image with gradient? – Hambrick 15/12, 2009 at 10:31

You can place this over a UIImageView to add a gradient. For altering the contents of an image, you might need to draw the image first to a context, draw the gradient above it in that context, and then save the context as a new image. – Jessalyn 18/12, 2009 at 23:6

Can you tell me how you determine the colors when using the following: CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35, 1.0, 1.0, 1.0, 0.06 }; How do you know what 1.0 and 0.35 are for example? – Sateen 7/3, 2011 at 3:41

@Fulvio - Those are two colors, represented by two sets of the red, green, blue, and alpha components. These components are normalized to 1.0, so that opaque black would be (0.0, 0.0, 0.0, 1.0) and opaque white would be (1.0, 1.0, 1.0, 1.0). – Jessalyn 7/3, 2011 at 14:11

How do you call this method and/or apply it to a UIImageView? – Microdont 28/9, 2012 at 23:5

Not possible for UIImageView - it doesn't call drawRect. – Psychokinesis 30/11, 2012 at 13:38

Don't forget to add the device scale: CGRect currentBounds = (CGRect) { 0, 0, self.bounds.size.width * [UIScreen mainScreen].scale, self.bounds.size.height * [UIScreen mainScreen].scale, }; – Basir 9/4, 2014 at 12:46

T

73

Note: The results below apply to older versions of iOS, but when testing on iOS 13 the stepping doesn't occur. I don't know for which version of iOS the stepping was removed.

When using CAGradientLayer, as opposed to CGGradient, the gradient is not smooth, but has noticeable stepping to it. See this example :

To get more attractive results it is better to use CGGradient.

Topdrawer answered 13/1, 2011 at 3:18 Comment(8)

Would you mind posting code equivalent to Mirko Froehlich's example with CGGradient? – Bizarre 13/1, 2011 at 17:9

Brad Larson's code above using CGGradient is good enough. I would have made my comment a comment on one of those answers, but I don't have enough points yet. – Topdrawer 14/1, 2011 at 4:52

How can you tell? Your gradients end (at the bottom) with different colors. – Monitorial 16/2, 2012 at 15:42

@MattDiPasquale I don't have the code I used to generate this on hand, but as I recall the end points used the same colors. In any case I doubt it matters since my point is about the quality of the gradient. In any case you should be able to reproduce the results yourself. (I was using iOS 4.x at the time, so results could be different with iOS 5.) – Topdrawer 17/2, 2012 at 2:7

IMPORTANT: I deleted my CGGradient code recently and replaced it with CAGradientLayer. You know why? I was drawing it on like 30 Cells, and the performance impact was BIG. CAGradient was much better performance-wise (Explains the tiny quality difference). – Pharyngoscope 29/5, 2012 at 18:9

If the height of the view you want to add gradient is small, CAGradientLayer is compromise you can afford, I guess. If the view height is significant, better use a CGGradient. As such, its highly unlikely that you will put a view of larger height in a scroll view. – Halima 13/2, 2013 at 13:41

To Mazyod's comment, if you find yourself generating the same gradient (or any other drawing operation) many times in the same way and that affects performance, consider doing it just once, caching the result into an UIImage and using that repeatedly. Works great for multi-layer drawings too. – Brinna 5/6, 2013 at 14:8

Updated my answer. In my initial tests this problem doesn't occur on iOS 13. – Topdrawer 3/5, 2020 at 12:37