Centering a child UIView to its parent UIView

Question

I want to center a subview in the middle of its parent, I have looked at answers on SO but so far they have not helped me. This one specifically looks like it should work, but doesn't.

Here is what I am doing

-(void)viewDidLoad {
    [super viewDidLoad];

    finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    finalNumberCircle.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);
    finalNumberCircle.Color = [UIColor darkGrayColor];
    [self.view addSubview:finalNumberCircle];
}

I also tried the following:

-(void)viewDidLoad {
    [super viewDidLoad];

    CGPoint translatedP = [self.view convertPoint:self.view.center fromView:self.view.superview];
    finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100];
    finalNumberCircle.center = translatedP;
    [self.view addSubView:finalNumberCircle];
}

Here is how it looks (it's the grey circle)

enter image description here

When you say that it doesn't work, what does that mean? What do you get with the code you've tried? Is the view off center, and if so, how? — user1459524, Nov 12 '13 at 13:27
if none of these solutions work, may the problem is in [CircleView initWithFrame] code. — LuisEspinoza, Nov 12 '13 at 18:49
If none of the other solutions work, it may also be a problem with autolayout in iOS7. — user1459524, Nov 12 '13 at 22:46

peko · Answer 1 · 2013-11-12T13:52:07.047

1

You have to move your code (2. example) from viewDidLoad to viewWillLayoutSubviews and it will work as suspected.

Before viewWillLayoutSubview is called your viewcontroller view bounds still can change.

edited Nov 12 '13 at 13:52

answered Nov 12 '13 at 13:34

peko

11,267
4
33
48

LuisEspinoza · Answer 2 · 2013-11-12T18:51:16.290

I think that you should move half width to the left, and half height upwards:

-(void)viewDidLoad {
    [super viewDidLoad];
    finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(self.view.center.x-50, self.view.center.y-50, 100, 100]; 
    [self.view addSubView:finalNumberCircle];
}

But I would use something like:

#DEFINE CIRCLE_RADIUS    50

-(void)viewDidLoad {
    [super viewDidLoad];
    finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(self.view.center.x-CIRCLE_RADIUS, self.view.center.y-CIRCLE_RADIUS, 2*CIRCLE_RADIUS, 2*CIRCLE_RADIUS]; 
    [self.view addSubView:finalNumberCircle];
}

I uploaded a demo https://github.com/luisespinoza/CenterViewTest

score 0 · Answer 3 · answered Nov 12 '13 at 13:15

convertPoint and related methods used when you want to convert coordinates from one view's coordinates to another, that's not your situation. You have to do something like:

finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
finalNumberCircle.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);
[self.view addSubview:finalNumberCircle];

score 0 · Answer 4 · answered Nov 12 '13 at 13:22

Try below code...

[self.view addSubView:finalNumberCircle];

finalNumberCircle.frame=CGRectMake(finalNumberCircle.frame.origin.x+(self.view.frame.size.width/2-finalNumberCircle.center.x), finalNumberCircle.frame.origin.y+(self.view.frame.size.height/2-finalNumberCircle.center.y), finalNumberCircle.frame.size.width, finalNumberCircle.frame.size.height);

score 0 · Answer 5 · answered Nov 12 '13 at 13:27

Another possibility how to do it (in case You need specific offset from sides). Just provide an offset from parent view sides, and it will auto-resize itself in center of parent view, and will also autoresize, in case parent view frame is changed.

- (void)viewDidLoad 
{
    [super viewDidLoad];

    CGFloat mOffsetFromSide = 50;

    finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x+mOffsetFromSide, self.view.bounds.origin.y+mOffsetFromSide, self.view.bounds.size.width-mOffsetFromSide*2, self.view.bounds.size.height-mOffsetFromSide*2];

    [finalNumberCircle setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)];

    [self.view addSubView:finalNumberCircle];
}

In case You simply want to position view in it's parent view's center, leaving it's frame intact, then:

finalNumberCircle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

finalNumberCircle.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);

[self.view addSubview:finalNumberCircle];

And yes - it is exact copy of Your provided code. It works on my side.

Maybe problem is with CircleView itself. Or You change it's frame later in code?

What happens if You change "CircleView" to simply UIView ?

Centering a child UIView to its parent UIView

5 Answers5