Label Layout 기기별 대응 - siwonkim0/ios-project-manager GitHub Wiki

빈 뷰를 활용하여 레이블이 줄어드는 현상 해결

스택뷰의 Leading쪽으로 컴포넌트(label)들을 몰아야했지만 스택뷰의 공간이 남아 두 컴포넌트가 스택뷰를 전부 차지하는 상황이 발생했다.

이를 해결하기 위해 Spacer(빈 뷰)를 넣어 스택뷰의 남는 공간을 차지하게 하였다.

문제 상황

컴포넌트들을 leading 쪽으로 몰기 위해 스택뷰의 traling과 셀의 trailing 사이에 간격을 길게 줬다.

stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -200)

그러나 간격(constraint)이 고정되어있어 화면이 작아지면 DOING 레이블이 줄어들어서 DO... 가 되기에 모든 기기에 대응하지 못했다.

1차 시도

스택뷰 안에 DOING 레이블의 CompressionResistancePriority를 높여서 화면이 줄어들때 레이블이 줄어들지 못하도록 하려 했으나 실패했다.

실패한 이유는 trailing에 준 간격(constraint)이 고정되어있기 때문이었다.

해결

스택뷰의 trailing과 셀의 trailing 사이에 간격 대신에 빈 뷰를 스택뷰에 넣고 HuggingPriority와 CompressionResistancePriority를 애플이 제공하는 Priority중 가장 낮은 값인 fittingSizeLevel로 두어 화면이 작아지고 커질 때 빈 뷰가 줄어들고 늘어나게 하여 레이블이 줄어드는 것을 해결했다

let spacerView: UIView = {
    let view = UIView()
    view.setContentHuggingPriority(.fittingSizeLevel, for: .horizontal)
    view.setContentCompressionResistancePriority(.fittingSizeLevel, for: .horizontal)
    return view
}()

레이블의 텍스트를 길게 적어도 숫자 레이블이 안깨지는 모습을 볼 수 있다.