UIKit storyboard에서 레이아웃을 그려나갈 때 노란 세모가 흔하게 발생하는 걸 볼 수 있다.
이 표시가 떴을 지라도 구동에 지장이 없고 시뮬레이터로 테스팅해봐서 크게 문제가 없으면 무시해도된다.
그러나 나는 이 표시가 떠있는 채로이면 기분이 별로다.
원인은 요소가 담긴 영역의 크기보다 요소들의 크기합이 커서 그렇다.
이런느낌,,? 좁아요...
나의 경우 텍스트 요소들을 스택뷰로 감싸서 하나의 덩어리로 만들어주고 그 덩어리에 한꺼번에 함수를 적용하고 싶었다.
그러나 의문인건 textContent라는 상위 뷰의 높이가 280이고 나머지요소들의 높이+간격을 다 합쳐도 280이 넘지않으며 가로 사이즈는 모두 동일했다. 도대체 왜 안 없어지는거지?
인스펙터의 distribution 쪽을 만져보다보니 해결되었는데 기본설정이 .fill으로 설정되어있었다.
이렇게 되면 안에 있는 요소들이 자동적으로 스택뷰를 가득채우도록 설정되는데 여기에 spacing을 주려하니 문제가 되었던 것이다.
결론적으로 이러한 경우 distribution을 .equalCentering으로 바꿔주면 해결된다.
각 요소들이 어떤 방식으로 뷰를 채울지를 설정하는 부분이다.
.fill
• 서브뷰가 가능한 한 스택뷰의 전체 공간을 채우도록 만들고 서브뷰가 스택뷰의 경계를 벗어나지 않도록 함.
• 사용 예: 서브뷰의 크기가 고정되어 있고, 스택뷰의 모든 공간을 채우길 원하는 경우.
.fillEqually
• 모든 서브뷰가 동일한 크기를 가지도록 하고 스택뷰의 전체 공간을 고르게 분배
• 사용 예: 서브뷰들이 동일한 크기를 가져야 하는 경우, 예를 들어 동일한 너비의 버튼들이 나열되는 경우.
.fillProportionally
• 서브뷰의 본래 크기에 비례하여 스택뷰의 공간을 분배한다. 각 서브뷰의 크기가 원래의 비율을 유지한다.
• 사용 예: 서브뷰의 크기 비율을 유지하면서 스택뷰의 공간을 채우고 싶은 경우.
.equalSpacing
• 서브뷰 사이의 간격이 동일하도록 공간을 분배하고 서브뷰의 크기는 본래 크기를 유지한다
• 사용 예시: 서브뷰 간의 간격이 일정해야 하는 경우, 일정한 간격을 두고 정렬된 레이블들.
.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
// 서브뷰의 중심이 동일한 간격을 두도록 배치함