반응형
개발하는 정대리 개인 미션 과제
오토레이아웃을 StoryBoard 형식, No StoryBoard 형식, SnapKit 적용 형식 등 세 가지 방식으로 만든다.
StoryBoard 에서 오토레이아웃 적용
No StoryBoard 형식으로 오토레이아웃 적용
StoryBoard 에서 오토레이아웃을 적용한 것을 바탕으로 스토리보드 없이 코드로 만든 화면입니다.
SnapKit 사용 x
let scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.showsVerticalScrollIndicator = false
return view
}()
// ScrollView
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: guide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
scrollView.contentLayoutGuide.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
scrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
scrollView.contentLayoutGuide.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
scrollView.contentLayoutGuide.topAnchor.constraint(equalTo: containerView.topAnchor),
scrollView.frameLayoutGuide.widthAnchor.constraint(equalTo: containerView.widthAnchor, multiplier: 1)
])
SnapKit 사용
import SnapKit
import Then
// Then 사용
lazy var scrollView: UIScrollView = UIScrollView().then {
$0.showsVerticalScrollIndicator = false
$0.addSubview(contentView)
}
lazy var contentView: UIView = UIView().then {
$0.addSubview(titleLbl)
$0.addSubview(subTitleLbl)
$0.addSubview(logoImg)
$0.addSubview(stackView)
}
// ScrollView & ContentView
scrollView.snp.makeConstraints {
$0.edges.equalTo(self.view.safeAreaLayoutGuide.snp.edges)
}
contentView.snp.makeConstraints {
$0.edges.equalTo(scrollView.contentLayoutGuide.snp.edges)
$0.width.equalTo(scrollView.frameLayoutGuide.snp.width)
}
반응형
'Mobile > iOS' 카테고리의 다른 글
[iOS] SearchBar PlaceHolder 색상 변경 방법 (0) | 2023.05.31 |
---|---|
[Project] Mission 02 (0) | 2023.05.27 |
iOS 개발 꿀팁 사이트 (0) | 2023.05.17 |
[iOS] 커스텀 폰트 적용하는 방법 (코드UI) (0) | 2023.04.06 |
[iOS] UIKit 미리보기 기능 추가(Preview) (0) | 2023.04.01 |