Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center a UIView vertically and horizontally within its parent view

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];
like image 874
jdog Avatar asked Jul 25 '14 14:07

jdog


4 Answers

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

like image 72
Logan Avatar answered Nov 02 '22 18:11

Logan


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.

like image 41
Putz1103 Avatar answered Nov 02 '22 19:11

Putz1103


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]];
like image 2
Srinivasan N Avatar answered Nov 02 '22 19:11

Srinivasan N


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];
like image 1
A O Avatar answered Nov 02 '22 18:11

A O