How to arrange dynamically created UILabels inside UIView?

Question

I am dynamically creating UILabels from an array using a for loop.

Each UILabel has a different length. When I created the UILabels, they are overlapping one another.

I want to arrange those UILabels properly inside the UIView without any overlapping. Any help?

Answer 1

You can do it using sizeToFit and numberOfLines=0

 int y=0;
    for (int k=0; k<[array count]; k++)
    {
        UILabel *lb=[[UILabel alloc]initWithFrame:CGRectMake(5 , y, 100,60)];

        lb.textAlignment=UITextAlignmentLeft;
        lb.text=[array objejectAtIndex:k];
        lb.numberOfLines=0;
        [lb sizeToFit];
        [self.view addSubview:lb];
        y+=lb.frame.size.height;


    }

Answer 2

You can find how it works here: arrange labels sources link

1. Download sources using appropriate button on site
2. Open ArrangeLabels project
3. Open ViewController.m file
4. Check -createElements -fitElements methods from the sources.

If you want you can view sources here immediately in your browser: link to code

Answer 3

  Try to implement this logic:


    -(void)adjustLabel1Text1:(NSString *)text1 
    {
        UILabel *lbl_first = [UIFont fontWithName:@"Helvetica" size:12];



        text1 = [text1 stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];


        float hedingLblHeight = [self calculateHeightOfTextFromWidth:text1 : [UIFont fontWithName:@"Helvetica" size:12] :118 :UILineBreakModeWordWrap];

        lbl_first.text=text1;


        [lbl_first setFrame:CGRectMake(lbl_first.frame.origin.x, lbl_first.frame.origin.y, 118, hedingLblHeight)];
        lbl_first.lineBreakMode = UILineBreakModeWordWrap;
        lbl_first.numberOfLines = 0;
        [lbl_first sizeToFit];




    //////////Adjust the lable or any UIControl below this label accordingly.

        float endResultHeight=[self calculateHeightOfTextFromWidth:text2 : [UIFont fontWithName:@"Helvetica" size:15] :299 :UILineBreakModeWordWrap];

        if(hedingLblHeight>secondImgTitleHeight)
        {
        [lbl_endResult setFrame:CGRectMake(lbl_endResult.frame.origin.x, lbl_first.frame.origin.y+lbl_first.frame.size.height+5, 299, endResultHeight)];
        }
        else
        {
            [lbl_endResult setFrame:CGRectMake(lbl_endResult.frame.origin.x, lbl_first.frame.origin.y+lbl_first.frame.size.height+5, 299, endResultHeight)];

        }

        lbl_endResult.lineBreakMode=UILineBreakModeWordWrap;
        lbl_endResult.numberOfLines = 0;
        [lbl_endResult sizeToFit];



    }

    -(float) calculateHeightOfTextFromWidth:(NSString*)text : (UIFont*) withFont:(float)width :(UILineBreakMode)lineBreakMode
    {

        CGSize suggestedSize = [text sizeWithFont:withFont constrainedToSize:CGSizeMake(width, FLT_MAX) lineBreakMode:lineBreakMode];

        return suggestedSize.height;
    }

It has helped me a lot.Hope it works for you.

Answer 4

You need to change y coordinate of your label like this

UILabel *hiLbl = [[UILabel alloc] initWithFrame:CGRectMake(0,10,50,20)];
hiLbl.text = @"Hi";
[self.view addSubview:hiLbl];

UILabel *hellolbl = [[UILabel alloc] initWithFrame:CGRectMake(0,30,50,20)];
hellolbl.text = @"Hi";
[self.view addSubview:hellolbl];

or

UILabel *lbl;

for(int i = 1 ; i < 3 ; i++)
{
     lbl = [[UILabel alloc] initWithFrame:CGRectMake(0,i*10+10,50,20)];
     [self.view addSubview:lbl];
     lbl.text = i;
}

Answer 5

Without any screenshot it is difficult to guess what type of overlapping you are referring to. And length of UILabel does not help, either specify- width or height.

But if you are talking about width of UILabel, then this piece of code may help you.

Lets you have three labels of different widths, which are in an array of widths array:{ 10, 20, 30}.

float width = [array objectAtIndex:0];
float x = 0.of;
float padding = 10.0f;
for(int i =0; i<3; i++){
 UILabel *label = [UILabel alloc]initWithFrame:CGRectMake(x, y, width, height)];
 [self.view addSubview: label];
 x = x + width + paddng;
 width =  [array objectAtIndex:i + 1];
}