How to use constraints Programmatically?

Question

I am working on application which will work only horizontally and doing everything programmatically.

I am having a imageview, two textfield and two buttons but I don't know how to set constraints on these textfields and buttons, means when I am using in iPhone 5s then it is fine but when I am using iPhone 6s plus then it looks small. I am posting here some code and screenshots

UIImageView *logoImage = [[UIImageView alloc]init];
    logoImage.frame = CGRectMake(CGRectGetMidX(self.view.frame)-100, 10, 250, 100);
    [logoImage setImage:[UIImage imageNamed:@"antya_logo1.png"]];

    [self.view addSubview:logoImage];

    UILabel *loginLabel = [[UILabel alloc]init];
    loginLabel.frame = CGRectMake(10, 0, 100, 40);
    loginLabel.text = @"Login Form";
    loginLabel.textColor = [UIColor blackColor];
    loginLabel.font = [UIFont fontWithName:@"LaoSangamMN" size:18];


    CGFloat Xuser = CGRectGetMidX(self.view.frame)-120;
    CGFloat Yuser = CGRectGetMaxY(loginLabel.frame)+80;

    usernameField = [[UITextField alloc]init];
    usernameField.frame = CGRectMake(Xuser, Yuser, 300, 35);
    usernameField.placeholder = @"  User Name";
    usernameField.font = [UIFont fontWithName:@"LaoSangamMN" size:18];
    usernameField.backgroundColor = [UIColor whiteColor];
    usernameField.layer.cornerRadius = 7;
    usernameField.layer.borderWidth = 0.5;

    [self.view addSubview:usernameField];

    UIImageView *userImgV = [[UIImageView alloc]init];
    userImgV.frame = CGRectMake(CGRectGetMinX(usernameField.frame)-35, CGRectGetMinY(usernameField.frame)+5, 25, 25);
    [userImgV setImage:[UIImage imageNamed:@"user-icon.png"]];

    [self.view addSubview:userImgV];

    CGFloat Ypass = CGRectGetMaxY(usernameField.frame)+20;

    passwordField = [[UITextField alloc]init];
    passwordField.frame = CGRectMake(Xuser, Ypass, 300, 35);
    passwordField.placeholder = @"  Password";
    passwordField.secureTextEntry = YES;
    passwordField.font = [UIFont fontWithName:@"LaoSangamMN" size:18];
    passwordField.backgroundColor = [UIColor whiteColor];
    passwordField.layer.cornerRadius = 7;
    passwordField.layer.borderWidth = 0.5;


    [self.view addSubview:passwordField];

this is in i phone 6s plus

and this is in i phone5s

Please help me,thanks in advance

did you set any constraints ??? if not than first try something ... — Bhavin Bhadani, Mar 31 '16 at 07:02
You need to switch your code from using specific sizes to using constraints. Look into view anchors, they are the easiest to use. Then when you get stuck come back and ask some more specific questions. Finally, doing everything programmatically is a good way to learn how things work. But using a xib or story board will save you a lot of code and effort. Especially given how simple this layout is. — drekka, Mar 31 '16 at 07:04
no i have not used any constraint, i dont know how to use programmatically therefore i am asking here , i am making this application only horizontally — , Mar 31 '16 at 07:04
there are plenty of tutorials that can help you... come back when you have a more specific question about autolayouts — Fonix, Mar 31 '16 at 07:10
@AayushKatiyar agree with Fonix, if you want to use constraints programatically I suggest understanding VFL here is a good start point: http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/ — Joshua, Mar 31 '16 at 07:15

score 1 · Accepted Answer · answered Mar 31 '16 at 07:37

Note : When you are dealing with autolayout setting frame of a view is not going to work. You need to set constraints for that view to look correctly in all iPhone devices.

UIImageView *logoImage = [[UIImageView alloc] init];
[logoImage setImage:[UIImage imageNamed:@"antya_logo1.png"]];
logoImage.translatesAutoresizingMaskIntoConstraints = false;

[self.view addSubview:logoImage];

UILabel *loginLabel = [[UILabel alloc]init];
loginLabel.text = @"Login Form";
loginLabel.textColor = [UIColor blackColor];
loginLabel.font = [UIFont fontWithName:@"LaoSangamMN" size:18];
loginLabel.translatesAutoresizingMaskIntoConstraints = false;

[self.view addSubview:loginLabel];

UITextField *usernameField = [[UITextField alloc]init];
usernameField.placeholder = @"  User Name";
usernameField.font = [UIFont fontWithName:@"LaoSangamMN" size:18];
usernameField.backgroundColor = [UIColor whiteColor];
usernameField.layer.cornerRadius = 7;
usernameField.layer.borderWidth = 0.5;
usernameField.translatesAutoresizingMaskIntoConstraints = false;

