Двухцветный фон для UILabel

У меня есть требования отображать UILabel с фоном, разделенным между двумя цветами, как на этом изображении:

введите здесь описание изображения

(цвета здесь черный внизу и 50% серый вверху - но это не важно). Я попытался установить цвет фона метки на 50% серого в построителе интерфейса, а затем сделать это в коде:

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];

К сожалению, это привело к тому, что черная часть была нарисована поверх текста, поэтому метка выглядит так:

введите здесь описание изображения

что, само собой разумеется, не то, что мне нужно. Итак, как я могу получить этот фон, не обращаясь к пользовательским изображениям? Проблема в том, что мне нужно иметь такие UILabel в нескольких местах, разных размеров, поэтому мне нужно будет создать несколько версий фонового изображения.

Любые идеи? Спасибо.


ios iphone background uilabel layer
person Aleks G    schedule 28.05.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

это работает:

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];
person meronix    schedule 28.05.2012
comment
Да, кажется, это работает. Спасибо. Жалко столько лишнего кода для такого, казалось бы, небольшого функционала. - person Aleks G; 28.05.2012
comment
ну, конечно, вы также можете использовать внешний файл png для фона с меньшим количеством кода... - person meronix; 28.05.2012
comment
Я мог бы, однако у меня есть около дюжины таких меток в разных местах приложения, все они имеют разную высоту и разные цветовые сочетания, поэтому мне нужно было бы иметь дюжину этих фоновых изображений. А затем, когда клиент меняет свое мнение о фактических цветах (что происходит примерно в 95% случаев, по крайней мере, один или два раза), мне придется переделывать фоновые изображения... - person Aleks G; 28.05.2012

arrow_upward
1
arrow_downward

Используйте +colorWithPatternImage: UIColor. Передайте 1 пиксель по высоте изображения UILabel, и оно будет «плиточным» по ширине представления.

myLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"label-background.png"]];
person Richard Stelling    schedule 28.05.2012
comment
Это была моя первоначальная мысль, однако у меня есть около дюжины таких меток в разных местах приложения, все они имеют разную высоту и разные цветовые комбинации, поэтому мне нужно было бы иметь дюжину этих фоновых изображений. И затем, когда клиент меняет свое мнение о фактических цветах (что происходит примерно в 95% случаев, по крайней мере, один или два раза), мне придется переделывать фоновые изображения... - person Aleks G; 28.05.2012

arrow_upward
0
arrow_downward

сначала вам нужно создать подкласс UILabel и переопределить его метод drawRect: для градиентного фона

- (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);
}

Это нарисует градиентный фон от черного к белому. Может, это поможет вам Happy Codding :) приведенный выше код взят с этого сайта http://mobile.tutsplus.com/tutorials/iphone/ios-sdk-uialertview-custom-graphics/

person The iOSDev    schedule 28.05.2012