Dynamically adding multiline label in a view

debugcn Published at Dev

s.d.

I am dynamically creating UILabel in my app to display a list of directions for a recipe. The labels populate correctly displaying all the items one after another.

The problem is when the text goes on next line of the label, it is overlapped with the next label.

I have set numberOfLines to 0 and also set lineBreakMode to NSLineBreakByWordWrapping. This helps the label to display text on multiple lines.

I have tried to adjust the height of the label, as you will see in the code, but it doesn't work.

How do I prevent the overlapping of labels due to multiline text in label?

Here is the code for populating the labels with multilines:

//add all the directions to the uiview
    for (int i = 0; i < self.recipe.directions.count; i++)
    {
        UILabel *label =  [[UILabel alloc] initWithFrame: CGRectMake(0,(i+1)*25,280,25)];
        label.lineBreakMode = NSLineBreakByWordWrapping; //multiple lines in a label
        label.numberOfLines = 0;
        label.text =[NSString stringWithFormat: @"%@", self.recipe.directions[i]];
        [label sizeToFit]; // resize the width and height to fit the text
        NSLog(@"Actual height is: %f", label.frame.size.height); // Use this for spacing any further elements


        CGSize expectedLabelSize = [label.text sizeWithFont:label.font
                                            constrainedToSize:label.frame.size
                                                lineBreakMode:NSLineBreakByWordWrapping];
        //adjust the label the the new height.
        CGRect newFrame = label.frame;
        newFrame.size.height = expectedLabelSize.height;
        label.frame = newFrame;
        [self.directionsView addSubview:label];

    }

lucaslt89

Instead of initialising your label with an y position of (i+1)*25, you should store your last label's bottom position

CGFloat lastLabelBottomCoordinate = 25;
CGFloat spaceBetweenLines = 10;
for (int i = 0; i < 10; i++)
{
    UILabel *label =  [[UILabel alloc] initWithFrame: CGRectMake(0, lastLabelBottomCoordinate + spaceBetweenLines,280,25)];
    label.lineBreakMode = NSLineBreakByWordWrapping; //multiple lines in a label
    label.numberOfLines = 0;
    label.text =[NSString stringWithFormat: @"This is a very long text to see if the text have more than 2 lines"];
    [label sizeToFit]; // resize the width and height to fit the text
    NSLog(@"Actual height is: %f", label.frame.size.height); // Use this for spacing any further elements


    CGSize expectedLabelSize = [label.text boundingRectWithSize:CGSizeMake(label.frame.size.width, MAXFLOAT)
                                                        options:NSStringDrawingUsesLineFragmentOrigin
                                                     attributes:@{NSFontAttributeName : label.font}
                                                        context:nil].size;
    //adjust the label the the new height.
    CGRect newFrame = label.frame;
    newFrame.size.height = expectedLabelSize.height;
    label.frame = newFrame;

    lastLabelBottomCoordinate = label.frame.origin.y + label.frame.size.height;
    [self.view addSubview:label];

}

This is how it looks: