auto-layout-visual-format-language-tutorial

raywenderlich에 아주 잘 설명이 되어 있어서 해당 글을 링크한다.

https://www.raywenderlich.com/110393/auto-layout-visual-format-language-tutorial

한편, 테스트를 해 보다가 몇 가지 사실을 알게 되었는데..

NSLayoutFormatOptions.AlignAllCenterX

CenterX라는 말에 현혹되지 말자. 이거만 보고 화면의 정 중앙에 UI들을 정렬해 주는 줄 알고 계속 삽질을 했다.

- 두 개 이상의 UI들이 UI를 정렬하되 UI들의 가운데를 기준으로 정렬한다는 의미이다. ppt에서 가운데 맞춤과 동일한 의미이다.

- 그러므로 하나의 UI에게 이 옵션을 주어보았자 영향이 없다.

- 절대 화면의 정 중앙으로 맞추지 않는다.

- 화면의 정중앙으로 맞추고 싶다면 제일 앞의 UI가 화면 정 가운데 정렬이 되어 있어야 한다.

- 이미지를 이미지 사이즈대로 나오게 하면서 화면의 가운데로 맞추고 싶다면 다른 UI가 화면의 중앙에 정렬이 되도록 맞추고 이 UI와 이미지를 CenterX로 설정하면 된다.

constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
    "H:|-[welcomeLabel]-|",
    options: [], metrics: nil, views: viewsDictionary))
constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-100-[welcomeImage]-[welcomeLabel(100)]",
    options: [NSLayoutFormatOptions.AlignAllCenterX], metrics: nil, views: viewsDictionary))

내가 사용한 샘플 코드들을 적어본다.

    let viewsDictionary = ["welcomeImage0": welcomeImageView[0], "welcomeImage1": welcomeImageView[1], "welcomeLabel0": welcomeLabel[0], "welcomeLabel1": welcomeLabel[1], "welcomeLabel2": welcomeLabel[2], "okButton": okButton,  "cancelButton": cancelButton]
    var constraints: [NSLayoutConstraint] = []
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[welcomeLabel0]-|",
        options: [], metrics: nil, views: viewsDictionary))
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|-100-[welcomeImage0(\((welcomeImage[0]?.size.height)!))]-[welcomeLabel0(100)]",
        options: [NSLayoutFormatOptions.AlignAllCenterX], metrics: nil, views: viewsDictionary))

    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:[welcomeLabel0]-[welcomeLabel1]-[welcomeLabel2]",
        options: [], metrics: nil, views: viewsDictionary))
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:[welcomeLabel0]-[okButton(93)]-[cancelButton(==okButton)]",
        options: [], metrics: nil, views: viewsDictionary))
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[welcomeLabel1]-[okButton(200)]-|",
        options: [NSLayoutFormatOptions.AlignAllCenterY], metrics: nil, views: viewsDictionary))
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[welcomeLabel2]-[cancelButton(==okButton)]-|",
        options: [NSLayoutFormatOptions.AlignAllCenterY], metrics: nil, views: viewsDictionary))

    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "V:[welcomeLabel2]-[welcomeImage1]|",
        options: [], metrics: nil, views: viewsDictionary))
    constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[welcomeImage1]-|",
        options: [], metrics: nil, views: viewsDictionary))

    NSLayoutConstraint.activateConstraints(constraints)