简体   繁体   中英

Center or pin to top using autolayout

I have an UIScrollView that can have content views of different heights. If the content is smaller than the scrollView, I want the content to be centered vertically. However when the content is larger I want it to stick to the top.

Can this be achieved using auto layout?

I found that you can set up one constraint that centers the view and then a constraint with a higher priority that says that the contents top can only be greater than 0.

// If the content is smaller than the scrollview then center it, else lock to top
NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:self.contentController.view
                                                                     attribute:NSLayoutAttributeCenterY
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:_scrollView
                                                                     attribute:NSLayoutAttributeCenterY
                                                                    multiplier:1 constant:0];

// Constrain the top to not be smaller than 0 (multiplier:0)
NSLayoutConstraint *lockToTopConstraint = [NSLayoutConstraint constraintWithItem:self.contentController.view
                                                                       attribute:NSLayoutAttributeTop
                                                                       relatedBy:NSLayoutRelationGreaterThanOrEqual
                                                                          toItem:_scrollView
                                                                       attribute:NSLayoutAttributeTop
                                                                      multiplier:0 constant:0];
//It't more important that the content doesn't go over the top than that it is centered
centerYConstraint.priority = UILayoutPriorityDefaultLow;
lockToTopConstraint.priority = UILayoutPriorityDefaultHigh;
[self.view addConstraints:@[centerYConstraint, lockToTopConstraint]];

Just got this to work, there may be a better way but this seems to work just fine.

  1. Set up the content view in the scroll view like I did below. 在此处输入图片说明

  2. Add IBOutlets for 3 constraints, the VerticalSpace on the top, the vertical space on the bottom, and then the content view's height.

3. ` -(void)adjustContentSize {

self.contentHeight.constant = 1000; //I tried out different values here to make sure it'd work for whatever size you need.

if (self.contentHeight.constant > self.view.frame.size.height)
{
    self.contentVerticalSpaceTop.constant = 0; //This will ensure it sticks to the top if it's bigger than the frame
}else
{
    self.contentVerticalSpaceTop.constant = ((self.view.frame.size.height/2)-(self.contentHeight.constant/2));
}
self.contentBottomVerticalSpace.constant = self.contentVerticalSpaceTop.constant; //setting the bottom constraint's constant to the top's will ensure that the content's centered vertically 
[self.view layoutIfNeeded];

} `

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM