[내일배움캠프] 260326 TIL - 오토레이아웃

트러블슈팅

문제: 의도하지 않은 뷰의 높이가 늘어나는 현상

어제 그 문제가 다시 발생...

카드뷰를 생성하여 카드뷰 위에 차트뷰를 올리고, 카드뷰의 우선순위를 낮춰주었는데 의도한대로 동작하지 않음

final class HomeMainView: UIView {
	private let chartBaseCardVIew = BaseCardView().then {
    	$0.setContentHuggingPriority(UILayoutPriority(249), for: .vertical)
    }
    
    let chartHostingController = UIHostingController(rootView: ChartVIew())
    
    private func setLayout() {
    	addSubview(chartBaseCardView)
    	chartBaseCardView.addSUbview(chartHostingController.view)
    
    	chartBaseCardView.snp.makeConstraints {
            	$0.top.equalTo(chartViewTitle.snp.bottom).offset(10)
            	$0.horizontalEdges.equalTo(safeAreaLayoutGuide).inset(20)
        }
        
        chartHostingController.view.snp.makeConstraints {
            $0.top.equalToSuperview().offset(20)
            $0.horizontalEdges.equalToSuperview().inset(15)
            $0.bottom.equalToSuperview().inset(10)
        }
    }
}

chartHostingController.view(차트뷰)는 카드뷰에 오토레이아웃을 걸어뒀으니 카드 크기만큼 크기가 결정되고, 카드 크기는 MainView에 배치될 뷰 중에 가장 우선순위가 낮으니 남는 공간만큼 카드뷰의 크기가 결정될 것이라고 생각했다.

그런데! 의도와 달리 또 다른 녀석이 늘어나버림

원인: 잘못된 우선순위 설정

알고보니 고유 크기(intrinsic Size)를 가지고 있는 객체가 subview로 존재할 경우, 해당 우선순위를 따라간다고 한다.

오토레이아웃은 위에서 내가 예상했던 방식(남는 공간에 크기를 할당하고, 그 크기에 subView를 배치)으로도 동작하는 동시에, subView의 고유 크기도 고려한다고 한다.

UIView나 UIStackView같은 경우에는 가지고 있는 고유크기가 없어서 상관없지만, 차트뷰의 경우 본인이 가지고 있는 고유 크기가 있기 때문에 오토레이아웃은 해당 크기를 고려하게 된다.

하지만 현재 메인 뷰에서는 그 고유크기 만큼의 딱 맞는 공간이 존재하지 않고, 줄이거나 늘려야한다.

그러면 어떤걸 줄이고 어떤걸 늘려야할까?
-> 여기서 컴파일러는 우선순위를 살펴본다.

배경이 되는 카드뷰의 우선순위는 249로 낮지만, 그 안의 subView인 차트뷰의 우선순위는 여전히 250으로 메인 뷰에 배치될 다른 뷰들과 우선순위가 동일하다.

컴파일러는 '차트뷰의 크기' 때문에 우선순위를 살펴보고 있으니 차트뷰의 우선순위를 보는데, 얘는 우선순위가 다른 뷰들이랑 동일하네?
-> 아무거나 바꾸자!

라는 결론이 내려져서 이상한 레이아웃이 만들어진 것이다..

해결: subView의 우선순위 설정

final class HomeMainView: UIView {
	private let chartBaseCardView = BaseCardView()
    let chartHostingController = UIHostingController(rootView: CHartView()).then {
    	$0.sizingOptions = .intrinsicContentSize
        $0.view.setContentHugginPriority(UILayoutPriority(249), for: .vertical)
    }
}

카드뷰의 우선순위는 삭제하고 차트뷰의 우선순위를 249로 부여해주었다.
카드뷰는 차트뷰의 크기에 마진을 더한 크기로 알아서 결정될 것이므로 우선순위를 부여해주지 않아도 된다.

정상 작동 확인