UIImageView *userImgV = [[UIImageView alloc]init];
[userImgV setImage:[UIImage imageNamed:@"user-icon.png"]];

//set left view of textfield
usernameField.leftView = userImgV;
usernameField.leftViewMode = UITextFieldViewModeAlways;
[self.view addSubview:usernameField];


UITextField *passwordField = [[UITextField alloc]init];
passwordField.placeholder = @"  Password";
passwordField.secureTextEntry = YES;
passwordField.font = [UIFont fontWithName:@"LaoSangamMN" size:18];
passwordField.backgroundColor = [UIColor whiteColor];
passwordField.layer.cornerRadius = 7;
passwordField.layer.borderWidth = 0.5;
passwordField.translatesAutoresizingMaskIntoConstraints = false;

//set left view of textfield

UIImageView *passwordImgV = [[UIImageView alloc]init];
[passwordImgV setImage:[UIImage imageNamed:@"password-icon.png"]];

passwordField.leftView = passwordImgV;
passwordField.leftViewMode = UITextFieldViewModeAlways;
[self.view addSubview:passwordField];


UIButton *buttonSignUp = [UIButton buttonWithType:UIButtonTypeCustom];
[buttonSignUp setTag:101];
[buttonSignUp setTitle:@"SIGNUP" forState:UIControlStateNormal];
[buttonSignUp addTarget:self action:@selector(<your selector>) forControlEvents:UIControlEventTouchUpInside];
buttonSignUp.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:buttonSignUp];

UIButton *buttonFP = [UIButton buttonWithType:UIButtonTypeCustom];
[buttonFP setTag:101];
[buttonFP setTitle:@"SIGNUP" forState:UIControlStateNormal];
[buttonFP addTarget:self action:@selector(<your selector>) forControlEvents:UIControlEventTouchUpInside];
buttonFP.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:buttonFP];

//setting constraints

//logoImage
//leading
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:logoImage attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:10]];

//Top
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:logoImage attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];

//traling
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:logoImage attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:10]];


// usernameField
//leading
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:usernameField attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:10]];

//traling
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:usernameField attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:10]];

//top
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:logoImage attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:usernameField attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];

//passwordField
//leading
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:passwordField attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:10]];

//traling
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:passwordField attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:10]];

//top
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:passwordField attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:passwordField attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];


//buttonSignUp and buttonFP

//leading for buttonSignUp
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:buttonSignUp attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:10]];

//traling for buttonFP
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:buttonFP attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:10]];

//equal width for both
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:buttonFP attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:buttonSignUp attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];

//space between both btns
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:buttonFP attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:buttonSignUp attribute:NSLayoutAttributeRight multiplier:1.0 constant:10]];

//top for both
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:buttonSignUp attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:passwordField attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:buttonFP attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:passwordField attribute:NSLayoutAttributeTop multiplier:1.0 constant:10]];

//bottom
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:buttonFP attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:buttonSignUp attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10]];

Thank you very much @MGP great work..... – Mar 31 '16 at 08:55 — , Mar 31 '16 at 08:55

score 0 · Answer 2 · edited May 23 '17 at 11:58

After adding @IBOutlet each of items on ViewController. You can use Auto Layout Visual Format Language to implement programmatically constraints. Here's sample code to understand from my project.

(Swift Version) If cell awakeFromNib or or page you can use in viewDidLoad:

    avaImg.translatesAutoresizingMaskIntoConstraints = false
    usernameBtn.translatesAutoresizingMaskIntoConstraints = false
    infoLbl.translatesAutoresizingMaskIntoConstraints = false
    dateLbl.translatesAutoresizingMaskIntoConstraints = false

    self.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-10-[ava(30)]-10-[username]-7-[info]-10-[date]",
        options: [], metrics: nil, views: ["ava":avaImg, "username":usernameBtn, "info":infoLbl, "date":dateLbl]))

    self.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-10-[ava(30)]-10-|",
        options: [], metrics: nil, views: ["ava":avaImg]))

    self.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-10-[username(30)]",
        options: [], metrics: nil, views: ["username":usernameBtn]))

    self.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-10-[info(30)]"
        , options: [], metrics: nil, views: ["info":infoLbl]))

    self.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-10-[date(30)]",
        options: [], metrics: nil, views: ["date":dateLbl]))

Additional link cited before Using Autolayout Visual Format with Swift?

(Objective-C Version) You can find here many details to do same.

How to use constraints Programmatically?

2 Answers2

Linked