100 days of Swift - Day 30(VFL)

VFL(Auto Layout Visual Format Language)

override func viewDidLoad() {
	super.viewDidLoad()
    
    let label1 = UILabel()
	label1.translatesAutoresizingMaskIntoConstraintsn = false
	label1.backgroundColor = UIColor.green
	label1.text = "These"
	label1.sizeToFit()

	view.addSubview(label1)
}

• label1.translatesAutoresizingMaskIntoConstraints = false
  • iOS는 기본적으로 뷰의 크기와 위치를 기반으로 Autolayout constraints를 생성하지는 우리가 코드로 작성할 것이기에 이 기능을 false로 비활성화한다.

let viewDictionary = ["label1": label1, "label2": label2, "label3": label3, "label4": label4, "label5": label5]

for label in viewDictionary.keys {
	view.addConstraints( NSLayoutConstraint.constraints(withVisualFormat: "H:|[\(label)]|", options: [], metrics: nil, views: viewsDictionary))
}

• views.addConstraints() : 뷰 컨트롤러에 제약조건 배열을 추가한다.
  • VFL은 한 번에 여러 제약 조건을 생성할 수 있기 때문에 이 배열이 자주 사용된다.
• NSLayoutConstraint.constraints(withVisualFormat:) : VFL을 제약 조건 배열로 변환하는 오토 레이아웃 메서드
  • 많은 매개변수를 가지지만 처음과 마지막이 가장 중요하다
• "H:|[label1]|" : 수평적으로 label1이 view의 가장자리에 가기를 원한다.
  • H : 수평(horizontal)의 레이아웃
  • | : view의 가장자리
  • [label1] : label1을 여기에 넣어라

=> 현재 수직(vertical) 레이아웃은 없기 때문에 모든 레이블이 view에서 수평적으로 edge에 맞게 배치되지만 모두 겹친다.

view.addConstraints( NSLayoutConstraint.constraints(withVisualFormat: "V:|[label1]-[label2]-[label3]-[label4]-[label5]", options: [], metrics: nil, views: viewsDictionary))

• V:|[label1]-[label2]-[label3]-[label4]-[label5]"
  • V : vertical
  • ' - ' : space 간격 (기본적으로 10이다)
  • 수직 VFL의 끝에는 '|'가 없기때문에 뷰의 가장자리(맨 밑)까지 늘어나지 않는다. 따라서 마지막 label뒤에 공백이 있을 것이다.