[AutoLayout] FirstBaseLineAnchor & LastBaseLineAnchor

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

오늘은 오토레이아웃과 관련되어있는 firstBaselineAnchor와 laseBaselineAnchor에 대해서 알아보겠습니다.
이 두 인스턴스 프로퍼티는 좌표값인 Y값과 관련되어있습니다.
그래서 타입이 NSLayoutYAxisAnchor 입니다.

먼저 firstBaselineAnchor부터 애플 문서를 살펴보도록 하겠습니다.
View에서 맨 위 텍스트 행의 기준선을 나타내는 레이아웃 앵커라고 되어있습니다.
처음에 읽어보면 쉽사리 감이 오지 않습니다. 저도 그랬습니다.
그럼 코드와 실행 결과로 한 번 살펴보도록 하겠습니다.

        let baseLabel = UILabel()
        baseLabel.text = "Base Label\nBase Label\nBase Label"
        baseLabel.lineBreakMode = .byWordWrapping
        baseLabel.numberOfLines = 0
        baseLabel.textColor = .label
        self.label = baseLabel
        view.addSubview(baseLabel)
        baseLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            baseLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,constant: 8),
        ])

        // newLabel 생성
        let newLabel = UILabel()
        newLabel.text = "new"
        newLabel.textColor = .label
        view.addSubview(newLabel)
        newLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            newLabel.leadingAnchor.constraint(equalTo: baseLabel.trailingAnchor,constant: 8),
            newLabel.topAnchor.constraint(equalTo: baseLabel.firstBaselineAnchor)
        ])

여기서 x와 y좌표는 잡아주었지만 크기를 안 잡아준 이유는 UILabel은 자기가 고유한 사이즈(Intrinsic Content Size)를 가지고 있기 때문입니다.
자 이렇게 코드를 작성하고 돌려보도록하겟습니다.

네비게이션바는 추후 실험을 위해 넣어두었으니 잠시 무시하셔도 됩니다.

이렇게 출력이 되는 군요.

조금 더 상세하게 살펴보겠습니다.

흠 잘 모르겠네요 여기서 선을 하나 그어보도록 하겠습니다

첫번째 줄에 있는 텍스트의 라인과 라벨의 top이랑 일치하네요.

View에서 맨 위 텍스트 행의 기준선을 나타내는 레이아웃 앵커라고 되어있는 이유를 조금 아시겠나요?

정말로 맨 위 텍스트행의 기준선을 나타내는 레이아웃이죠?

 

그럼 laseBaselineAnchor는 어떨까요?

애플 문서에는 View에서 맨 아래 텍스트 행의 기준선을 나타내는 레이아웃 앵커라고 되어있네요.

역시 이름이 비슷해서 그런지 설명도 비슷하게 적혀있네요.

아까 그 코드에서 다음처럼 바꿔봅시다.

        NSLayoutConstraint.activate([
            newLabel.leadingAnchor.constraint(equalTo: baseLabel.trailingAnchor,constant: 8),
//            newLabel.topAnchor.constraint(equalTo: baseLabel.firstBaselineAnchor)
            newLabel.topAnchor.constraint(equalTo: baseLabel.lastBaselineAnchor)
        ])

이번에도 실행결과를 살펴보도록 하겠습니다.

이번에도 선을 그어서 한 번 살펴보도록하겠습니다.

마지막 줄에 있는 텍스트의 라인과 라벨의 top이랑 일치하네요.

이번에도 역시나 맨 아래 텍스트행의 기준선을 나타내는 레이아웃 앵커이군요. 

 

참고로 텍스트가 한 줄 밖에 없으면  firstBaselineAnchor와 laseBaselineAnchor은 같은 값을 가지게 됩니다.

그리고 마지막으로 당연하지만 저 BaseLabel이 움직이면 저 new라벨 역시 움직이게 됩니다

그럼 끝 입니다.