Positioning UIButtons at top of Screen - ios

Question

What I want is to have 5 buttons equally spaced out at the top of the screen. I tried using constraints but the buttons would get squished.
I have this code so far:
- (void)viewDidLoad {
[super viewDidLoad];
//I know this is only two buttons
NSUInteger space = (_backround.frame.size.width - _squareOne.frame.size.width * 5) / 6;
CGRect newFrameOne;
newFrameOne = CGRectMake(space, 50, 55, 55);
CGRect newFrameTwo;
newFrameTwo = CGRectMake(space * 2 + _squareOne.frame.size.width, 50, 55, 55);
_squareOne.frame = newFrameOne;
_squareTwo.frame = newFrameTwo;
}
The buttons never show up... and I don't know any other ways to do this...
Any help?

Answer 1

Could you try something like this below?
Update: I've written the code properly using Xcode this time (previously I typed it from memory).
See below screenshot for the final result.
View Controller Header File
#interface ViewController : UIViewController
#property (nonatomic, strong) UIButton *btn1;
#property (nonatomic, strong) UIButton *btn2;
#property (nonatomic, strong) UIButton *btn3;
#property (nonatomic, strong) UIButton *btn4;
#property (nonatomic, strong) UIButton *btn5;
#end
View Controller Implementation File
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initViews];
[self initConstraints];
}
-(void)initViews
{
self.btn1 = [[UIButton alloc] init];
self.btn1.backgroundColor = [UIColor grayColor];
self.btn2 = [[UIButton alloc] init];
self.btn2.backgroundColor = [UIColor grayColor];
self.btn3 = [[UIButton alloc] init];
self.btn3.backgroundColor = [UIColor grayColor];
self.btn4 = [[UIButton alloc] init];
self.btn4.backgroundColor = [UIColor grayColor];
self.btn5 = [[UIButton alloc] init];
self.btn5.backgroundColor = [UIColor grayColor];
[self.view addSubview:self.btn1];
[self.view addSubview:self.btn2];
[self.view addSubview:self.btn3];
[self.view addSubview:self.btn4];
[self.view addSubview:self.btn5];
}
-(void)initConstraints
{
self.btn1.translatesAutoresizingMaskIntoConstraints = NO;
self.btn2.translatesAutoresizingMaskIntoConstraints = NO;
self.btn3.translatesAutoresizingMaskIntoConstraints = NO;
self.btn4.translatesAutoresizingMaskIntoConstraints = NO;
self.btn5.translatesAutoresizingMaskIntoConstraints = NO;
id views = #{
#"btn1": self.btn1,
#"btn2": self.btn2,
#"btn3": self.btn3,
#"btn4": self.btn4,
#"btn5": self.btn5
};
// horizontal constraints
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[btn1]-5-[btn2(==btn1)]-5-[btn3(==btn1)]-5-[btn4(==btn1)]-5-[btn5(==btn1)]-5-|" options:0 metrics:nil views:views]];
// vertical constraints
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.btn1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:5.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.btn2 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.btn1 attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.btn3 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.btn1 attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.btn4 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.btn1 attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.btn5 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.btn1 attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];
}
Result
This is what I get.
What long black strip are you referring to, the battery indicator?