タコさんブログ

プログラミングメモと小言

Auto Layout + Superview's Ratio + Swift code

AutoLayoutで比を使う

SwiftのコードでUIView(aView)を生成して、以下の制約をコードでつけます。

  • ViewController.view の width : aView の width = 3 : 1
  • ViewController.view の height : aView の height = 4 : 1

どんなディスプレイサイズになっても、上記の比は保たれます。 (回転させて、比が保たれていればOKということ)

  • 完成したのがこちら:

f:id:tiny_wing:20141215235240p:plain

f:id:tiny_wing:20141215235242p:plain

  • viewDidLayoutSubviews内に以下のコードを書きます
// viewDidLayoutSubviews
// viewを生成
let aView = UIView()
// 背景画像を青くする
aView.backgroundColor = UIColor.blueColor()
// Auto Layout 使用時にはfalseに設定する
aView.setTranslatesAutoresizingMaskIntoConstraints(false)
// 制約をつける前にaddしなければならない
self.view.addSubview(aView)
        
// width の制約
let constraintWidth = NSLayoutConstraint(item: aView, attribute: .Width, relatedBy: .Equal, toItem: self.view, attribute: .Width, multiplier: 1.0 / 3.0, constant: 0.0)
// height の制約
let constraintHeight = NSLayoutConstraint(item: aView, attribute: .Height, relatedBy: .Equal, toItem: self.view, attribute: .Height, multiplier: 1.0 / 4.0, constant: 0.0)
// X中央寄せ
let constraintHorizontal = NSLayoutConstraint(item: aView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1.0, constant: 0.0)
// Y中央寄せ
let constraintVertical = NSLayoutConstraint(item: aView, attribute: .CenterY, relatedBy: .Equal, toItem: self.view, attribute: .CenterY, multiplier: 1.0, constant: 0.0)
        
let constraints = [constraintWidth, constraintHeight, constraintHorizontal, constraintVertical]
// 制約をつける
self.view.addConstraints(constraints)