Center a UIView vertically and horizontally within its parent view

Question

I have a UICollection view that is inside another UIView. I am trying to center the collection view inside its parent view. Currently manually doing it by tweaking its frame (see code below). There has to be a easier way.

CURRENT CODE:

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(COLLECTION_PADDING+10, COLLECTION_PADDING+5, self.bounds.size.width - (COLLECTION_PADDING*2), self.bounds.size.height - (COLLECTION_PADDING+22)) collectionViewLayout:flow];

Solution 1

You could do something like this:

self.collectionView.center = CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds));

Swift 3:

self.collectionView.center = CGPoint(superview.bounds.midX, superview.bounds.midY)

With this approach, your subview will be centered in its superview regardless of the superview's coordinates. Using an approach like this:

self.collectionView.center = superview.center

Will cause problems if the superview has an origin of anything other than 0,0

Solution 2

You can setup your collectionView's width and height and then use the center property to adjust it's location.

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,0,width,height)];
self.collectionView.center = CGPointMake(self.center.x,self.center.y);

EDIT: As Logan just mentioned in the comments, this only works if self and self.collectionView have the same superview. If you are adding collectionView to a view and want it centered inside that view then you could do:

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,0,width,height)];
self.collectionView.center = CGPointMake(self.center.x - self.frame.origin.x/2,self.center.y - self.frame.origin.x/2);

But this case doesn't work when there is rotation involved. In that case you would have to use other means. So, as anything in coding, this is not a clear cut answer. But for most cases it will work. If you are getting into the rare cases that it does not work then you are likely going to do more custom framing than just centering inside parents.

Solution 3

Heard of Layouts?..This might help you.

This is for horizontal alignment

NSLayoutConstraint *centerHcons =[NSLayoutConstraint constraintWithItem:self.collectionView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:collectionViewSuper attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];

This is for vertical alignment

NSLayoutConstraint *centerVcons =[NSLayoutConstraint constraintWithItem:self.collectionView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:collectionViewSuper attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];

    [collectionViewSuper addConstraints:@[centerHcons, centerVcons]];

Solution 4

IMO, you could try finding the difference between your collectionview and your parent view size. Then dividing by 2 and padding all sides with that.

parentHeight = self.bounds.size.height;
parentWidth = self.bounds.size.width;
heightDiff = parentHeight - collectionview.bounds.size.height;
widthDiff = parentWidth - collectionview.bounds.size.width;
heightPadding = heightDiff/2;
widthPadding = widthDiff/2;

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(widthPadding, heightPadding, parentWidth-widthPadding, parentHeight-heightPadding) collectionViewLayout:flow];

View more solutions

Comments

[A O]

Scratch that, Putz' answer is better. Ignore me :)

[Putz1103]

Not necessarily better, just simpler. People seem to like simpler.

[Logan]

While this will often work, there is a problem when the superview has an origin of something other than 0,0. Alternate situations will cause problems. Also, CGPointMake(self.center.x,self.center.y); is equal to self.center.

[Dominique Lorre]

with swift 4.2: self.collectionView.center = CGPoint(x: superview.bounds.midX, y: superview.bounds.midY)