objective-c ios auto layout NSLayoutConstraint

Question

UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(8, 8, frameWidth, frameHeight)];
    headerView.backgroundColor = UIColorFromRGB(0x5F70B9);
    
    UIImage* leftImage = [UIImage imageNamed: @"search_list"];
    UIImageView* leftImageView = [[UIImageView alloc] initWithImage: leftImage];
    [leftImageView setFrame: CGRectMake(10, 15, 70, 50)]; // CGRectMake(10, 15, 70, 50)

    UITextView* textView = [[UITextView alloc] initWithFrame:CGRectMake(80, 20, 160, 40)];
    textView.backgroundColor = UIColorFromRGB(0x5F70B9);
    textView.textColor = UIColorFromRGB(0xFFFFFF);
    [textView setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleTitle3]];
    textView.text = STLocalizedString(@"message_overall_non_reply");
    textView.editable = NO;
    
    UIImage* rightImage = [UIImage imageNamed: @"arrow_mask"];
    UIImageView* rightImageView = [[UIImageView alloc] initWithImage: rightImage];
    [rightImageView setFrame:CGRectMake(380, 30, 15, 20)];
    
    [headerView addSubview: leftImageView];
    [headerView addSubview: textView];
    [headerView addSubview: rightImageView];

Expect image: enter image description here

Now i am hardcoding the origin x, y and everything. I want to use auto layout so that the left image and right image act as leading and trailing icon.

any suggestion?

Tried something like below, but not working: `

[leftImageView setTranslatesAutoresizingMaskIntoConstraints:NO];

NSLayoutConstraint *leftImageViewConstraint = [NSLayoutConstraint constraintWithItem: leftImage attribute: NSLayoutAttributeLeading relatedBy: NSLayoutRelationEqual toItem: headerView attribute: NSLayoutAttributeLeading multiplier: 1 constant: 0];

[leftImageView addConstraints: @[leftImageViewConstraint]];

`

Answer 1

You need to activate each constraint that you add. When you have a bunch of constraints to set it's a lot easier to use NSLayoutConstraint activateConstraints. And using the various "anchor" properties for setting up the constraints is simpler than using the long form of creating an NSLayoutConstraint.

Here's your code updated with lots of constraints:

UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(8, 8, frameWidth, frameHeight)];
headerView.backgroundColor = UIColorFromRGB(0x5F70B9);

UIImage* leftImage = [UIImage imageNamed: @"search_list"];
UIImageView* leftImageView = [[UIImageView alloc] initWithImage: leftImage];

UITextView* textView = [[UITextView alloc] initWithFrame:CGRectZero];
textView.backgroundColor = UIColorFromRGB(0x5F70B9);
textView.textColor = UIColorFromRGB(0xFFFFFF);
textView.font = [UIFont preferredFontForTextStyle:UIFontTextStyleTitle3];
textView.text = STLocalizedString(@"message_overall_non_reply");
textView.editable = NO;

UIImage* rightImage = [UIImage imageNamed: @"arrow_mask"];
UIImageView* rightImageView = [[UIImageView alloc] initWithImage: rightImage];

leftImageView.translatesAutoresizingMaskIntoConstraints = NO;
textView.translatesAutoresizingMaskIntoConstraints = NO;
rightImageView.translatesAutoresizingMaskIntoConstraints = NO;

[headerView addSubview: leftImageView];
[headerView addSubview: textView];
[headerView addSubview: rightImageView];

[NSLayoutConstraint activateConstraints:@[
    [leftImageView.leadingAnchor constraintEqualToAnchor:headerView.leadingAnchor constant:10],
    //[leftImageView.topAnchor constraintEqualToAnchor:headerView.topAnchor constant:15],
    [leftImageView.centerYAnchor constraintEqualToAnchor:headerView.centerYAnchor],
    [leftImageView.widthAnchor constraintEqualToConstant:70],
    [leftImageView.heightAnchor constraintEqualToConstant:50],
    [rightImageView.trailingAnchor constraintEqualToAnchor:headerView.trailingAnchor constant:-10],
    //[rightImageView.topAnchor constraintEqualToAnchor:headerView.topAnchor constant:30],
    [rightImageView.centerYAnchor constraintEqualToAnchor:headerView.centerYAnchor],
    [rightImageView.widthAnchor constraintEqualToConstant:15],
    [rightImageView.heightAnchor constraintEqualToConstant:20],
    [textView.leadingAnchor constraintEqualToAnchor:leftImageView.trailingAnchor constant:10],
    [textView.trailingAnchor constraintEqualToAnchor:rightImageView.leadingAnchor constant:-10],
    [textView.topAnchor constraintEqualToAnchor:headerView.topAnchor constant:20],
    [textView.bottomAnchor constraintEqualToAnchor:headerView.bottomAnchor constant:-20],
]];

I made a few guesses here. Obviously you can change these to suit your needs.