Youtubeチャンネルの素材用にTinderの模擬アプリを作成する際、
シンプルだけど長い時間はまってしまったのでメモ。
状況
Viewの制約といっても色々あるが、今回ハマったのはViewの縁を設定する制約。
(図のようにViewController
の縁に対して上下左右10pxずつのmarginを設定して配置したい、という感じ。)
Storyboard
での配置だとcustomViewだろうが標準Viewだろうが縁の制約はAdd New Constraints
で
こんな感じで10をひたすら入れていけばできてしまうが
NSLayoutAnchor
を使ってコードで設定したとき同じ容量でこんな感じでやったら
girlsViewArray[$0].leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10.0).isActive = true
girlsViewArray[$0].trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 10.0).isActive = true
girlsViewArray[$0].topAnchor.constraint(equalTo: self.view.topAnchor, constant: 10.0).isActive = true
girlsViewArray[$0].bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 10.0).isActive = true
View
がViewController
からはみ出してしまった
対策
NSLayoutAnchor
のconstant
はCGFloatの座標系(x: 右に行くほど増える, y: 下)かつequalTo
で設定した縁からの距離である
->Add New Constraints
はプラスの数値を入れれば選択したViewのsuperView
に対してスペースを作る(縮める)方向に勝手に制約を設定してくれる
以上を理解した上で修正した制約がこう(上下左右ViewControllerのViewに対して10pxずつマージンを持たせたい場合)
->trailingAnchor
は左に詰めたいのでconstant
を-10.0にする必要がある
->bottomAnchor
は上に詰めたいのでconstant
を-10.0にする必要がある
girlsViewArray[$0].leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10.0).isActive = true
girlsViewArray[$0].trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -10.0).isActive = true
girlsViewArray[$0].topAnchor.constraint(equalTo: self.view.topAnchor, constant: 74.0).isActive = true
//84.0 = 44.0(navHeight) + 20.0(statusBarHeight) + 10(margin)
girlsViewArray[$0].bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -10.0).isActive = true