しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

NSLayoutAnchorでAutoLayoutを簡単に実装

iOS9から出たNSLayoutAnchorを使うとソースコード上でのAutoLayoutの設定が簡単にできます。

NSLayoutAnchorを使ってみる

例えば画面上に、上下左右Margin10pxのビューを表示したい場合は下のように記述します。
trailingAnchorとbottomAnchorは-10を入れる必要があるので注意して下さい。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let v = UIView()
        v.backgroundColor = UIColor.lightGray
        v.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(v)
        v.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
        v.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
        v.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
        v.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
    }
}

実行すると下のようにビューが表示されます。

f:id:llcc:20171017145912p:plain

NSLayoutConstraintでの実装

NSLayoutAnchorがない時はNSLayoutConstraintを初期化してそれをビューに渡す必要がありました。
NSLayoutAnchorと比べると少し冗長です。

view.addConstraint(NSLayoutConstraint(item: v ,attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 10.0))
view.addConstraint(NSLayoutConstraint(item: v ,attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 10.0))
view.addConstraint(NSLayoutConstraint(item: v ,attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -10.0))
view.addConstraint(NSLayoutConstraint(item: v ,attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: -10.0))