LoginSignup
0
0

More than 3 years have passed since last update.

AutoLayoutをコードで指定する際の注意点(NSLayoutAnchor)[Swift]

Last updated at Posted at 2019-12-15

Youtubeチャンネルの素材用にTinderの模擬アプリを作成する際、
シンプルだけど長い時間はまってしまったのでメモ。

状況

Viewの制約といっても色々あるが、今回ハマったのはViewの縁を設定する制約。
(図のようにViewControllerの縁に対して上下左右10pxずつのmarginを設定して配置したい、という感じ。)
girlsView-ex.jpeg
Storyboardでの配置だとcustomViewだろうが標準Viewだろうが縁の制約はAdd New Constraints
こんな感じで10をひたすら入れていけばできてしまうが
スクリーンショット 2019-12-01 19.48.17.png
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

ViewViewControllerからはみ出してしまった

対策

NSLayoutAnchorconstantCGFloatの座標系(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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0