環境

Swift
Swift3.0
swift3
Xcode
Xcode8
aoutolayout AutoLayout

説明

Swift 3.0を使ってコードでAutoLayoutを表現してみる。大切なことはコードから読み取って欲しいが考え方を少し解説する。

override func viewDidLoad() {
        super.viewDidLoad()

        let blueView = UIView()
        blueView.backgroundColor = UIColor.blue
        blueView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(blueView)

上記では青いViewをコードで生成して親Viewに描画している。ここまでは良い。この青いViewにAutoLayoutを実装してみることにする。*CGRectを実装してないから実際には描画されない

実装

上記の青いViewを実装した直下の行に下記のコードを追加してみて欲しい。結果は下記の画像のように、青いViewがスマホ全体に表示されているのがわかる。

// 青のビューの横幅は、親ビューの横幅と同じ
blueView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 1).isActive = true

// 青のビューの縦幅は、親ビューの縦幅と同じ
blueView.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 1).isActive = true

実行

blueView.heightAnchor.constraintでblueViewの縦幅に対してconstraintを指定するよという意味。blueViewの縦幅はself.view.widthAnchorつまり親viewのwidthAnchor縦幅と同じmultiplier: 1とすることでblueViewの横幅は常に親Viewと同じ大きさになる。縦幅も同じ

色々試す。

        // 青のビューの横幅は、親ビューの横幅と同じ
        blueView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 1).isActive = true

        // 青のビューの縦幅は、親ビューの縦幅と同じ
        blueView.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 1/2).isActive = true

        // 青のビューの下部の位置は、親ビューの下部の位置と同じ
        blueView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

色々試す。

// 青のビューの横幅は、親ビューの横幅と同じ
        blueView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 1).isActive = true

        // 青のビューの縦幅は、親ビューの縦幅と同じ
        blueView.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 1/2).isActive = true

        // 青のビューの上部の位置は、親ビューの上部の位置と同じ
        blueView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

全体コード

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let blueView = UIView()
        blueView.backgroundColor = UIColor.blue
        blueView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(blueView)


        // 青のビューの横幅は、親ビューの横幅と同じ
        blueView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 1).isActive = true

        // 青のビューの縦幅は、親ビューの縦幅と同じ
        blueView.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 1/2).isActive = true

        // 青のビューの上部の位置は、親ビューの上部の位置と同じ
        blueView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

Swift 3.0 – コードでAutoLayout

環境

説明

実装

実行

色々試す。

色々試す。

全体コード

関連