코드베이스 오토레이아웃에 대한 질문입니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요. 현재 BMI앱을 코드베이스로 만들어보고 있는 수강생입니다!

코드베이스로 UI를 만드는 중에 궁금한 점이 생겨 질문드립니다.

private let heightLabel: UILabel = {
        let label = UILabel()
        label.text = "키"
        label.textAlignment = .center
        label.font = .boldSystemFont(ofSize: 15)
        label.frame.size.width = 40
        return label
    }()

horizontal 스택뷰내부에 TextField와 함께 넣어둔 레이블입니다. 위에 보시는 것처럼 label.frame.size.width = 40을 통해 저는 레이블의 너비를 정해주었습니다. 하지만 빌드한 결과는 스크린샷 2023-11-24 오후 7.35.33.png 다음 사진과 같았습니다.

그리고 계속 삽질하며 테스트해본 결과

NSLayoutConstraint.activate([
    heightLabel.widthAnchor.constraint(equalToConstant: 40)
])

이렇게 오토레이아웃을 통해서만 조절해줄 수 있었습니다.

제 질문을 정리해보자면,

코드베이스UI에서 프로퍼티의 클로저 내부에서 원래 크기조절을 할 수 없는 것인지 그리고 원래 NSLayoutConstraint내부에서 사이즈를 조절하는게 정석적인 것인지 궁금합니다.
사진에 보시는 것처럼 키의 텍스트필드만 줄어들고 몸무게의 텍스트필드는 정상적인데 양쪽의 프로퍼티 모두 동일하게 설정해주었는데 왜 이러는걸까요?

이렇게 2가지 입니다!

안녕하세요 Yetti 님!
지금 주신 질문 만으로는 아주 디테일하게 답변드리긴 어렵긴 합니다.

[1번 질문 관련]=============
(1) (키 + 텍스트필드) 스택뷰 + (몸무게 + 텍스트필드) 스택뷰로 만드신 것인지 /
(2) 그냥 스택뷰 한개에 키 + 텍스트필드 아래에는 몸무게 + 텍스트 를 정렬 시키신 것인지
알수가 없긴 합니다. (2번 방법으로 하셨다면 조금 잘못하셨어요. 스택뷰의 목적에 조금 어긋납니다.)

또한 스택뷰나 다른 뷰들의 정렬 상태와 스택뷰의
(1) 스택뷰 내부의 아이템들의 alignment / (2) distribution의 설정을 보지 않고
보여주신 부분만 가지고는 아주 디테일하게 답변드리기는 어려운 부분이 있긴하고....
(일반적으로 아래에 일반뷰를 깔아서 내부 레이블과 텍스트필드를 정렬시키거나, 스택뷰를 2개로 만들어야 할 것 같은데.. 어떻게 구현하신지 잘 모르겠네요.)

일단 답변을 드리자면
위의 두경우 무엇이 되었든 잘못되었다고 판단되는 부분은..
스택뷰의 경우 내부의 아이템들을 자동으로 오토레이아웃으로 잡아버립니다. 즉, 원래 내부의 아이템들을 자동으로 오토레이아웃을 잡아서 쓰려는 목적으로 사용하는 것이 스택뷰이기 때문이죠.

공식문서:
스택뷰 Stack view and Auto Layout 부분 참고
https://developer.apple.com/documentation/uikit/uistackview
에 보시면, "The stack view uses Auto Layout to position and size its arranged views."라고 나와있습니다. 스택뷰는 내부의 뷰들을 오토레이아웃으로 관리합니다.

즉, 그래서 여기서는
label.frame.size.width = 40 코드로 설정하셨더라도, (스택뷰에 넣었기 때문에) 스택뷰 자체가 오토레이아웃으로 관리를 하고 (즉, 프레임 설정 ---> 스택뷰에 넣었기 때문에 오토레이아웃이 우선시)
되어버리는 현상때문에 그렇고,
후에 오토레이아웃으로 설정을 추가하는 경우에는..
그것은 모든 오토레이아웃 제약 조건을 고려해서 설정되기 때문에 제대로 되는 것이겠죠.

[2번 질문 관련]=============
그리고 여기서 몸무게 레이블의 경우 40으로 설정된 것이 아닌 글자가 들어있기 때문에 글자의 intrinsic (본질) 사이즈를 고려해서 40처럼 보이는 것이 아닐까 합니다.
(스택뷰 공식 문서에서 보시면.. 오토레이아웃으로 관리될때 내부 뷰들의 본질 사이즈를 고려한다라고 되어 있습니다.)

참고하셔서 생각해보시면 될 것 같아요!

감사합니다. :)

인프런 커뮤니티 질문&답변