[iOS - Swift] Auto Layout Constraint의 Priority에 대해서

Auto Layout은 사용자 인터페이스 요소들의 크기와 위치를 조절하는데 사용되는 메커니즘이다.

 

Apple 제품들만 봐도, 아이폰도 기종 별로 다양한 화면의 크기가 있다. 아이패드도 마찬가지이다.

이런 경우에 Auto Layout을 통해 다양한 디바이스 및 화면 크기에서 일관된 레이아웃을 유지할 수 있다.

 

스위프트에서 Auto Layout을 다룰 때 Constraint의 우선순위(Priority)는

해당 제약조건이 다른 제약조건과 어떤 순서로 적용되어야 하는지를 지정하는 역할을 한다.

우선순위는 제약조건들 사이의 충돌을 해결하고 원하는 레이아웃을 구성하는 데 도움을 준다.

 

예를 들어, 여러 제약조건이 서로 충돌하는 경우에 우선순위를 사용하여

어떤 제약조건을 더 중요하게 여길 지 결정할 수 있다.

더 낮은 우선순위를 가진 제약조건은 먼저 무시되거나 부분적으로 적용될 수 있다.

 

 

 

상황 별 우선순위(priority) 사용

 

 

1. 화면 크기 변경

화면 크기가 작아지는 경우, 덜 중요한 요소의 크기나 간격을 줄이고

더 중요한 요소는 유지하는 등의 우선순위를 조정하여 요소 별로 적절한 레이아웃을 유지할 수 있다.

 

만약 Horizontal StackView 안에 Label과 imageView가 있을 때,

label은 길이가 짧고 imageView는 크기가 큰 경우가 있을 수 있다.

 

이 때 더 중요한 것은 imageView의 크기를 유지하는 것이다.

 

그러므로 imageView의 가로 폭 제약에 더 높은 우선순위를 줘서

화면 크기가 작아지더라도 imageView의 크기는 작아지지 않도록 할 수 있다.

 

 

 

 

2. 디바이스 회전

우리는 보통 영상을 시청하거나 핸드폰으로 문서를 볼 때 디바이스의 방향을 변경시킨다.

이런 경우에 화면의 레이아웃이 어떻게 조정되어야 할지를 Priority를 통해 제어할 수 있다.

 

textField가 화면의 가운데에 위치하도록 하는 제약과

디바이스의 방향이 바뀔 때 화면 하단에 위치하도록 하는 제약이 충돌할 수 있다.

 

이런 경우에 회전에 따라 더 중요한 제약 조건을 설정하여 화면의 원하는 영역에 더 많은 우선순위를 부여할 수 있다.

 

 

 

 

3. 다양한 컨텐츠의 길이

다양한 길이의 텍스트나 이미지를 다룰 때, 우선순위를 사용하여

텍스트나 이미지의 크기가 너무 작아지지 않도록 조절할 수 있다.

 

textLabel 내용의 길이가 변경되거나 다른 언어로 표시될 때, 레이아웃이 깨질 수 있다.

특히 다국어 지원 시, textLabel의 폭이 충분하지 않아 텍스트가 짤리는 경우가 있다.

 

이런 상황에서는 textLabel의 폭을 충분히 확보하도록 레이아웃을 조절하고

더 중요한 레이아웃 요소에 높은 우선순위를 부여하여 해결할 수 있다.

 

 

 

 

Code로 보기 

수평으로 두개의 View를 가지고 있는 상황에서 하나의 View는 화면 크기가 줄어들더라도 크기를 유지하고자 할 때

 

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstView = UIView()
        firstView.backgroundColor = .black
        firstView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(firstView)
        
        let secondView = UIView()
        secondView.backgroundColor = .blue
        secondView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(secondView)
        
        // firstView의 폭을 secondView의 폭과 같게 설정
        let constraint1 = firstView.widthAnchor.constraint(equalTo: secondView.widthAnchor)
        // 우선순위 설정
        constraint1.priority = .defaultHigh
        constraint1.isActive = true
        
        // firstView의 높이 제약
        let constraint2 = firstView.heightAnchor.constraint(equalToConstant: 100)
        constraint2.isActive = true
        
        // secondView의 위치 제약
        let constraint3 = secondView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)
        let constraint4 = secondView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        constraint3.isActive = true
        constraint4.isActive = true
    }
}

 

constraint1은 firstView의 폭을 secondView의 폭과 같게 설정하고 있다.

그리고 constraint1의 우선순위를 defaultHigh로 설정하여, 화면 크기가 줄어들 때도 firstView의 폭이 유지되도록 한다.

이렇게 하면 화면이 작아져도 firstView의 폭은 축소되지 않는다.

 

 

 

 

우선순위(priority) 설정 시 주의할 점

 

1. 모호함 (Ambiguity) 문제

우선순위를 너무 낮게 설정하면 모호한 레이아웃이 발생하게 된다.

즉, 어떤 View의 크기나 위치가 모호해져 Auto Layout이 올바른 결정을 내릴 수 없는 상황이 된다. 

 

 

2. 순환 (Cycle) 문제

제약조건 사이에 순환적인 우선순위가 설정되면

Auto Layout 시스템이 해결할 수 없는 무한 루프에 빠지게 된다. 

이 때문에 앱이 멈추거나 크래시가 발생할 수 있다. 

 

 

3. 불일치 문제

우선순위를 설정해도 다른 제약조건 사이에서 충돌이 생길 수 있다. 

 

 

4. 보기의 비정상적인 동작 문제

너무 낮은 우선순위를 설정하거나 모순된 제약조건을 추가하면 View가 예상과 다르게 동작할 수 있다.

레이아웃이 예상치 못한 방식으로 변할 수 있다. 

 

 

5. 레이아웃 충돌

우선순위를 조절하면서도 원하는 레이아웃을 얻을 수 없는 상황이 발생할 수 있다.