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 に答える