【Swift】コードでレイアウト NSLayoutAnchor

NSLayoutAnchorはコードでautoレイアウトを実装するためのクラスです。
iOS9で追加されたクラスで、今まで使用していた NSLayoutConstraint クラスでの記述より直感的で解りやすく記述できるようになっています。

記述の仕方

下記の2つのコードは生成したラベルのtopになる位置（x座標：minX）をviewのtopになる位置から10離れた（下がった）位置にレイアウトしています。

基本的な書き方

let label = UILabel()
let topAnchor = label.topAnchor.constraint(equalTo: view.topAnchor, constant: 10)
topAnchor.isActive = true

isActiveメソッドをtrueにして設定を適用しています。

省略した書き方

上記のコードは下記のように書くこともできます。

let label = UILabel()
label.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true

開発での使い方

アプリ開発の時は下記のような感じで記述します。

class ViewController: UIViewController {
    var redView:UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        redView = UIView()
        redView.backgroundColor = UIColor.red
        view.addSubview(redView)
        
        redView.translatesAutoresizingMaskIntoConstraints = false
        redView.topAnchor.constraint(equalTo: view.topAnchor, constant: 10.0).isActive = true
    }
    
    override func viewDidLayoutSubviews() {
        redView.frame.size = CGSize(width: view.frame.width, height: 20)
    }
}

● 11行目

AutoresizingMaskは、ある親 Viewに対して、あるViewのどの部分が固定され、どの部分を変化させるかを制約するものです。
これは、AutoLayoutの制約にも影響を与えます。
なので、コードでAutoLayoutを作成する場合は必ず無効にする必要があります。
translatesAutoresizingMaskIntoConstraintsをfalseで無効になります。

※）上記の書き方の場合は動作しますが、以下のようにviewDidLayoutSubviewsメソッド内にframeとAutoLayoutを書くと表示されません。

override func viewDidLayoutSubviews() {
   redView.frame.size = CGSize(width: view.frame.width, height: 20)
   redView.translatesAutoresizingMaskIntoConstraints = false redView.topAnchor.constraint(equalTo: view.topAnchor, constant: 10.0).isActive = true
}

親viewを基準にした大きさの設定

下記はredViewの横幅をviewの横幅の1/2に設定しています。

redView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5).isActive = true

設定位置の取得

topAnchor はトップの位置を取得するプロパティですが、その他の位置は下記になります。

プロパティ名	位置
leadingAnchor	左端
trailingAnchor	右端
topAnchor	上端
bottomAnchor	下端
centerYAnchor	オブジェクトのY座標軸の中心
centerXAnchor	オブジェクトのX座標軸の中心
widthAnchor	オブジェクトの横幅
heightAnchor	オブジェクトの縦幅