使 UILabel 看起来像 CSS display: inline

Posted 2023-03-13

【中文标题】使 UILabel 看起来像 CSS display: inline

【英文标题】：Make UILabel look like CSS display: inline

【发布时间】：2011-08-20 22:17:06

【问题描述】：

好的，这是我的问题。我有一组相当大的 UIButtons，它们将 UIImage 设置为背景。现在我想在这些按钮中添加标签。但我目前正在实施的设计使用“花哨”标签，其中标签的背景颜色是半透明的，并且会在文本周围折叠。

我的第一个想法是使用 UIWebview 来实现这一点并且它可以工作，但是添加大量 UIWebview 需要很长时间才能显示标签。

下一个解决方案是使用 UILabel，性能会好几倍。但是对于我的生活，我无法弄清楚如何让视觉风格与设计相匹配。

所以基本上我想让 UILabel 表现得像一个 html 元素，它具有 CSS 规则 display: inline;样式已定义。

这甚至可以通过 UILabel 的内置参数实现吗？如果没有，我可能会使用 UIWebView 解决方案，但使用 UILabel 的解决方案当然会更好。

这是一个截图，应该可以更好地解释它

顶部是默认 UILabel 的行为方式，底部是我希望它的行为方式。

【参考方案1】：

您还没有完全描述您的文本所具有的风格，但在我看来，您想要一种“发光”效果。这可以使用 QuartzCore 在标签上产生阴影效果来完成。请注意，单个阴影通常不会这样做，因此这里有一个带有四个标签和四个阴影的示例：

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

显然，阴影不透明度、半径等可以修改为不同级别的“发光”。

【讨论】：

我试过了，也许我做错了什么，但这并不是我真正想要的，但感谢您的努力，如果我需要，我现在有一个解决方案来创建外发光一。

【参考方案2】：

据我所知，这里有两点你需要弄清楚：

要在 UILabel 中使用的文本的渲染大小。这可以用-[NSString sizeWithFont:] 计算。还有很多其他相关的方法。请参阅 NSString UIKit 添加参考。

您需要做的第二件事是 UILabel 的背景颜色应该完美地折叠在文本周围。为此，您需要将可拉伸图像设置为 UILabel 的背景。见-[UIImage stretchableImageWithLeftCapWidth:topCapHeight:]。请参阅http://idevrecipes.com/2010/12/08/stretchable-images-and-buttons/ 了解可拉伸图像如何工作的示例。

【参考方案3】：

我设法找到了一个几乎按预期工作的解决方案。它不会围绕所有单行折叠，但它会折叠文本周围的框，这对我来说已经足够了。

这是对我有用的最终代码：

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