Centre the button in view use constraints programmatically in iOS 8

Question

I have a subview and added 1 button. I want to add this button in the center of that view. I use Autolayout so i need to set the constraints for this button programmatically.

I tried this code but the play button is not in the center.

[self.moviePlayer.view addSubview:self.playbtn];


 self.playbtn.translatesAutoresizingMaskIntoConstraints = NO;

[self.moviePlayer.view addConstraint:[NSLayoutConstraint constraintWithItem:self.playbtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual
                                           toItem:self.moviePlayer.view attribute:NSLayoutAttributeCenterX multiplier:0.667 constant:0]];

Please help me to correct it. Thanks in advance.

score 15 · Accepted Answer · answered Oct 20 '14 at 05:34

You can use the NSLayoutAttributeCenterX and NSLayoutAttributeCenterY attributes to center your play button like this:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self initViews];
    [self initConstraints];
}

-(void)initViews
{
    self.picture = [[UIImageView alloc] init];
    self.picture.image = [UIImage imageNamed:@"bg"];

    self.playButton = [[UIButton alloc] init];
    [self.playButton setImage:[UIImage imageNamed:@"playButton"] forState:UIControlStateNormal];

    [self.view addSubview:self.picture];
    [self.view addSubview:self.playButton];
}

-(void)initConstraints
{
    self.picture.translatesAutoresizingMaskIntoConstraints = NO;
    self.playButton.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"picture": self.picture,
                 @"playButton": self.playButton
                 };

    // picture constraints
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[picture]|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[picture]|" options:0 metrics:nil views:views]];


    // play button constraints

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.playButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.playButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];
}

You get something like this:

demo screenshot

Darkseal · Answer 2 · 2018-11-02T13:56:19.340

You can use this code to center any item (es. self.btn) in its superview:

[self.btn.superview addConstraint:[NSLayoutConstraint
    constraintWithItem:self.btn.superview
    attribute:NSLayoutAttributeCenterX
    relatedBy:NSLayoutRelationEqual
    toItem:self.btn
    attribute:NSLayoutAttributeCenterX
    multiplier:1.0
    constant:0.0]];
[self.btn.superview addConstraint:[NSLayoutConstraint
    constraintWithItem:self.btn.superview
    attribute:NSLayoutAttributeCenterY
    relatedBy:NSLayoutRelationEqual
    toItem:self.btn
    attribute:NSLayoutAttributeCenterY
    multiplier:1.0
    constant:0.0]];

I also wrote an article about aligning any UIView objects without using Storyboards on my blog.

Centre the button in view use constraints programmatically in iOS 8

2 Answers2