Make UILabel look like CSS display: inline

Ok, here’s my problem. I have a rather large set of UIButtons that have a UIImage set as a background. Now I want to add labels inside those buttons. But the design I’m currently implementing uses “fancy” labels where the background color of the label is semi transparent and collapses around the text.

My first idea was to use a UIWebview to make that happen and it works,开发者_JS百科 but adding a lot of UIWebview’s takes a really long time for the labels to show up.

Next solution would be to use an UILabel and the performance is times better. But for the life of me, I cannot figure out, how to get the visual style to match the design.

So basically I’m looking to make an UILabel behave like an HTML element that has as CSS rule display: inline; style defined.

Is this even possible with the built-in parameters of an UILabel? If not, I’m probably going to use the UIWebView solution, but it would be of course much niftier to use the UILabel’s.

Here’s a screenshot that should explain it somewhat better

Top is how the default UILabel acts and bottom is how I want it to act.

You haven't fully described the style that your text has, but it sounds to me that you want a sort of "glow" effect. This can be done using QuartzCore for a shadow effect on the labels. Note that a single shadow normally doesn't do it, so here is an example with four labels and four shadows:

for (int i = 0; i < 4; i++) {
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 280, 30)];
    [label setBackgroundColor:[UIColor clearColor]];
    [label setTextColor:[UIColor colorWithRed:1 green:1 blue:1 alpha:1]];
    [label setText:@"This is some glowing text"];
    [[label layer] setShadowColor:[[UIColor colorWithRed:1 green:1 blue:1 alpha:1] CGColor]];
    CGSize shadowOff = CGSizeMake(0, 0);
    if (i == 0) shadowOff = CGSizeMake(3, 3);
    else if (i == 1) shadowOff = CGSizeMake(3, -3);
    else if (i == 2) shadowOff = CGSizeMake(-3, -3);
    else if (i == 3) shadowOff = CGSizeMake(-3, 3);
    [[label layer] setShadowOffset:shadowOff];
    [[label layer] setShadowOpacity:0.5];
    [[label layer] setShadowRadius:3];
    [[label layer] setMasksToBounds:NO];
    [self.view addSubview:[label autorelease]];
}

Obviously the shadow opacity, radius, etc can be modified for a different level of "glow."

From what I can understand, there are two things you need to figure out here:

1. The rendered size of the text you want to use in your UILabel. That can be computed with -[NSString sizeWithFont:]. There are a bunch of other related methods. See NSString UIKit Additions Reference.

2. The second thing you need is that your UILabel's background colour should collapse perfectly around the text. For that, you need to set a stretchable image as the background for the UILabel. See -[UIImage stretchableImageWithLeftCapWidth:topCapHeight:]. See http://idevrecipes.com/2010/12/08/stretchable-images-and-buttons/ for an example of how stretchable images work.

I’ve managed to find a solution that almost works as intended. It doesn’t collapsed around all the single lines, but it collapses the box around the text and that,s good enough for me at the moment.

Here’s the final code that does the trick for me:

UILabel *buttonTitle = [[UILabel alloc] initWithFrame:CGRectMake(4, 4, 176, 120)];
buttonTitle.text = @"Button text";
buttonTitle.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.65];
buttonTitle.textColor = [UIColor whiteColor];
buttonTitle.textAlignment = UITextAlignmentLeft;
buttonTitle.numberOfLines = 0;
buttonTitle.lineBreakMode = UILineBreakModeWordWrap;
buttonTitle.adjustsFontSizeToFitWidth = NO;
[buttonTitle sizeToFit];