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