StyleLabel: a UILabel with style
As iOS development is evolving (or maturing) designers are getting more demanding, trying to match the complexity of their designs to what they do for the web. Though this is fine with static designs, it usually becomes a problem with text which in most cases needs to be dynamic. On one hand that’s fine since new OS versions enabled enhancements like easy integration of new non-standard fonts and soft shadow on CALayers. On the other hand some features like gradient text do not come out-of-the-box yet for us.
StyleLabel is one approach in overcoming some of the headaches designers might give you. StyleLabel (which at the moment should be called VerticalGradientLabel really) draws text with a vertical gradient of the colors specified. It also optionally adds a stroke around the text and a soft shadow with all parameters easily customizable through it’s few properties.
The result looks like this without the stroke. The way the gradient is set, the UILabel doesn’t lose any of it’s properties so it can still render unicode text (an issue with some other approaches out there) etc.
gradient uilabel with shadow
As usual the full code for this is on GitHub in the same repository as DoubleSlider, DialController etc.
Please note that this class is far from being finished. As usual contributions and feedback are welcome.
i’m trying to use this class, but on simulator it’s working fine, on device not. Your Example project too (iphone 4 4.3.3)
Jul 12 22:37:06 example[99] : CGContextDrawLinearGradient: invalid context 0×0
2011-07-12 22:37:06.134 example[99:707] *** Assertion failure in -[StyleLabel setTextColor:], /SourceCache/UIKit/UIKit-1448.89/UILabel.m:314
2011-07-12 22:37:06.151 example[99:707] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘Invalid parameter not satisfying: color’
Problem found:
- (UIImage *)gradientImageWithColors:(NSArray *)gradientColors size:(CGSize)size
{
CGFloat width = size.width; // max 1024 due to Core Graphics limitations
CGFloat height = size.height; // max 1024 due to Core Graphics limitations
… width and height is always 0.0000
Hey Dimitris,
thanks for the post. Since I needed support for multi-line UILabels and UITextField, I had to extend your code a bit but it made things much easier to have it as a starting point. Just did a post on what modifications I did at http://blog.athenstean.com/post/22047566786/stylish-uitextfield-uilabel-with-gradients-and-drop …
Bests
Alex
Hi Alex,
I’m glad you found it helpful. Feel free to share the update on GitHub where many people watching/forking/etc would find it useful: https://github.com/doukasd/iOS-Components
Cheers,
Dimitris