Autolayout – Position by Percentage

I’d like to map dots along a line.

line across screen

  • Why does hiding my status bar completely break my simple animation?
  • How to use UIVisualEffectView?
  • UIView performance: opaque, backgroundColor, clearsContextBeforeDrawing?
  • Error: UIView's window is not equal to another view's window
  • Test whether a UIView is in the middle of animation
  • How do I animate/rotate a UIView 90 degress from its upper right corner?
  • 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”?

    2 Solutions Collect From Internet About “Autolayout – Position by Percentage”

    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.

    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) size inspector

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

    constraint rectangle

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

    enter image description here