코드로 Autolayout 적용하기 (Swift로 하는 autolayout) - 1

Autolayout를 사용하기 전 애플에서 제공하는 문서를 숙지 하는 것이 많은 도움이 된다. Visual Format Language(VFL)

VFL을 간단히 설명하면 뷰의 넓이와 높이 그리고 뷰끼리의 간격이나 여백을 정해진 규약으로 작성할 수 있는 언어다. 만약 뭔가가 문법이 틀리거나 문제가 생기면 콘솔에서 어디가 잘못되었는지 자세히 알려준다.


        // 1. 파란뷰 생성
        var blueView: UIView = UIView()
        blueView.setTranslatesAutoresizingMaskIntoConstraints(false)
        blueView.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
        
        // 2. 뷰에 추가
        self.view.addSubview(blueView)
        
        // 3. 뷰 딕셔너리 생성
        let viewsDictionary = ["blueView":blueView]
        
        // 4. 파란뷰의 크기 설정
        let blueConstaintV = NSLayoutConstraint.constraintsWithVisualFormat("V:[blueView(100)]",
            options: NSLayoutFormatOptions.allZeros,
            metrics: nil,
            views: viewsDictionary)
        let blueConstaintH = NSLayoutConstraint.constraintsWithVisualFormat("H:[blueView(100)]",
            options: NSLayoutFormatOptions.allZeros,
            metrics: nil,
            views: viewsDictionary)
        
        // 5. 뷰 정렬(가로)을 정의
        let constraintPosH = NSLayoutConstraint.constraintsWithVisualFormat("H:|-30-[blueView]",
            options: NSLayoutFormatOptions.allZeros,
            metrics: nil,
            views: viewsDictionary)
        // 6. 뷰 정렬(세로)을 정의
        let constraintPosV = NSLayoutConstraint.constraintsWithVisualFormat("V:|-130-[blueView]",
            options: NSLayoutFormatOptions.allZeros,
            metrics: nil,
            views: viewsDictionary)
        
        // 정의한 정렬을 적용
        blueView.addConstraints(blueConstaintV)
        blueView.addConstraints(blueConstaintH)
        
        self.view.addConstraints(constraintPosV)
        self.view.addConstraints(constraintPosH)

이 코드는 가로세로 100의 파란색 뷰를 top 30, left 30 의 여백을 가진 사각형의 뷰를 배치하는 코드이다. 뷰의 오토레이아웃을 코드로 적용할 땐 이런 순서를 가진다.

ios-autolayout-with-swift-1

1. 뷰를 생성한다. 생성시 setTranslatesAutoresizingMaskIntoConstraintsfalse로 설정한다. 뷰를 생성하면 기본으로 오토리사이징 마스크가 적용되어있다. 리사이징되는 뷰를 직접 제어위해 false로 한다.

2. 화면에 뷰를 더한다.

3. 뷰 딕셔너리를 생성하는데 용도는 아래에 있는 Visual Format에서 쓰일 값(뷰오브젝트 또는 수치)를 키값으로 쓰이기 위해 정의한다.

4. 뷰의 너비와 높이를 설정한다. 이때 views 파라미터에 위에서 생성한 뷰 딕셔너리를 넣어야한다. 옵션은 아무것도 하지 않기 때문에 NSLayoutFormatOptions.allZeros 를 사용한다.

**5. 뷰의 정렬하는 규칙을 정의한다. 가로를 정의할 땐 ‘H’, 세로를 정의할 땐 ‘V’로 시작한다. 가로 100, 세로 200의 길이를 정의한다면 가로는 V:[view(100)], 세로는 H:[view(200)] ‘는 뷰의 끝을 의미한다. 예를 들어 H:|-30-[view] 는 왼쪽 끝에서 30 의 여백을 두고 view를 위치하겠다는 의미이다.**