일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 커스텀 뷰
- Swift Package Manager
- priority
- 라이브러리
- LeetCode 1
- 비동기
- 리액터킷
- email regex
- CornerRadius
- onAppear
- 코코아팟 만들기
- ios
- Custom View
- viewAppear
- view modifier
- Remote Url
- Two Sum
- compression resistance
- hugging
- UINavigationController
- Delegate Pattern
- 뷰 커스텀
- Cocoapods
- ReactorKit
- DispatchQueue
- 코코아팟
- Swift
- 델레게이트
- imageView shadow
- autoLayout
- Today
- Total
Tong's Blog
[iOS] Content Hugging 와 Compression Resistance 에 대해 (1) 본문
안녕하세요.
오늘은 iOS AutoLayout 에서 항상 빠지지 않고 나오는 개념인 Content Hugging Priority 와 Content Compression Resistance Priority 에 대해 알아보려고 합니다.
사실 엄청 어려운 개념은 아니지만 개인적으로 자주 쓰지 않고 깊게 생각하지 않으면 쉽게 헷갈리기 때문에 이번 기회에 한번 정리해보고자 합니다.
항상 참고하는 Apple Developer 에서 해당 개념을 찾아보겠습니다. 오늘은 2가지를 설명하기 떄문에 2가지 링크가 걸리겠네요.
Content Hugging Priority
https://developer.apple.com/documentation/uikit/uiview/1622556-contenthuggingpriority
Returns the priority with which a view resists being made larger than its intrinsic size.
hugging priority 는 해당 view 가지는 intrinsic size(고유 크기) 보다 커지지 않도록하는 우선순위라고 하네요.
커지지 않도록 하는 우선순위라.. 딱 들었을 때는 와닿지 않는데 예시를 통해서 알아 보겠습니다.
우선 서로의 leading 과 trailing 에 constraint 를 가진 두개의 label 를 선언해보겠습니다. (Ex: 제품과 가격)
private func setUp() {
nameLabel.text = "Tong"
nameLabel.font = .boldSystemFont(ofSize: 30)
nameLabel.backgroundColor = .black
nameLabel.textColor = .white
nameLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(nameLabel)
priceLabel.text = "1,000원"
priceLabel.font = .boldSystemFont(ofSize: 30)
priceLabel.backgroundColor = .gray
priceLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(priceLabel)
NSLayoutConstraint.activate([
nameLabel.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor, constant: 10),
nameLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10),
priceLabel.topAnchor.constraint(equalTo: nameLabel.topAnchor),
priceLabel.leadingAnchor.constraint(equalTo: nameLabel.trailingAnchor, constant: 10),
priceLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10)
])
}
그러면 아래와 같이 뷰가 보이네요.
각 label 의 너비가 정해지지 않았을 때 남는 공간을 지금은 nameLabel(Tong) 크기가 나머지 크기를 가지고 있습니다.
따로 hugging priority 를 설정하진 않았으니 두 label 의 prority 는 같겠지만 시스템 자체적으로 nameLabel 의 크기를 조정한거 같습니다.
이대로 원하는 UI / UX 가 만족된다면 상관없겠지만 만약 priceLabel(1000원) 이 제품 바로 다음에 오게하려면 어떻게 해야할까요?
nameLabel 은 크기는 텍스트 사이즈에 맞춰지고 priceLabel 이 나머지 영역을 채우면 될 것 같습니다.
사실 더 쉬운 방법은 아래의 코드를 지워도 해결은 되겠지만 만약 label의 텍스트가 많아진다면 글자가 넘치게될테니 좋은 UI 가 될 수 없겠죠
priceLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10)
이 때 위에서 설명한 내용을 다시 가져오겠습니다.
"intrinsic size(고유 크기) 보다 커지지 않도록하는 우선순위"
위에 경우가 intrinsic size 는 텍스트에 딱맞는 label 의 사이즈입니다.
우리는 nameLabel이 더 커지지 않기를 바라기 때문에 해당 우선순위를 높인다는 말은 사이즈가 텍스트보다 더 커지지 않게 하겠어! 라는 뜻이 됩니다.
그래도 쉽지 않은 개념인데 코드에서 적용해볼게요.
우선 현재의 각 hugging priority가 얼마인지 알아야겠죠?
let huggingPriority = nameLabel.contentHuggingPriority(for: .horizontal)
print(huggingPriority)
// print 결과:
// UILayoutPriority(rawValue: 250.0)
// priceLabel 도 동일
위 코드 중간에 해당 print 문을 해주시고 결과를 보면 250이라는 값으로 설정되어 있음을 알 수 있습니다.
그렇다면 우리가 원하는 건 nameLabel 이 사이즈가 더 커지지 않고 싶으니 해당 우선순위를 높여주면 되겠습니다.
nameLabel.setContentHuggingPriority(.init(rawValue: 251), for: .horizontal)
그러면 아래와 같은 결과물을 얻을 수 있습니다.
nameLabel 이 커지지 않는 우선순위, 즉 hugging priority 가 더 높아져서 본인의 크기를 유지하고 우선순위가 낮은 priceLabel 은 본인의 크기를 유지하지 못하고 커진 것을 확인할 수 있습니다.
사실 저도 자주 헷갈리는 개념인데 직접 코드를 작성하면서(혹은 스토리보드에 적용하며) 하다보면 금방 이해가 되실거 같습니다.
다음 포스트에서는 Compression Resistance Priority 에 대해 마저 설명드리겠습니다.
오늘도 글 읽어주셔서 감사합니다.
전체코드 첨부합니다.
import UIKit
class ViewController: UIViewController {
let nameLabel = UILabel()
let priceLabel = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setUp()
}
private func setUp() {
nameLabel.text = "Tong"
nameLabel.font = .boldSystemFont(ofSize: 30)
nameLabel.backgroundColor = .black
nameLabel.textColor = .white
nameLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(nameLabel)
priceLabel.text = "1,000원"
priceLabel.font = .boldSystemFont(ofSize: 30)
priceLabel.backgroundColor = .gray
priceLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(priceLabel)
let huggingPriority = nameLabel.contentHuggingPriority(for: .horizontal)
print(huggingPriority)
nameLabel.setContentHuggingPriority(.init(rawValue: 251), for: .horizontal)
NSLayoutConstraint.activate([
nameLabel.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor, constant: 10),
nameLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10),
priceLabel.topAnchor.constraint(equalTo: nameLabel.topAnchor),
priceLabel.leadingAnchor.constraint(equalTo: nameLabel.trailingAnchor, constant: 10),
priceLabel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10)
])
}
}
'iOS' 카테고리의 다른 글
[iOS] Content Hugging 와 Compression Resistance 에 대해 (2) (0) | 2023.02.23 |
---|---|
[iOS] 라이브러리 만들기 (2) - Cocoapods 라이브러리에 SPM 이식하기 (0) | 2021.01.02 |
[iOS] 라이브러리 만들기 (1) - Cocoapods 프로젝트 생성 (0) | 2020.12.26 |