Posted at

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

More than 1 year has passed since last update.

普段はストーリーボード側で設定している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に関する理解を深める必要がありそうです。