[iOS] left constraint와 leading constraint의 차이

 

Apple 공식 문서에서 데려온 캡쳐본으로,

Apple은 공식적으로 left/right constraint 보다 leading/trailing의 사용을 권장하고 있죠!

 

left/right constraint vs leading/trailing constraint

우선 left/right은 사용자가 보는 화면상의 왼쪽과 오른쪽 위치 속성이에요.

반면에 leading/trailing은 reading direction의 시작과 끝을 나타내는 위치 속성이랍니다.

 

reading direction?

우리가 주로 사용할 줄 아는 언어(한국어, 영어)는 글을 왼쪽 → 오른쪽 순으로 읽죠?

이렇게 읽는 방향을 'reading direction'이라고 하는데 default reading direction은 사용자가 설정한 언어에 의해 영향을 받아요.

지금 우리가 핸드폰에 설정해놓은 언어가 한국어고 영어기 때문에 왼쪽에서 오른쪽으로 글자가 나타나는거에요.

 

하지만 아랍권이라면? 아랍권은 left-to-right script를 차용하고 있기 때문에 아래 사진처럼 글을 읽게 되죠.

 

글을 읽는 순서가 다르면 당연히 사용자 경험도 달라지기 때문에 아래와 같이 다른 UI를 만나게 되죠.

Horizontal scroll을 하는 방향이라던지, 버튼의 위치 등이 모두 아래 그림처럼 다를겁니다.

제가 짜 놓은 예시 코드를 보며 left와 leading의 차이가 무엇인지 명확히 짚고 넘어가보죠!

글을 읽는 방향은 사용자 경험의 차이도 만든답니다!

Example

아래와 같이 "Hello"가 적힌 label과 "Press"가 적힌 button을 수평으로 놓고 50만큼 띄워놓았어요. (localize 파일 따로 작성)

final class ViewController: UIViewController {

    // MARK:- Views
    private var label: UILabel = {
        let label = UILabel()
        label.text = NSLocalizedString("Hello", comment: "constraint ex1")
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private var button: UIButton = {
        let button = UIButton()
        let pressLocalize = NSLocalizedString("Press", comment: "constraint ex2")
        button.setTitle(pressLocalize, for: .normal)
        button.backgroundColor = .black
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    // MARK:- Lifecycle methods
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // add subviews
        view.addSubview(label)
        view.addSubview(button)
        
        // define constraints
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10),
            label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
            button.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: 50),
            button.lastBaselineAnchor.constraint(equalTo: label.lastBaselineAnchor)
        ])
    }

}

언어설정을 각각 '영어'와 '아랍어'로 했을 때 아래와 같은 차이점이 생겨요.

label의 leadingAnchor는 view의 leadingAnchor에,

button의 leadingAnchor는 label의 trailingAnchor보다 50 떨어진 위치에 존재하도록 제약사항을 걸었습니다.

코드를 읽으면 당연히 label은 왼쪽에 붙어 있을 것이고, button은 50 떨어진 위치에 있겠지~ 라고 생각하겠지만,

아랍권 사람들은 leading이 오른쪽이라서 label은 오른쪽에 붙어있고 그로부터 50 떨어진 위치에 button을 기대할거에요.

 

 

자 만약 leading, trailing이 아닌 left, right으로 코드를 변경하면 어떻게 될까요?

예상하시겠지만 아랍권의 label과 button이 영어권과 똑같이 나타날거에요.

아래와 같이 코드를 고쳤을 때 어떻게 바뀌는지 보시죠!

final class ViewController: UIViewController {
   
   ...
   
   override viewDidLoad() {
   		super.viewDidLoad()
        
        ...
        
        NSLayoutConstraint.activate([
            label.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor, constant: 10),
            label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
            button.leftAnchor.constraint(equalTo: label.rightAnchor, constant: 50),
            button.lastBaselineAnchor.constraint(equalTo: label.lastBaselineAnchor)
        ])
   }

}

 

leading, trailing으로 설정해주면 알아서 위치를 flip을 해준답니다.

그렇기 때문에 Apple 에서도 left/right 대신 leading, trailing을 권하죠.

하지만 만약 아랍권에서도 쓸 애플리케이션의 어떤 UI component가 어떤 일이 있어도

화면상의 왼쪽 또는 오른쪽에 붙어있길 바란다면 그 땐 left, right constraint를 걸어줘야겠죠?

 

출처

Anatomy of a Constraint