Swift 3.0 – コードでAutoLayout

環境

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

スクリーンショット 2017-08-19 17.06.54.png

色々試す。

        // 青のビューの横幅は、親ビューの横幅と同じ
        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

スクリーンショット 2017-08-19 17.17.40.png

色々試す。

// 青のビューの横幅は、親ビューの横幅と同じ
        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

スクリーンショット 2017-08-19 17.18.41.png

全体コード

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()
    }


}
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事