31

我正在尝试使用新推出的 iOS 6 的 Auto Layout API 构建一个相当简单的动画自定义 UI。我正在构建的自定义视图有一个我想要垂直和水平居中的圆圈。

不幸的是,我无法弄清楚为什么我的约束似乎对 UIButton 和 UILabel 元素运行良好,但是当我使用自定义视图和自定义 CALayer 时会产生奇怪的结果(在本例中是一个圆圈,最终将被动画化)。

需要明确的是,我不希望我的视图扩展以填充整个屏幕,而是具有动态“填充”,以便视图在 iPhone 4 和 5 上都垂直居中。我还应该注意,我非常Cocoa 和 UIKit 的新手。

RootViewController.m:

...
- (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];
}
...

CircleLayer.m:

...
- (void)drawInContext:(CGContextRef)context {
    CGContextAddArc(context, 50, 50, 50, 0.0, 2*M_PI, 0);
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    CGContextFillPath(context);
}
...

基本上我实施的约束是:

  • 在父视图内垂直居中
  • 在父视图内水平居中

这是我得到的结果:

圆形不使用自动布局居中

任何帮助将不胜感激,我已经思考了几天了。

谢谢

4

2 回答 2

34

尝试向您的 circle_view 添加高度和宽度约束。如果不添加这些内容(使用您的代码,减去图层内容),我什至无法只显示一个痛苦的正方形视图。

NSLayoutConstraint *heightConstraint =
    [NSLayoutConstraint constraintWithItem:circle_view
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:100.0];
    [circle_view addConstraint:heightConstraint];

    NSLayoutConstraint *widthConstraint =
    [NSLayoutConstraint constraintWithItem:circle_view
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:100.0];
    [circle_view addConstraint:widthConstraint];
于 2012-12-05T17:10:25.347 回答
12

只是添加到rdelmar的答案:

核心问题是,一旦您走NSLayoutConstraint路线并指定setTranslatesAutoresizingMaskIntoConstraints:NO,您制作的框架就与CGRectMakeAutoLayout 目的无关。这就是为什么它没有使用框架高度和宽度的信息。

于 2013-06-04T22:51:01.240 回答