Center a UIView vertically and horizontally within

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];

Answer 1

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.

Answer 2

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]];

Answer 3

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

Answer 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];