Auto Layoutをコードで記述する

Auto Layoutをコードで記述する前からやりたいと思っていたAuto Layoutのコードでの記述ですが、今日ちょっと調べてみたところ意外とすんなり行きました。こちらのブログのお陰です。ありがとうございます!これで、Xibで作成した使い回しビューを画面に配置した時もうまい具合にAuto Layout適用できます。気持ちが楽になった!

せっかくなので自分の記憶を定着させるためにも簡単にまとめてみたいと思います。

簡単な説明

  • addConstraint: ビューにconstraintを追加する.UIViewのインスタンスメソッド。
  • addConstraints: ビューに複数のconstraintを配列形式で追加する。UIViewのインスタンスメソッド。
  • setTranslatesAutoresizingMaskIntoConstraints: AutoresizingMaskをConstraintsに変換して利用するか。NOにした方が良いと思います。UIViewのインスタンスメソッド。
  • constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: constraintを作成する。NSLayoutConstraintのクラスメソッド

使用例

[aView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:aView
                                                      attribute:NSLayoutAttributeTop
                                                     multiplier:1.0
                                                       constant:0.0]];

[aView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeBottom
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:aView
                                                      attribute:NSLayoutAttributeBottom
                                                     multiplier:1.0
                                                       constant:0.0]];

[aView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeLeft
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:aView
                                                      attribute:NSLayoutAttributeLeft
                                                     multiplier:1.0
                                                       constant:0.0]];

[aView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeRight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:aView
                                                      attribute:NSLayoutAttributeRight
                                                     multiplier:1.0
                                                       constant:0.0]];

[bView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:nil
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:CGRectGetWidth(bView.frame)]];

高さ

[bView addConstraint:[NSLayoutConstraint constraintWithItem:bView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:nil
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:1.0
                                                       constant:CGRectGetHeight(bView.frame)]];

実際の使用例

UIViewControllerのサブクラスに、広告用のビュー(self.nadView)を追加して、そのビューにconstraintを記述する例です。

[self.nadView setTranslatesAutoresizingMaskIntoConstraints:NO];

[self.nadView addConstraint:[NSLayoutConstraint constraintWithItem:self.nadView
                                                             attribute:NSLayoutAttributeWidth
                                                             relatedBy:NSLayoutRelationEqual
                                                                toItem:nil
                                                             attribute:NSLayoutAttributeWidth
                                                            multiplier:1.0
                                                              constant:320.0]];

[self.nadView addConstraint:[NSLayoutConstraint constraintWithItem:self.nadView
                                                             attribute:NSLayoutAttributeHeight
                                                             relatedBy:NSLayoutRelationEqual
                                                                toItem:nil
                                                             attribute:NSLayoutAttributeHeight
                                                            multiplier:1.0
                                                              constant:50.0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.nadView
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1.0
                                                           constant:0.0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.nadView
                                                          attribute:NSLayoutAttributeLeft
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeLeft
                                                         multiplier:1.0
                                                           constant:0.0]];

参考ブログ

Pocket
LINEで送る

You may also like...