title: Center custom UIView vertically and horizontally using Auto Layout
body: <p>I'm trying to build a rather simple animated custom UI using the Auto Layout API newly available iOS 6. The custom view I'm building has a circle that I want to be both vertically and horizontally centered.</p>
  
  <p>Unfortunately I can't figure out why my constraints appear to work fine for UIButton, and UILabel elements but yield weird results when I use a custom view with and custom CALayer (in this case a circle, that will eventually be animated).</p>
  
  <p>To be clear I don't want my view to expand to fill the whole screen, but rather to have dynamic "padding" so that the view is vertically centered both on the iPhone 4 and 5. I should also note that I'm very new to Cocoa and UIKit.</p>
  
  <p>RootViewController.m:</p>
  
  <pre><code>...
  - (void)viewDidLoad {
      [super viewDidLoad];
  
      // Create Circle View
      CGRect circle_view_rect = CGRectMake(0, 0, 100, 100);
      UIView *circle_view = [[UIView alloc] initWithFrame:circle_view_rect];
  
      // Create Circle Layer
      CircleLayer *circle_layer = [[CircleLayer alloc] init];
      circle_layer.needsDisplayOnBoundsChange = YES;
      circle_layer.frame = circle_view.bounds;
      [circle_view.layer addSublayer:circle_layer];
  
      // Enable Auto Layout
      [circle_view setTranslatesAutoresizingMaskIntoConstraints:NO];
  
      [self.view addSubview:circle_view];
  
      // Center Vertically
      NSLayoutConstraint *centerYConstraint =
      [NSLayoutConstraint constraintWithItem:circle_view
                  attribute:NSLayoutAttributeCenterY
                  relatedBy:NSLayoutRelationEqual
                     toItem:self.view
                  attribute:NSLayoutAttributeCenterY
                 multiplier:1.0
                   constant:0.0];
      [self.view addConstraint:centerYConstraint];
  
      // Center Horizontally
      NSLayoutConstraint *centerXConstraint =
      [NSLayoutConstraint constraintWithItem:circle_view
                  attribute:NSLayoutAttributeCenterX
                  relatedBy:NSLayoutRelationEqual
                     toItem:self.view
                  attribute:NSLayoutAttributeCenterX
                 multiplier:1.0
                   constant:0.0];
      [self.view addConstraint:centerXConstraint];
  }
  ...
  </code></pre>
  
  <p>CircleLayer.m:</p>
  
  <pre><code>...
  - (void)drawInContext:(CGContextRef)context {
      CGContextAddArc(context, 50, 50, 50, 0.0, 2*M_PI, 0);
      CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
      CGContextFillPath(context);
  }
  ...
  </code></pre>
  
  <p>Basically the constraints I've implemented are: </p>
  
  <ul>
  <li>center vertically inside parent view</li>
  <li>center horizontally inside parent view</li>
  </ul>
  
  <p>And this is the result I get:</p>
  
  <p><img src="https://i.stack.imgur.com/10kSp.png" alt="Circle not centered with Auto Layout"></p>
  
  <p>Any help would be greatly appreciated, I've been pondering this one for a few days now.</p>
  
  <p>Thanks</p>