ios - 如何根据 iOS 中的内容更改 UILabel 高度

Question

我遇到了动态标签高度的问题。我的要求如下图所示:

我正在使用 UIScrollView 并在 UIScrollView 上添加 UILabel 以显示内容。我的内容是不同类型的文字大小。如果我设置 1 个内容，它会变得完美，但如果我在一个数组中获取内容，那么它会像下图一样出现:

有 6 个不同大小的文本内容。我实现了这种类型:

UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 42, SCREEN_WIDTH, SCREEN_HEIGHT - 152)];
[scroll setBackgroundColor:[UIColor clearColor]];
[scroll setContentOffset:CGPointMake(0, 0)];
[scroll setShowsHorizontalScrollIndicator:NO];
[scroll setShowsVerticalScrollIndicator:NO];
[self.view addSubview:scroll];

contentArr = [[NSArray alloc] initWithObjects:@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla",@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ",@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu",@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla",@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et ", nil];


float x_pos = 5;
float y_pos = 5;

for (int i = 0; i < contentArr.count; i ++)
{
    NSString *text1 = [contentArr objectAtIndex:i];
    CGSize constraint1 = CGSizeMake(152.5, 2000);
    CGSize size1 = [text1 sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:constraint1 lineBreakMode:NSLineBreakByWordWrapping];

    NSLog(@"size1.height == %f",size1.height);

    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(x_pos,y_pos,152.5,size1.height)];
    bgView.backgroundColor = APP_BGCOLOR;
    [scroll addSubview:bgView];

    [bgView.layer setBorderColor:[[UIColor colorWithRed:(170.0 / 255.0) green:(170.0 / 255.0) blue:(170.0 / 255.0) alpha:0.5] CGColor]];
    [bgView.layer setBorderWidth:1.0f];
    bgView.layer.cornerRadius = 4.0;
    bgView.layer.masksToBounds = YES;

    UILabel *lblComment = [[UILabel alloc] initWithFrame:CGRectMake(7,20,bgView.frame.size.width -14,bgView.frame.size.height - 20)] ;
    [lblComment setLineBreakMode:NSLineBreakByWordWrapping];
    lblComment.numberOfLines = size1.height/15;
    [lblComment setFont:[UIFont systemFontOfSize:10]];
    lblComment.text = text1;
    lblComment.backgroundColor = [UIColor clearColor];
    lblComment.tag = 1;
    [lblComment setNeedsDisplay];
    [bgView addSubview:lblComment];

    x_pos = x_pos + 157.5;

    if (x_pos > 300)
    {
        x_pos = 5;
        y_pos = y_pos + size1.height + 10;
    }

    [scroll setContentSize:CGSizeMake(SCREEN_WIDTH, y_pos)];
}

如果我只获取 1 个内容并在 For 循环之前为动态文本高度编写代码，那么它会像第二个图像一样出现。

我正在遵循这段代码:

NSString *text1 = @"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

CGSize constraint1 = CGSizeMake(152.5, 2000);
CGSize size1 = [text1 sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:constraint1 lineBreakMode:NSLineBreakByWordWrapping];

如何解决这个问题？

如果有任何想法，请建议我......

Answer 1

有一些方法可以做到这一点:

#1 计算 textSize 然后设置为标签:

- (CGSize)calculateSizeWithNSString:(NSString *)str {
  CGSize constraint1 = CGSizeMake(LABEL_WIDTH, FLT_MAX);
  UIFont *font = [UIFont systemFontOfSize:12];
  NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
  paragraph.lineBreakMode = NSLineBreakByWordWrapping;

  NSDictionary *attributesDictionary = [NSDictionary
      dictionaryWithObjectsAndKeys:font, NSFontAttributeName, paragraph,
                                   NSParagraphStyleAttributeName, nil];
  if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f) {
  CGRect rect = [str boundingRectWithSize:constraint1
                             options:(NSStringDrawingUsesLineFragmentOrigin |
                                      NSStringDrawingUsesFontLeading)
                          attributes:attributesDictionary
                             context:nil];
    constraint1 = rect.size;
  } else {
        //sizeWithFont:constrainedToSize:lineBreakMode: was deprecated from iOS7.0
        constraint1 = [str sizeWithFont:font
                      constrainedToSize:constraint1
                          lineBreakMode:NSLineBreakByWordWrapping];
      }
      return constraint1;
    }

#2 将文本设置为标签，然后使用 sizeThatFit: 方法计算真实大小限制:

- (void)changeLabelSize:(UILabel *)label {
  CGRect labelFrame = label.frame;
  CGSize constraint1 = CGSizeMake(LABEL_WIDTH, FLT_MAX);
  CGSize expectSize = [label sizeThatFits:constraint1];
  labelFrame.size = expectSize;
  label.frame = labelFrame;
}

在这种情况下，我认为 sizeThatFits: 比 [label sizeToFit] 更好，因为您想提供其中一个维度(列宽)作为参数: (非常感谢 Jef 纠正我)

参见 apple doc

#EDIT:使用方法 2:

//.....
 // remove this line you dont need it any more
 CGSize size1 = [text1 sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:constraint1 lineBreakMode:NSLineBreakByWordWrapping];
//...
[lblComment setFont:[UIFont systemFontOfSize:10]];
    lblComment.text = text1;
[self changeLabelSize:lblComment];
CGSize size1 = lblComment.frame.size; //for your calculate x_pos, y_pos code
[bgView addSubview:lblComment];
//....

编辑 2:x_pos、y_pos 计算

我有一个计算 x_pos, y_pos 的想法

    float col1_y_pos = 5;
    float col2_y_pos = 5;
    for (int i = 0; i < contentArr.count; i ++)
    {
        BOOL isColumn1 = (i%2 == 0)
        float x_pos = isColumn1 ? 5 : column2_x_pos_value;
        float y_pos = isColumn1 ? col1_y_pos: col2_y_pos;
        //your code set label frame with x_pos, y_pos
        //....
        CGSize size1 = lblComment.frame.size; 
        [bgView addSubview:lblComment];
        if (isColumn1) { 
           col1_y_pos += size1.height + marginTop;
        } else {
          col2_y_pos += size1.height + marginTop;
        }
   //....