CODEWITHSUNDEEP
iphoneiosbackgrounduilabellayer
Aleks G
Aleks G

Reputation: 57316

Two-color background for UILabel

I got a requirements to display a UILabel with background split between two colors, like in this image:

enter image description here

(colors here are black at the bottom and 50% gray at the top - but this is not important). I tried setting the label's background colour to 50% grey in the interface builder and then do this in the code:

CALayer *sl1 = [[[CALayer alloc] init] autorelease];
sl1.frame = CGRectMake(0, lbl.frame.size.height / 2, lbl.frame.size.width, score1.frame.size.height/2);
sl1.backgroundColor = [[UIColor blackColor] CGColor];
[lbl.layer insertSublayer:sl1 atIndex:0];

Unfortunately, this resulted in the black part being drawn over the text, so the label looks like this:

enter image description here

which is, needless to say, is not something I need. So how can I get this background without turning to custom images? The issue is I need to have UILabel's like this in several places, different sizes - so I would need to create multiple versions of the background image.

Any ideas? Thanks.

Upvotes: 1

Views: 2703

Answers (3)

meronix
meronix

Reputation: 6176

this works:

UILabel* myLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
myLabel.text = @"Ciao";
myLabel.textColor = [UIColor greenColor];

UIGraphicsBeginImageContext(CGSizeMake(100, 50));   
CGContextRef context = UIGraphicsGetCurrentContext();
// drawing with a gray fill color
CGContextSetRGBFillColor(context,  0.4, 0.4, 0.4, 1.0);
// Add Filled Rectangle, 
CGContextFillRect(context, CGRectMake(0.0, 0.0, 100, 50));

// drawing with a black fill color
CGContextSetRGBFillColor(context,  0., 0., 0., .9);
// Add Filled Rectangle, 
CGContextFillRect(context, CGRectMake(0.0, 25, 100, 25));

UIImage* resultingImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

myLabel.backgroundColor = [UIColor colorWithPatternImage:resultingImage];
[self.view addSubview:myLabel];

Upvotes: 2

The iOSDev
The iOSDev

Reputation: 5267

first you have to subclass the UILabel and override it's drawRect: method like this for gradient background

- (void)drawRect:(CGRect)rect 
{
    //////////////GET REFERENCE TO CURRENT GRAPHICS CONTEXT
    CGContextRef context = UIGraphicsGetCurrentContext();

    //////////////CREATE BASE SHAPE WITH ROUNDED CORNERS FROM BOUNDS
CGRect activeBounds = self.bounds;
CGFloat cornerRadius = 10.0f;   
CGFloat inset = 6.5f;   
CGFloat originX = activeBounds.origin.x + inset;
CGFloat originY = activeBounds.origin.y + inset;
CGFloat width = activeBounds.size.width - (inset*2.0f);
CGFloat height = activeBounds.size.height - (inset*2.0f);

CGRect bPathFrame = CGRectMake(originX, originY, width, height);
CGPathRef path = [UIBezierPath bezierPathWithRoundedRect:bPathFrame cornerRadius:cornerRadius].CGPath;

//////////////CREATE BASE SHAPE WITH FILL AND SHADOW
CGContextAddPath(context, path);
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:210.0f/255.0f green:210.0f/255.0f blue:210.0f/255.0f alpha:1.0f].CGColor);
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 1.0f), 6.0f, [UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:1.0f].CGColor);
CGContextDrawPath(context, kCGPathFill);

//////////////CLIP STATE
CGContextSaveGState(context); //Save Context State Before Clipping To "path"
CGContextAddPath(context, path);
CGContextClip(context);

//////////////DRAW GRADIENT
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
size_t count = 3;
CGFloat locations[3] = {0.0f, 0.57f, 1.0f}; 
CGFloat components[12] = 
{   0.0f/255.0f, 0.0f/255.0f, 0.0f/255.0f, 1.0f,     //1
    5.0f/255.0f, 5.0f/255.0f, 5.0f/255.0f, 1.0f,     //2
    10.0f/255.0f, 10.0f/255.0f, 10.0f/255.0f, 1.0f};    //3
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, count);

CGPoint startPoint = CGPointMake(activeBounds.size.width * 0.5f, 0.0f);
CGPoint endPoint = CGPointMake(activeBounds.size.width * 0.5f, activeBounds.size.height);

CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGColorSpaceRelease(colorSpace);
CGGradientRelease(gradient);
}

This will draw black to white gradient background May this will help you Happy Codding :) the above code is from this site http://mobile.tutsplus.com/tutorials/iphone/ios-sdk-uialertview-custom-graphics/

Upvotes: 0

Richard Stelling
Richard Stelling

Reputation: 25665

Use UIColor's +colorWithPatternImage:. Pass in a 1px by the UILabel's height image and it will be "tiled" across the the width of the view.

myLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"label-background.png"]];

Upvotes: 1

Related Questions