なんとなくでレイアウト調整をおこなっていたので、
この機会に色々とレイアウトを触ってみて思ったことや気付きをまとめただけの備忘録です！
●レイアウトをstoryboardでやる場合
- 左から2番目のマーク
描画対象の中心位置や、左右上下からどの程度離れた位置にするのかのレイアウトを設定できる。
左から3番目のマーク
左右上下の位置や、幅、高さ等を設定できる。また、「Aspect Ratio」で高さと幅の比率を設定することも可能。
「Equal Width」は親viewと設定したいviewを選択すると、親viewと同じ幅に設定できたり、親viewに対して何割の幅にするのか等を設定できる。
左から3番目のマーク(view指定)
どのviewを基準として制約を入れることができる。「▼」マークを謳歌して基準にしたいviewを指定/確認する方が良い。(自身で思っている制約と異なる制約が入ってしまわないようにするため)
左から4番目のマーク
「Add Missing Constrains」で不足している制約を追加できる。
その他で制約をリセットしたり削除したりすることができるので、制約を一括で調整したい場合は便利?
●レイアウトをコードでやる場合
「初めはレイアウトはstoryboardでしかできないんだなぁ」と勝手に思っていたのですが、
そんなことなく、案件に入って1番最初にコードでレイアウト調整したのが、
ボタンの角丸や枠線対応でした。
button.layer.borderWidth = 0.2 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 8.0 // 角丸のサイズ
「コードでボタン角丸にしたりできるし結構簡単かも」と思っていたのですが、
ややこしいのが、コードで配置の調整ができることです。
これはかなり驚きました。。。
まずstoryboardの制約とかち合うといけないので、このプロパティをfalseにしておかないといけないようです。
なかなかコードで書いた制約が変わらず、苦労したらこのプロパティを変更するのを忘れていました。(デフォルト値はtrue)
testView.translatesAutoresizingMaskIntoConstraints = false
storyboardで中心設定したり、幅や高さを調整していたりしましたが、
コードで書くと、それぞれ各行ずつ書かなければいけないと知りましたが、
オートレイアウトで行うと、コードで長文を書く必要もないので、やっぱり便利だなと思いました。
// testViewの横方向の中心は、親ビューの横方向の中心と同じ
testView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
// testViewの縦方向の中心は、親ビューの縦方向の中心と同じ
testView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
// testViewの幅は、親ビューの幅と同じ
testView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
// testViewの高さは親ビュー高さの1/2
testView.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.5).isActive = true
●まとめ
- storyboardとコード両方でレイアウトの調整はできる。
- 標準ではbuttonの角丸はstoryboardでは設定できないのでコードで書く必要がある。
- コードで制約追加する場合はtranslatesAutoresizingMaskIntoConstraintsのプロパティを変更しなくてはならない。
- コードで制約をいじると管理できなくなりので、できるだけオートレイアウトを推奨。
- storyboardで背景色等の変更をしても、コードで設定した場合はコードが優先されるので、気をつける必要がある。
- やむおえず特定の条件下のみでレイアウトを変えたい、というような場合はコードで変更する方が楽かも。