Autolayout – Position by Percentage

I’d like to map dots along a line.

line across screen

  • Progress of UIPageViewController
  • Do we need to check in *.xcuserstate?
  • Draw a line with UIBezierPath
  • How to add a UIImage in MailComposer Sheet of MFMailComposeViewController
  • How do I apply UIAppearance Proxy properties to UILabel?
  • Crop letter from image using Masking
  • 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 
          NSLayoutConstraint *lcl = [NSLayoutConstraint constraintWithItem:self.lightButton 
          [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