1. TableViewCell 동적 높이 조절
TableView를 프로젝트에 활용을 하다보면 Cell에 대해서 고민을 많이 하게된다. 이번 프로젝트를 진행하면서 겪었던 고민은 Cell 높이 이다. 그동안은 간단하게 Label만 들어가서 기본 높이로 진행을 해도 상관이 없었다. 그렇지만 여러개의 Label과 ImageView가 들어가야 하면서 Cell의 높이를 정해줘야 했다.
1-1. 정확한 수치로 높이 조절
우선 정확한 수치를 입력하여 강제로(?) 높이를 조절해보자. UITableViewDelegate의 tableView(_:heightForRowAt:) 메서드를 사용하면 된다.
https://developer.apple.com/documentation/uikit/uitableviewdelegate/1614998-tableview
extension NoticeBoardViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let noticeBoardTableViewCell = tableView.dequeueReusableCell(withIdentifier: NoticeBoardTableViewCell.identifier, for: indexPath) as? NoticeBoardTableViewCell else { return UITableViewCell() }
return noticeBoardTableViewCell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 200
}
}리턴값이 CGFloat이기 때문에 수치를 입력해서 정할 수 있다.
좀 더 자세히 보면, 높이가 200으로 설정이 된 것을 확인할 수 있다.
1-2. 자동으로 높이 조절
그렇지만 Cell에 요소가 추가가 되면 높이를 구하면서 개발을 해야한다는 단점이 있다. 이 단점을 보완하는 기능이 있는데, 바로 automaticDimension 이다.
https://developer.apple.com/documentation/uikit/uitableview/1614961-automaticdimension
이렇게 자동으로 높이가 조절되는 방식을 셀프 사이징 셀(Self-Sizing Cell) 이라고 한다. 이 설정을 하게 되면 목록이 모두 만들어지고 레이아웃을 계산한 다음 셀의 높이값을 재설정 한다.
// TableView 만들기
private(set) lazy var noticeBoardTableView: UITableView = {
let tableView = UITableView()
tableView.register(NoticeBoardTableViewCell.self, forCellReuseIdentifier: NoticeBoardTableViewCell.identifier)
tableView.rowHeight = UITableView.automaticDimension
// 왼쪽 공백 없애기
tableView.separatorInset.left = 0
return tableView
}()테이블 뷰를 만들 때, 추가를 해준다.
설정한 autolayout을 고려해서 자동으로 높이를 설정한 모습을 볼 수 있다.
2. Frame VS Bounds
위의 설명을 보게 되면 Frame이랑 Bounds라는 용어를 볼 수 있다. View 안에 같이 있지만 차이가 있을 것이다.
우선 Frame과 Bounds는 UIView의 instance property이다. 둘 다 CGRect가 있기 때문에 x,y,width,height를 가진다.
2-1. Frame
https://developer.apple.com/documentation/uikit/uiview/1622621-frame
Frame 좌표
frame의 정의는 SuperView(상위뷰)의 좌표시스템안에서 View의 위치와 크기를 나타낸다. 이다. 즉, frame의 x,y 좌표는 SuperView의 원점으로 부터의 위치이다.
이미지에서 파랑색 사각형의 frame의 x,y는 (36,60)이 된다.
Frame 크기
frame의 width,height는 frame의 size인데, size는 View의 영역을 모두 감싸는 사각형의 크기이다. 피그마에서 확인을 하면 좀 더 이해가 쉽다.
지금 사각형의 크기는 162*143이다.
그렇지만 frame의 크기는 202.19*191.17이다. 이처럼 frame의 크기는 객체를 둘러싼 사각형의 크기이다.
2-2. Bounds
https://developer.apple.com/documentation/uikit/uiview/1622580-bounds
Bounds 좌표
bounds의 정의는 View의 위치와 크기를 자신만의 좌표시스템안에서 나타낸다. 이다. 즉, bounds의 x,y 좌표는 자기자신의 위치이다. 자기자신의 좌표를 바꾸는 이유가 무엇인지 궁금증이 생긴다.
현재 파랑색의 bounds x,y는 (0,0)이다. 이 좌표를 움직이면 아래와 같은 현상이 일어난다.
파랑색의 좌표를 움직였는데, 노랑색이 움직이는 신기한 현상이 발생한다.
bounds에서 좌표를 이동시키는 것은 frame처럼 view의 위치를 이동시키는 것이 아니라 viewport의 위치를 이동시키는 것이다. viewport는 화면이 보여지는 창이다.
이렇게 화면안에 있는 도형들의 크기는 크지만 화면의 viewport 만큼 보여지는 것이다.
즉, 가장 상위의 view인 화면의 bounds를 움직이면 사각형은 그대로 이지만 보여지는 곳이 달라지는 것이다.
이제 도형기준으로 움직여보자. 다음과 같이 있다는 가정이다.
빨간색의 입장에서 viewport는 자신의 사이즈만큼 viewport를 가진다.
이제 빨간색의 viewport를 (30,30)만큼 움직이면 이렇게 움직이는 것이다.
화면에서는 빨간색은 고정되어 있기 때문에, 파랑색과 초록색이 움직인 것처럼 보여진다.
이런 bounds의 x,y는 Scroll에서 사용을 한다. ScrollView의 bounds의 좌표를 바꾸면서 화면을 보여주기 때문에, 아래로 이동을 하고, 옆으로 이동을 하는 것처럼 보이는 것이다.
Bounds 크기
bounds의 width,height는 bounds의 size인데, size는 View 자체의 영역의 크기이다.
이미지처럼 자체의 크기를 뜻한다.
