이 세계에선 내가 개발자?
[Swift] UITableView 동적 셀 만들어보기 본문
** 아래 내용은 스터디를 위해 정리된 내용입니다 **
이번 스터디에서는 우리가 이 스터디를 만든 이유이자 가장 궁금했던 주제를 다룰 예정이다.
바로 UITableView였다.
본격적으로 UITableView를 톺아보기 전에 각자 평소 UITableView를 사용하면서 궁금했던 것에 대해 먼저 해보기로 했다.
첫 타자로 내 궁금증이 선택이 되었는데 바로바로 UITableView의 동적 셀에 관한 내용이었다.
이전에 채팅을 구현하면서 동적 셀에 대해서 궁금했지만 결국 풀지 못하고 넘어갔기 때문에 이번에는 꼭 풀어보고 싶었다!
어떻게 하는지 알 수가 없어서 일단 여러 블로그를 뒤져보았다.
그러다가 한 블로그를 찾았다!
https://gigas-blog.tistory.com/2
Swift 4 TableView 동적 높이 설정
테이블 뷰를 사용할때 고정된 정적 높이가 아닌 동적 높이로 구현하고 싶을때가 있습니다. 카카오톡의 장문 내용처럼 개행을 했을때 일정하게 늘어나야 하지만 조금씩 뒤틀립니다. 기존에는 아
gigas-blog.tistory.com
위 블로그는 나에게 정답을 알려주었다.
그래서 간단하게 사용하는 방법을 나열해보려고 한다.
더미 데이터 준비하기
뭐가 되었든 결과를 봐야하니까 더미 데이터를 준비해보자.
준비하는 과정은 어렵지 않았다. 그저 String 배열을 하나 만들었다.
내용은 요즘 춤을 따고 있는 노래 IVE - Love Dive에서 따왔다!
테이블 뷰 만들기
자 그럼 이제 더미 데이터도 준비가 됐으니까 테이블뷰를 만들어보자
테이블뷰를 만드는 방법은 모두 다 아니까 패스!
그리고 이제 중요한 부분이 나온다.
바로 테이블뷰의 속성 중에 estimatedRowHeight 라는 속성을 이용해야한다는 것이다.
tableView.estimatedRowHeight = 50
이 친구는 임시 셀의 높이를 정할 때 사용한다.
만약 셀 높이가 결정 되기 전이라면 이 친구가 대신 셀 높이를 지정해준다.
나는 50으로 설정해두었으니, 기본 높이가 50인 셈이다.
그리고 하나 더 중요한 속성이 있다. 바로 rowHeight 속성이다.
이 속성은 그냥 row의 height을 조정해주는 것 아니냐? 뭐가 중요하냐 싶겠지만 이 친구의 값이 중요하다.
tableView.rowHeight = UITableView.automaticDimension
위 코드 처럼 UITableView.automaticDimension 으로 지정해주면 동적 높이가 설정된다고 테이블 뷰에 알려준다.
rowHeight의 속성이 위와 같다면 테이블뷰가 다 그려진 다음 셀에 들어가는 레이아웃을 계산해서 셀의 높이를 다르게 만들어준다.
요기까지만 해도 반 이상 온 것이다!
이제 테이블뷰를 세팅해보자
테이블 뷰 세팅하기
테이블 뷰의 Delegate와 DataSource를 채택해준다.
그리고 numberOfRowsInSection과 cellForRowAt을 기존 방법대로 세팅해 준다.
이제 가장 중요한 순간이다!
바로 heightForRowAt을 이용해서 셀의 높이를 동적으로 지정해줄 것이다.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
가장 중요한 부분은 UITableView.automticDimension 을 리턴해준다는 것이다.
위와 같이 설정해두면 셀의 높이는 동적으로 나타나게 된다.
엄청난 기대를 품고 실행을 시켜보았다.
읭..? 동적으로 된다며! 된다며!!!! 이게 왜그래!!
라고 생각하고 다시 참고했던 블로그를 살펴보았다.
하지만 여기서는 뭔가 딱히 나오는 게 없었다. 그래서 다른 블로그도 뒤져보았다.
그리고 난 발견해버렸다....
왜 동적으로 설정되지 않았나 했더니 numberOfLines 를 설정해주지 않아서였던 것이다.
numberOfLines는 기본이 1이기 때문에 설정을 해주지 않으면 1줄로 고정되어 버린다.
자 그럼 애증의 numberOfLines를 설정해보자.
cell.textLabel?.numberOfLines = 0
내가 원하던 결과가 나왔다!!!
이렇게 쉽게 할 수 있었는데 왜 난 그동안 해결하지 못했나 싶기도 하다!
자 그럼 마무리로 중요한 내용을 정리해보자
[추가] Cell 안에 요소가 많을 경우에는?
위에는 UITableViewCell에 기본적으로 있는 UILabel만을 두었을 때의 이야기이다.
근데 우리가 UITableView를 쓸 때 UILabel 단독 하나만 쓰는 경우는 잘 없을 것이다.
CustomCell을 만들거나 안에 여러 UIView들이 있기 마련이다.
그럴때는?
cell.contentview 기준으로 가장 첫번째 있는 요소의 top과 가장 마지막에 있는 bottom의 크기에 맞춰진다고 한다.
그래서 나는 cell.contentview 안에 가장 첫 요소로 안에 모든 뷰들을 랩핑해주는 UIView를 만들었다.
그 뷰의 top과 bottom을 안에 요소에 맞춘다.
스냅킷으로 예를 들면 아래처럼 된다.
cellView.snp.makeConstraints { make in
make.left.right.equalToSuperview()
make.top.equalTo(titleLabel.snp.top).inset(-16)
make.bottom.equalTo(titleLabel.snp.bottom).inset(-16)
make.edges.equalToSuperview()
}스냅킷으로 예를 들었을때, top과 bottom이 titleLabel의 각 top과 bottom에 맞춰져 있다.
이렇게 해주면 titleLabel이 늘어났을 경우에 그에 맞춰서 cell의 height가 조정된다.
왜냐하면 cell의 height는 cellView의 top과 bottom에 맞춰지기 때문이다.
그리고 또 중요한 부분은 cellView는 cell.contentview에 붙어있어야 한다는 것이다.
그래서 마지막 edges를 넣어주었다. (top, bottom, left, right)
정리
- 동적으로 셀을 지정하기 위해서는 두 가지 설정을 해줘야한다.
- estimatedRowHeight를 설정해줘야한다.
- rowHeight를 UITableView.automaticDimension로 설정해준다.
- tableView rowHeight를 설정해주는 함수에 UITableView.automaticDimension를 리턴해준다.
- 마지막으로 가장 중요하게 numberOfLines를 0으로 설정해줘야한다!!
'Swift > Swift Based Study' 카테고리의 다른 글
| [Swift] NSAttributedString과 NSMutableAttributedString 비교 (0) | 2022.06.09 |
|---|---|
| [Swift] UILabel (0) | 2022.05.28 |
