Search code examples
iosobjective-cuilabelnslayoutconstraint

How to set UILabel only width and height and constraints programmatically


I want to create a UILabel programmatically with height, width and then I want to add constraints to it also programmatically for positioning the UILabel.

Update:

I want to create UI like this:

enter image description here

How to create this UI All programatically

Code to create one label label1 similarly I created two more label label2 and label3

UILabel *label1 = [[UILabel alloc]init];

label1.font = TitleFont;
label1.numberOfLines=0;
label1.text= @"Descriptions";
label1.lineBreakMode=NSLineBreakByWordWrapping;
[label1 sizeToFit];
label1.backgroundColor=[UIColor blueColor];
label1.textColor=[UIColor blackColor];
label1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:label1];

And now I am able to add horizontal constraints them with this code

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[label1]-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:NSDictionaryOfVariableBindings(label1)]];

I am also able to set vertical constraint with view but I am unable to set constraint with from one label to another.


Solution

  • To create label with height and width constraints here is the constraints...And don't forget to add label in to view with addSubview method

    UILabel *Label = [[UILabel alloc] init];
    [Label setTranslatesAutoresizingMaskIntoConstraints:NO];  
    
    [self.view addSubview:Label];
    
    // Width constraint
    [Label addConstraint:[NSLayoutConstraint constraintWithItem:Label
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute: NSLayoutAttributeNotAnAttribute
                                                         multiplier:1
                                                           constant:200]];
    
    // Height constraint
    [Label addConstraint:[NSLayoutConstraint constraintWithItem:Label
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute: NSLayoutAttributeNotAnAttribute
                                                         multiplier:1
                                                           constant:21]];
    

    Swift 4:

    label.translatesAutoresizingMaskIntoConstraints = false
    label.addConstraint(NSLayoutConstraint(item: label, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 21))
    label.addConstraint(NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200))
    

    And In Swift

     Label.setTranslatesAutoresizingMaskIntoConstraints(false)
     self.view.addSubview(Label)
    
     Label.addConstraint(NSLayoutConstraint(item: Label, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 21))
     Label.addConstraint(NSLayoutConstraint(item: Label, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 200))  
    

    Check this link for more detail

    UPDATE
    As you update your question, here is my updated answer...

    UILabel *Label1 = [[UILabel alloc] init];
    [Label1 setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILabel *Label2 = [[UILabel alloc] init];
    [Label2 setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    Label1.text = @"Label1";
    Label1.backgroundColor = [UIColor blueColor];
    Label2.text = @"Label2";
    Label2.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:Label1];
    [self.view addSubview:Label2];
    
    // Width constraint
    [Label1 addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:nil
                                                      attribute: NSLayoutAttributeNotAnAttribute
                                                     multiplier:1
                                                       constant:280]];
    
    // Height constraint
    [Label1 addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:nil
                                                      attribute: NSLayoutAttributeNotAnAttribute
                                                     multiplier:1
                                                       constant:21]];
    
    // CenterX constraint
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view
                                                       attribute:NSLayoutAttributeCenterX
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:Label1
                                                       attribute: NSLayoutAttributeCenterX
                                                      multiplier:1
                                                        constant:0]];
    // Top constraint
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.topLayoutGuide
                                                          attribute: NSLayoutAttributeBottom
                                                         multiplier:1
                                                           constant:40]];
    
    
    // label2
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                          attribute:NSLayoutAttributeLeading
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:Label2
                                                          attribute: NSLayoutAttributeLeading
                                                         multiplier:1
                                                           constant:0]];
    // label2.Height = label1.Height
    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:Label2
                                                          attribute: NSLayoutAttributeHeight
                                                         multiplier:1
                                                           constant:0]];
    // label2.width = label1.width
    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:Label1
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:Label2
                                                       attribute: NSLayoutAttributeWidth
                                                      multiplier:1
                                                        constant:0]];
    
    // label2.Top
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:Label2
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:Label1
                                                          attribute: NSLayoutAttributeBottom
                                                         multiplier:1
                                                           constant:34]];  
    

    Result Screen

    enter image description here