StackView Auto Layout

윤주현·2023년 7월 7일
0

Auto Layout

목록 보기
3/8

StackView의 Elements의 크기가 StackView 프레임에 맞추려고 이상하게 늘어나는 문제가 발생했을때 해결하는 법 4가지.

1. 높이 직접 지정

// Hard coded heights
let height: CGFloat = 20
NSLayoutConstraint.activate([
    lengthCriteriaView.heightAnchor.constraint(equalToConstant: height),
    uppercaseCriteriaView.heightAnchor.constraint(equalToConstant: height),
    lowerCaseCriteriaView.heightAnchor.constraint(equalToConstant: height),
    digitCriteriaView.heightAnchor.constraint(equalToConstant: height),
    specialCharacterCriteriaView.heightAnchor.constraint(equalToConstant: height),
])

나중에 스택뷰에 새로운 뷰를 추가하거나 제거하기가 어렵다.

2. 뷰의 intrinsic contensize 변경

override var intrinsicContentSize: CGSize {
    return CGSize(width: 200, height: 160) // was 200
}

이것도 나중에 스택뷰에 새로운 뷰를 추가하거나 제거하기가 어렵다.

3. bottom anchor 지정하지 않기

override var intrinsicContentSize: CGSize {
return CGSize(width: 200, height: 200)
}

// Stack layout
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalToSystemSpacingBelow: topAnchor, multiplier: 2),
    stackView.leadingAnchor.constraint(equalToSystemSpacingAfter: leadingAnchor, multiplier: 2),
    trailingAnchor.constraint(equalToSystemSpacingAfter: stackView.trailingAnchor, multiplier: 2),
//            bottomAnchor.constraint(equalToSystemSpacingBelow: stackView.bottomAnchor, multiplier: 2)
])

새로운 뷰를 추가하고 제거하기 좋다. 하지만 뷰가 너무 많이 생기게 되면 컨텐뷰를 넘어가버릴 수 있다.

4. distribution 설정

stackView.distribution = .equalCentering

intrinsic content size를 유지하면서 각 뷰의 센터가 위의 그림처럼 동일하게 정렬되도록 한다.

0개의 댓글