読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

Constraint(拘束)をソースコードでつける方法

概要

拘束をインタフェースビルダーではなくソースコードでつけてる方法をまとめる

詳細

まず、インタフェースビルダーでViewとボタンを配置し、それぞれをソースコードに接続する
f:id:tiro105:20150414141138p:plain

暗黙の拘束を削除

インターフェースビルダーで拘束を設定しなかった場合、ビルド時に自動で拘束が設定される
そのためコードで拘束を設定する際に、自動で付加された拘束を全て削除する必要がある

view.removeConstraints(view.constraints())

拘束をソースコードで作成する

swiftソースコードで拘束を設定するにはNSLayoutConstraintクラスを使う
初期化ファンクションは以下の通り

    convenience init(item view1: AnyObject, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: AnyObject?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat)

各パラメータについてざっと説明

view1

拘束を設定する対象となるview

attr1

拘束対象となるviewの拘束の起点を指定する
NSLayoutAttribute列挙型で定義されている以下のようなものが指定できる

.Left
.Right
.Top 上辺
.Bottom 下辺
.Leading 前辺
.Trailing 後辺
.Width
.Hieght 高さ
.CenterX X方向中央
.CenterY Y方向中央
.Baseline ベースライン
relation

二つのviewの拘束関係を示すもの
NSLayoutRelation列挙型で定義されている、以下のようなものが指定できる

.LessThanOrEqual 小さいか等しい
.Equal 等しい
.GreaterThanOrEqual 大きいか等しい
view2

拘束の基準となるview

attr2

view2の拘束の起点となる位置を設定、設定値はattr1と内容は同じ

multiplier

親viewに対して何パーセントの大きさにするかを設定、例えば70%なら0.7

c

位置に加えるオフセット
例えば親のビューの中心を基準にそろえるものの、それに対して常に30ポイントだけ正方向にずらしたい場合は30を設定する

拘束をソースコードで設定する

作った拘束を以下のメソッドでviewに追加する

view.addConstraint(aConstraint)

実際にソースコードで拘束を設定したものが以下のソース

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var localView: UIView!
    @IBOutlet weak var localButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // システムで勝手につけられる拘束を外す
        view.removeConstraints(view.constraints())
        
        // viewに対する拘束
        view.addConstraint(NSLayoutConstraint(item: localView,
            attribute: .Top,
            relatedBy: .Equal,
            toItem: view,
            attribute: .Top,
            multiplier: 1,
            constant: 40))
        view.addConstraint(NSLayoutConstraint(item: localView,
            attribute: .Left,
            relatedBy: .Equal,
            toItem: view,
            attribute: .Left,
            multiplier: 1,
            constant: 50))
        view.addConstraint(NSLayoutConstraint(item: localView,
            attribute: .CenterY,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterY,
            multiplier: 1,
            constant: 0))
        view.addConstraint(NSLayoutConstraint(item: localView,
            attribute: .CenterX,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterX,
            multiplier: 1,
            constant: 0))
        
        // buttonに対する拘束
        view.addConstraint(NSLayoutConstraint(item: localButton,
            attribute: .Baseline,
            relatedBy: .Equal,
            toItem: view,
            attribute: .Bottom,
            multiplier: 1,
            constant: -20))
        view.addConstraint(NSLayoutConstraint(item: localButton,
            attribute: .CenterX,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterX,
            multiplier: 1,
            constant: 0))

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

以下のようになる
f:id:tiro105:20150414144001p:plain