AutoLayoutをコードで設定してみた

  • 3
    いいね
  • 0
    コメント

普段はストーリーボード側で設定しているAutoLayoutですが、動的に変更する必要がある場合に備えて、コードで設定してみました。
動的にレイアウトを変更しない場合は特に必要ないかもしれませんが、備忘録として残します。

今回は単純にUIViewを画面中央付近に配置しています。

4辺からの長さを指定する場合

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    UIView *testView = [[UIView alloc] initWithFrame:CGRectZero];
    testView.backgroundColor = [UIColor blueColor];
    // ストーリーボード側のAutoLayoutの設定を切る
    testView.translatesAutoresizingMaskIntoConstraints = NO;
    // 先にaddsubViewしてから制約を足す
    [self.view addSubview:testView];

    CGFloat inset = 80;

    // 4辺から80ずつマージン取った制約
    NSLayoutConstraint *topConstraint =
    [NSLayoutConstraint constraintWithItem:testView
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:inset];

    NSLayoutConstraint *bottomConstraint =
    [NSLayoutConstraint constraintWithItem:testView
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-inset];

    NSLayoutConstraint *leftConstraint =
    [NSLayoutConstraint constraintWithItem:testView
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:inset];

    NSLayoutConstraint *rightConstraint =
    [NSLayoutConstraint constraintWithItem:testView
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeRight
                                multiplier:1.0
                                  constant:-inset];

    NSArray *constraints = @[
                             topConstraint,
                             bottomConstraint,
                             leftConstraint,
                             rightConstraint
                             ];

  // 下のコードでも設定できているが、使い分けがよくわからなかった
    [self.view addConstraints:constraints];
  //[NSLayoutConstraint activateConstraints:constraints];
}

大きさを指定、x,y座標で配置を指定する場合

UIViewはストーリーボードからIBOutletしています。
Viewの大きさは画面の横幅*0.5の正方形になっています。
配置は(0,0)の中心です。

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];   

    self.testView.backgroundColor = [UIColor blueColor];
    // ストーリーボード側のAutoLayoutの設定を切る
    self.testView.translatesAutoresizingMaskIntoConstraints = NO;

    NSLayoutConstraint *sizeWidth =
    [NSLayoutConstraint constraintWithItem:self.testView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeWidth
                                multiplier:0.5
                                  constant:0];

    NSLayoutConstraint *sizeHeight =
    [NSLayoutConstraint constraintWithItem:self.testView
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.testView
                                 attribute:NSLayoutAttributeWidth
                                multiplier:1
                                  constant:0];

    NSLayoutConstraint *positionX =
    [NSLayoutConstraint constraintWithItem:self.testView
                                 attribute:NSLayoutAttributeCenterX
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeCenterX
                                multiplier:1
                                  constant:0];

    NSLayoutConstraint *positionY =
    [NSLayoutConstraint constraintWithItem:self.testView
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeCenterY
                                multiplier:1
                                  constant:0];

    NSArray *constraints = @[
                             sizeWidth,
                             sizeHeight,
                             positionX,
                             positionY
                             ];

    [self.view addConstraints:constraints];
}

まとめ

やってはみましたが、
[NSLayoutConstraint activateConstraints:constraints]の使い方や
作成した制約を削除できる
[NSLayoutConstraint deactivateConstraints:constraints]の使い方がいまいち理解できなかったです。(別タイミングで走らせても制約が削除できなかった。)
もっとAutoLayoutやNSLayoutConstraintに関する理解を深める必要がありそうです。