Autolayout - Position by Percentage

Question

I'd like to map dots along a line.

The line length depends on device and orientation and is always stretched across the whole screen. Therfore it would make most sense to me to position the dots using a relative percentage value.

So far I only found constraints being defined in some sort of point value (Doc)

Is it possible to use percentage values as constraints as well? Any ideas on how to position these dots in a scalable way ... or do I need do this conversion/positioning "manually"?

Answer 1

Yes, you can position the dot as a fraction of the view's width. The NSLayoutConstraint method, constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:, has that multiplier parameter that lets you use a fractional relationship between a superview and its subview. The superview's right edge will be the width of that view (the screen if its a full width view), so if you create a constraint like below, the dot will be positioned at a fractional distance along the line:

-(void)viewDidLoad {
      [super viewDidLoad];
      [self.view removeConstraint:self.leftConDark];
      [self.view removeConstraint:self.leftConLight];
      NSLayoutConstraint *lcd = [NSLayoutConstraint constraintWithItem:self.darkButton 
                                                             attribute:NSLayoutAttributeCenterX 
                                                             relatedBy:NSLayoutRelationEqual 
                                                                toItem:self.view 
                                                             attribute:NSLayoutAttributeRight 
                                                            multiplier:.5 
                                                              constant:0];
      NSLayoutConstraint *lcl = [NSLayoutConstraint constraintWithItem:self.lightButton 
                                                             attribute:NSLayoutAttributeCenterX 
                                                             relatedBy:NSLayoutRelationEqual 
                                                                toItem:self.view 
                                                             attribute:NSLayoutAttributeRight 
                                                            multiplier:.9 
                                                              constant:0];
      [self.view addConstraints:@[lcd,lcl]];
}

In this example I'm positioning two UIButtons (info type dark and light). I added them in IB, and made IBOutlets to their constraints they have to the left side of the view (that's what the system gave me, it could have been to the right side -- it doesn't matter since you just delete them anyway. If you are making the dots in code, you wouldn't need to do this). In code I remove those constraints, then add new ones that will put the center of the buttons at 50% and 90% of the way across the screen.

Answer 2

I'm not an auto-layout expert (or even competent yet!) but as of XCode 6, you seem to be able to do this in IB.

1. Select the object.

2. Show the size inspector (click on ruler)

3. Double-click on the constraint rectangle (not obvious! "Edit" takes you somewhere else)

4. Here you can set the multiplier just like in the answer above.