[내일배움캠프] 260325 TIL - 오토레이아웃 우선순위

트러블슈팅

문제1: UIStackView의 ImageView가 늘어나는 현상

마지막 작은 카드뷰의 타이틀을 나타내는 StackView에 arrange된 ImageView의 크기가 늘어나는 현상

원인: 우선순위 미설정

StackView의 우선순위가 설정되어있지 않아 ImageView와 Label 중 하나가 무작위로 width 크기가 변경된 것이 원인

해결: 우선순위 설정

class SymbolLabelStack: UIStackView {
	init(symbol: String, symbolColor: UIcolor, label: UILabel) {
    	...
        
        symbol.setContentHuggingPriority(.required, for: .horizontal) // 고유 크기를 지킬 우선순위 (높을수록 크기를 지킴)
        symbol.setContentCompressionResistancePriority(.required, for: .horizontal) // 압축될 대상의 우선순위 (높을수록 고유 크기를 지킴)

	...
	}
}

HuggingPriority와 CompressionResistancePriority를 설정하였음

정상 출력을 확인

문제2: ChartView가 아닌 AlarmCardView가 늘어나는 현상

ChartView의 높이가 가변이었으면 좋겠는데 그 위의 AlarmCardview의 높이가 늘어남

원인: 우선순위 미설정

각 뷰 별로 동일한 우선순위를 가지고 있어 문제1과 동일하게 무작위 객체의 높이가 늘어남

해결 시도: 고정크기 부여하기

// lessThanOrEqualTo: 이슈 상황과 동일 결과
chartView.view.snp.makeConstraints {
	$0.height.lessThanOrEqualTo(255)
}

// greaterThanOrEqualTo: 원하던대로 출력되나 오토레이아웃 에러 발생, 높이 255에서 변하지 않음
chartView.view.snp.makeConstraints {
	$0.height.greaterThanOrEqualTo(255)
}

// equalTo: 원하던대로 출력되나 오토레이아웃 에러 발생
chartView.view.snp.makeConstraints {
	$0.height.equalTo(255)
}

3가지의 방법을 모두 시도해보았으나 해결되지 않았다.
겉으로는 해결된듯 보여도, UI 디버깅 시 보라색 에러가 발생했다.

오토레이아웃은 방정식의 형태로 값들이 구해진다고 한다.

greaterThanOrEqualTo 혹은 lessThanOrEqualTo는 고정값을 부여하는듯하지만 부등호 형식으로 값을 알려주는 것과 동일하다.

따라서 해당 값으로는 방정식의 답이 도출되지 않는 상황이기에, 우선 기준값으로 던져준 255를 height값으로 사용한 것 같다.

그럼 왜 255일 때는 에러가 발생할까..

사진을 보면, 차트뷰는 의도한대로 나오지만 최상단의 타이틀뷰가 일부 잘린 것을 볼 수 있다.

이미 다른 오토레이아웃들이 설정되어있었는데, 고정값이 255로 설정되면서 컨텐츠들이 필요한 높이가 부족해지는 상황이 되어버린 것이다.

(최하단의 카드뷰가 bottom.equalTo(safeAreaLayoutGuide).inset(20)으로 잡혀있기 때문에 컨텐츠가 들어가는 전체 높이는 한정되어있는 상태인데, 차트 높이가 255가 되면서 다른 컨텐츠들이 필요한 높이를 침범해버려 보라색 에러가 발생했다.)

해결: chartView에 우선순위 부여

chartView.view.snp.makeConstraints {
	$0.height.equalTo(255).priority(.low)
}

View들은 기본적으로 동일한 우선순위를 가지고 있다.

따라서 공간이 부족하거나 남는 상황이 발생하면 동일한 우선순위에서는 컴파일러가 무작위 객체를 선택하여 높이나 길이를 변화시켜버린다.

View들 사이에서 chartView의 우선순위를 낮춰버리면 무작위 객체가 아닌 chartView의 높이를 조절함으로써 다른 View들의 공간을 확보할 수 있다.

위 방법 말고도 아래와 같이 chartView의 우선순위를 조절할 수도 있다.

let chartView = UIHostingController(rootView: ChartView()).then {
	$0.sizingOptions = .intrinsicContentSize // 우선순위에 따라 사이즈 변경 시 고유 사이즈 무시
    $0.view.setContentHugginPriority(UILayoutPriority(249), for: .vertical) // 우선순위
}

intrinsicContentSize
The hosting controller’s view automatically invalidate its intrinsic content size when its ideal size changes.
-> 이상적인 사이즈가 변화할 때 hosting controller의 뷰는 자동적으로 자신의 고유한 컨텐츠 사이즈를 무효화한다.

에러도 안 뜨고 정상적으로 출력되는 것을 확인