uikit storyboard에서 stackView의 Autolayout설정 시 요소 충돌 conflicting constraints

임혜정·2024년 6월 1일
0

UIKit storyboard에서 레이아웃을 그려나갈 때 노란 세모가 흔하게 발생하는 걸 볼 수 있다.
이 표시가 떴을 지라도 구동에 지장이 없고 시뮬레이터로 테스팅해봐서 크게 문제가 없으면 무시해도된다.

그러나 나는 이 표시가 떠있는 채로이면 기분이 별로다.
원인은 요소가 담긴 영역의 크기보다 요소들의 크기합이 커서 그렇다.

이런느낌,,? 좁아요...

비슷한 요소들을 뷰로 감싸주어야할 때 자주 발생한다.

나의 경우 텍스트 요소들을 스택뷰로 감싸서 하나의 덩어리로 만들어주고 그 덩어리에 한꺼번에 함수를 적용하고 싶었다.

그러나 의문인건 textContent라는 상위 뷰의 높이가 280이고 나머지요소들의 높이+간격을 다 합쳐도 280이 넘지않으며 가로 사이즈는 모두 동일했다. 도대체 왜 안 없어지는거지?

인스펙터의 distribution 쪽을 만져보다보니 해결되었는데 기본설정이 .fill으로 설정되어있었다.
이렇게 되면 안에 있는 요소들이 자동적으로 스택뷰를 가득채우도록 설정되는데 여기에 spacing을 주려하니 문제가 되었던 것이다.

결론적으로 이러한 경우 distribution을 .equalCentering으로 바꿔주면 해결된다.


distribution 메서드

각 요소들이 어떤 방식으로 뷰를 채울지를 설정하는 부분이다.

  1. .fill

    • 서브뷰가 가능한 한 스택뷰의 전체 공간을 채우도록 만들고 서브뷰가 스택뷰의 경계를 벗어나지 않도록 함.
    • 사용 예: 서브뷰의 크기가 고정되어 있고, 스택뷰의 모든 공간을 채우길 원하는 경우.

  2. .fillEqually

    • 모든 서브뷰가 동일한 크기를 가지도록 하고 스택뷰의 전체 공간을 고르게 분배
    • 사용 예: 서브뷰들이 동일한 크기를 가져야 하는 경우, 예를 들어 동일한 너비의 버튼들이 나열되는 경우.

  3. .fillProportionally

    • 서브뷰의 본래 크기에 비례하여 스택뷰의 공간을 분배한다. 각 서브뷰의 크기가 원래의 비율을 유지한다.
    • 사용 예: 서브뷰의 크기 비율을 유지하면서 스택뷰의 공간을 채우고 싶은 경우.

  4. .equalSpacing

    • 서브뷰 사이의 간격이 동일하도록 공간을 분배하고 서브뷰의 크기는 본래 크기를 유지한다
    • 사용 예시: 서브뷰 간의 간격이 일정해야 하는 경우, 일정한 간격을 두고 정렬된 레이블들.

  5. .equalCentering

    • 서브뷰의 중심이 동일한 간격을 두도록 배치하고 서브뷰 간의 간격은 동일하지 않을 수 있다
    • 사용 예: 서브뷰의 중심이 일정한 간격을 두고 정렬되어야 하는 경우, 예를 들어 균형 잡힌 시각적 배치를 원하는 경우.



인스펙터창을 건들지않고 코드로 잡아주고 싶을 경우


let stackView = UIStackView()
stackView.axis = .horizontal

// .fill
stackView.distribution = .fill
// 서브뷰가 가능한 한 스택뷰의 전체 공간을 채우도록 함

// .fillEqually
stackView.distribution = .fillEqually
// 모든 서브뷰가 동일한 크기를 가짐

// .fillProportionally
stackView.distribution = .fillProportionally
// 서브뷰의 본래 크기에 비례하여 공간을 분배함

// .equalSpacing
stackView.distribution = .equalSpacing
// 서브뷰 사이의 간격이 동일하도록 공간을 분배함

// .equalCentering
stackView.distribution = .equalCentering
// 서브뷰의 중심이 동일한 간격을 두도록 배치함
profile
오늘 배운걸 까먹었을 미래의 나에게..⭐️

0개의 댓글