UIKit - UIScrollView 사용하기
UIKit - UIScrollView 사용하기
이 게시글은
UIScrollView의 개념이 코드 베이스로UIScrollView를 사용하는 것을 기록함.
UIScrollView는 화면을 스크롤 하거나, 확대/축소할 수 있게 해줌.
UITableView,UICollectionView모두UIScrollView를 상속하고 있음.
TodoDetailView.swift
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import UIKit
class TodoDetailView: UIView {
// MARK: - UIScrollView 인스턴스 생성
private let scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
return scrollView
}()
// MARK: - UIScrollView에 적용시킬 ContentView 인스턴스 생성
private let contentView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
...
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
private func setupUI(){
...
self.addSubview(scrollView) // UIScrollView 추가
scrollView.addSubview(contentView) // UIScrollView에 ContentView 추가
// ContnetView 하위에 표시할 요소 추가
contentView.addSubview(todoTitleLabel)
contentView.addSubview(createdDateLabel)
contentView.addSubview(completedStackView)
contentView.addSubview(descriptionStackView)
// 오토레이아웃 설정
setupScrollView()
...
}
private func setupScrollView(){
NSLayoutConstraint.activate([
// UIScrollView 화면에 꽉 차게 설정
scrollView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: self.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
// ContentView UIScrollView 크기에 맞게 설정
contentView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor),
contentView.topAnchor.constraint(equalTo: self.scrollView.topAnchor),
contentView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor),
contentView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor)
])
}
...
private func setupDescriptionStackView(){
NSLayoutConstraint.activate([
displayDescriptionLabel.heightAnchor.constraint(equalToConstant: 30),
descriptionStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
descriptionStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
descriptionStackView.topAnchor.constraint(equalTo: completedStackView.bottomAnchor, constant: 30),
// UIStackView와 같이 동적으로 크기가 조정되는 요소는 UIScrollView에 표시되는 마지막 요소에는 bottomAnchor 설정이 필수적으로 필요함
descriptionStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -30)
])
}
}
결과
Reference
This post is licensed under CC BY 4.0 by the author.