縦と横で別のAutoLayoutをつけようとしたら警告が出まくった話

## 突然だけど
* 縦画面の時に中央上下にラインを引いたような配置
* 横画面の時に中央左右にラインを引いたような配置

な画面をAutoLayoutで作りたい（どうしてとか言わない）

|縦|横|
|-|-|
|![スクリーンショット 2021-09-03 23.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/83000347-8f1a-1d7b-ff32-26b79b311235.png)|![スクリーンショット 2021-09-03 23.29.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/1873be2e-8a6e-8220-397c-07968ccd4d88.png)|

## サイズクラスごとに制約をつけていく
### 縦向きの制約をつける
1. まずは制約をつけるViewを設置して
1. まずは縦方向の制約だけつけていく
1. Constantが適当なので整える
1. できた

|1|2|3|4|
|:-:|:-:|:-:|:-:|
|![スクリーンショット 2021-09-03 23.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/9d842713-6b75-ac32-8f2f-87bae224ad3c.png)|![スクリーンショット 2021-09-03 23.21.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/484e6b01-8115-b935-0c08-36bf74bcb978.png)![スクリーンショット 2021-09-03 23.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/59333bbb-2b62-bfbf-9d6b-794263e08659.png)|![スクリーンショット 2021-09-03 23.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/847abf62-f839-d1b1-1724-91dd53268cfa.png)|![スクリーンショット 2021-09-03 23.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/31c9aaa4-be83-995f-605f-3577803978ed.png)|

### 横向きの制約をつける
1. 画面を横にして
1. 横方向の制約だけつけていく
1. Constantが適当なので整える
1. できた

|1|2|3|4|
|:-:|:-:|:-:|:-:|
|![スクリーンショット 2021-09-03 23.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/f3a9a7af-7e84-41c8-31a1-a41dd7a16f88.png)|![スクリーンショット 2021-09-03 23.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/1ba8a488-dc62-fe49-a385-971bb3ca3441.png)![スクリーンショット 2021-09-03 23.28.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/0d50fbc4-e4e2-ade9-3456-6a36eb93d48c.png)|![スクリーンショット 2021-09-03 23.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/49a030d1-c00d-7439-653e-2cbaa07cb1c3.png)|![スクリーンショット 2021-09-03 23.29.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/43436838-486d-6124-45b7-e812441f3a50.png)|

## いざ実機実行！
縦にしても横にしてもStoryboard上では警告出てない！勝ったな！実機で回転させる！！

```
[LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x282ebd270 UIView:0x10160e2d0.top == UILayoutGuide:0x283494700'UIViewSafeAreaLayoutGuide'.top + 340   (active)>",
    "<NSLayoutConstraint:0x282ebd2c0 UILayoutGuide:0x283494700'UIViewSafeAreaLayoutGuide'.bottom == UIView:0x10160e2d0.bottom + 350   (active)>",
    "<NSLayoutConstraint:0x282e8d040 'UIView-Encapsulated-Layout-Height' UIView:0x10160a450.height == 390   (active)>",
    "<NSLayoutConstraint:0x282ebd450 'UIViewSafeAreaLayoutGuide-bottom' V:[UILayoutGuide:0x283494700'UIViewSafeAreaLayoutGuide']-(21)-|   (active, names: '|':UIView:0x10160a450 )>",
    "<NSLayoutConstraint:0x282ebd4f0 'UIViewSafeAreaLayoutGuide-top' V:|-(0)-[UILayoutGuide:0x283494700'UIViewSafeAreaLayoutGuide']   (active, names: '|':UIView:0x10160a450 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x282ebd2c0 UILayoutGuide:0x283494700'UIViewSafeAreaLayoutGuide'.bottom == UIView:0x10160e2d0.bottom + 350   (active)>
```

ど　う　し　て

じゃなくて警告文を読む([このサイト](https://www.wtfautolayout.com/)に警告をコピペで読みやすくなるかも)

以下の制約を同時に満たせません

* `UIViewのtop`が`SafeAreaのtopから+340`
* `SafeAreaのbottom`が`UIViewのbottomから+350`
* `UIViewの高さが390`
* `UIViewのbottom`が`SafeAreaのbottomから+21`
* `SafeAreaのtop`が`Viewのtop`

340、350…🤔

!!消したはずでは…（縦向きの制約をつけるの2枚目の画像）
![スクリーンショット 2021-09-03 23.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/59333bbb-2b62-bfbf-9d6b-794263e08659.png)

## `Vary for Traits`を使う時の注意点
Size inspectorで確かにConstantは修正しました

|before|after|
|-|-|
|![スクリーンショット 2021-09-03 23.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/59333bbb-2b62-bfbf-9d6b-794263e08659.png)|![スクリーンショット 2021-09-03 23.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/847abf62-f839-d1b1-1724-91dd53268cfa.png)|

が、制約をダブルクリックしてみると…
![スクリーンショット 2021-09-04 2.07.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270319/80d9c7a3-39c9-be3f-759f-b345417e24f1.png)

**350残っとるやんけ！**

僕は以下の手順で制約をつけました

1. 制約をつけたいViewを設置
1. Vary for TraitsでheightがRegularのTraitに対してのみ制約をつけるようにする
1. とりあえずのConstantで制約をつける
1. Size inspectorからConstantを編集

どうやら、Vary for Traitsを使用中にSize inspectorからConstantを編集した時は**新たにConstantを生成する**ようです
編集しているんだから新たに生成するのはやめて欲しい気もしますが…

`Constantを一つにすることで警告は解消されました`

## しかし不可解
はじめにつけた適当なConstantが残っていたことはわかりました。しかしこの制約はheightがRegularの時にしかactiveにならないはずで、Regularの時のConstantは350ではなく0になるのでは…

いろいろ試してみましたがどうしてもう一方のConstantが有効な制約になってしまうのか突き止められませんでした

もし「こういうことでは🤔」と教えていただける方いましたらぜひよろしくお願いします🥺