[AutoLayout] leading, trailing, left, right

안녕하세요. 밀쿄 입니다.

오늘은.leading, trailing, left, right에 대한 이야기를 해볼려고 합니다.

사실 지난번부터 AutoLayout에 대한 이야기를 많이 올리고 있습니다.

아마 코드로 뷰 짜는 방법에 대한 포스팅을 빌드업이라고 생각하시면 될 것 같습니다

그럼 바로 시작하겠습니다.

다들 leading, trailing, left, right를 어떻게 사용하고 있나요?

저는 몇달전까지는 아무 생각없이 아무 구분없이 사용하고 있었는데요. 

그럴만한게 leading과 left 아무꺼나 써도 왼쪽에서 출력이 되기 때문입니다.

다음 코드를 보겠습니다.

let label = UILabel()
label.text = "Leading"
label.textColor = .label
view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
])

let label2 = UILabel()
label2.text = "Left"
label2.textColor = .label
view.addSubview(label2)
label2.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label2.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor),
    label2.topAnchor.constraint(equalTo: label.firstBaselineAnchor)
])

어떤 결과가 나올까요?

위 사진과 같은 결과물을 얻을 수 있습니다.

같은 코드처럼 작동합니다. 

하지만 이 앱에 아랍어를 지원한다고 추가하고 아랍어의 환경에서 돌리면 어떻게 출력이 될까요?

이번에 사뭇 결과가 다릅니다.

Leading이란 라벨은 오른쪽으로 가버렸고 Left는 여전히 왼쪽에 존재합니다.

여기서 우리는 Leading과 Left는 다르다는 것을 인지할 수 있습니다.

Left는 단순히 사용자가 바라보는 뷰의 왼쪽을 가리킵니다.

하지만 Leading은 단순히 왼쪽이 아니라 글자가 시작하는 방향을 가리킵니다.

(제가 아랍어를 할 줄 몰라서 Leading이라고 그냥 적어놔서 헷갈릴 수 있지만 아랍어는 오른쪽에서 왼쪽으로 읽어야합니다.)

대다수 언어가 왼쪽에서 오른쪽으로 글자를 작성하므로 마치 Leading과 Left가 동일한 것처럼 보이지만

아랍어같이 글자가 오른쪽에서 시작하는 언어권으로 가버리면 그 두개는 다르게 동작합니다.

 

trailing과 right도 마찬가지 입니다.

위에 코드에서 leading 부분을 trailing으로 left부분을 right로 바꿔봅시다.

다음 두 장의 사진을 보겠습니다

한국어 환경에서 trailing과 right

아랍어 환경에서 trailing과 right

Right는 마찬가지로 단순히 사용자가 바라보는 뷰의 오른쪽을 가리킵니다.

하지만 trailing은 단순히 오른쪽이 아니라 글자가 끝나는 방향을 가리킵니다.

(제가 아랍어를 할 줄 몰라서 trailing이라고 그냥 적어놔서 헷갈릴 수 있지만 아랍어는 오른쪽에서 왼쪽으로 읽어야합니다.)

 

요약하면

글자가 반대인 나라의 언어를 지원하는 다국어 어플의 경우 유의해서 코딩해야한다.

 leading과 left 은 다르고 마찬가지로 trailing과 right도 다르다.