How to add constraints to items with random positions - ios

Question

I have an ios app that I add a variable number (between 2 and 10) labels to in randomly generated positions. It's all done programmatically. This is how the location of the labels is determined.
int width = self.view.frame.size.width - 200;
int height = self.view.frame.size.height - 200;
newFrame.origin.x = arc4random() % width;
newFrame.origin.y = 80 + arc4random() % (height-80);
All of the labels are added to an array, self.viewLabels, after they are created and added to the view, otherwise there's no permanent reference to them because they are created in a loop
while (numViews < (numLabels)){
CustomLabel *timer = [[CustomLabel alloc] init];;
....
It works fine, except when I turn the app to landscape view. Some of the labels disappear that were at the bottom of the portrait view. I'm looking into adding constraints programmatically, and I understand the first step is to add the elements that need to be constrained to this dictionary
NSDictionary *views = NSDictionaryOfVariableBindings(button, button2);
Since I only have reference to these labels in the array self.viewLabels, I'm trying to figure out if there's a way I can get the labels in that dictionary. I tried to use the iterator to create unique names for the labels
for (int i = 0; i < [self.viewLabels count]; i++){
CustomLabel * label[i] = self.viewLabels[i];
}
That doesn't work, and even if it did, I can't figure out how to add them to the dictionary. And even if I got them in a dictionary, how to add constraints to items that have random positions in the view?
Can you suggest a strategy I could use in this situation?
Update
If it's impossible to add constraints after I've randomly generated positions, is it possible to do something when I create the positions to ensure they will all be visible in both landscape and portrait?
Update 2- based on the first answer by #rdelmar, I've tried the code below (i.e. adding labels without frames and then adding constraints after they are added to the view). However none of the labels are appearing on screen. You can see how my code was before by the lines I've commented out. I had previously added labels in random locations...
while (numViews < (numLabels)){
CustomLabel *label = [[CustomLabel alloc] init];;
//
// label.frame = CGRectMake(0, 0, 150, 50); //removed the frame
label.text = #"blah";
// newFrame = label.frame;
// int width = self.view.frame.size.width - 200;
// int height = self.view.frame.size.height - 200;
// newFrame.origin.x = arc4random() % width;
// newFrame.origin.y = 80 + arc4random() % (height-80);
// label.frame = newFrame;
[label setFont:[UIFont systemFontOfSize:50]];
UITapGestureRecognizer *tgr = [[UITapGestureRecognizer alloc]
initWithTarget:self action:#selector(handleGesture:)];
tgr.numberOfTapsRequired = 1;
tgr.numberOfTouchesRequired = 1;
[label addGestureRecognizer:tgr];
label.userInteractionEnabled = YES;
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:label];
[self.gameClocks addObject: label];
numViews += 1;
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:label
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:label
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0]];

Answer 1

Try thinking about this in a different way -- you don't add constraints to views with randomly generated positions, you create random constraints that result in the views having random positions. So, when you create the views, you don't give them any frame. You create the label, add it to the subview, then add the constraints. If you want the labels to be visible in both portrait and landscape, it would be best to use the multiplier rather than the constant values of the constraints so the position is relative to the size of the view (not a constant distance from some edge). To do this, you would use constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:, rather than the visual format language, so you don't have to worry about the views dictionary. When you use the multiplier, you have to use the right edge or the bottom edge of the superview, since those have non-zero values (while the top and left side do not).
After Edit:
This is one way to do it. I create random locations by passing in a random number between 0 and 1 to the multiplier coefficient. To keep the labels inside the view, I pin either the label's left side or right side depending on whether the multiplier value would result in the label being close to the left side or right side of the superview (same with top or bottom). I am also making the height and width of the label relative to the size of the view, so the labels are shorter but wider in landscape.
#interface ViewController ()
#property (strong,nonatomic) NSMutableArray *labelArray;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.labelArray = [NSMutableArray new];
while (self.labelArray.count <10) {
UILabel *label = [UILabel new];
label.backgroundColor = [UIColor orangeColor];
[self.view addSubview:label];
[self.labelArray addObject:label];
[self createConstraintsForRanomPositions:label];
}
for (int i = 0; i< self.labelArray.count; i++) {
[self.labelArray[i] setText:[NSString stringWithFormat:#"Label %d", i]];
}
}
-(void)createConstraintsForRanomPositions:(UIView *) view {
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
CGFloat rightMultiplier = arc4random_uniform(100)/ 100.0;
CGFloat bottomMultiplier = arc4random_uniform(100)/ 100.0;
NSLayoutConstraint *con1;
if (bottomMultiplier <= .2) {
con1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:0 toItem:self.view attribute:NSLayoutAttributeBottom multiplier:bottomMultiplier constant:0];
}else{
con1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:0 toItem:self.view attribute:NSLayoutAttributeBottom multiplier:bottomMultiplier constant:0];
}
NSLayoutConstraint *con2;
if (rightMultiplier <= .2) {
con2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:0 toItem:self.view attribute:NSLayoutAttributeRight multiplier:rightMultiplier constant:0];
}else{
con2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:0 toItem:self.view attribute:NSLayoutAttributeRight multiplier:rightMultiplier constant:0];
}
NSLayoutConstraint *con3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:0 toItem:self.view attribute:NSLayoutAttributeWidth multiplier:.2 constant:0];
NSLayoutConstraint *con4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:0 toItem:self.view attribute:NSLayoutAttributeHeight multiplier:.1 constant:0];
[self.view addConstraints:#[con1, con2, con3, con4]];
[self.view layoutIfNeeded]; // this is needed, otherwise the frames are all {{0,0}, {0,0}} in the following forloop
for (UIView *placedView in self.labelArray) { // rejects any label that overlaps with any other
if (![placedView isEqual:view] && CGRectIntersectsRect(CGRectInset(view.frame, -2, -2), placedView.frame)) {
[view removeFromSuperview];
[self.labelArray removeObject:view];
break;
}
}
}