Swift에서 테이블뷰 셀 높이 동적으로 변경하기
iOS에서 테이블뷰(UITableView) 셀의 높이를 동적으로 변경하려면, 즉 셀의 크기가 담고 있는 내용에 맞게 자동으로 조절되도록 하려면 automatic dimension(자동 크기 조정) 속성을 활용해야 합니다. 이번 글에서는 간단한 예제 프로젝트를 통해 그 구현 방법을 단계별로 살펴보겠습니다.
1. 프로젝트 준비 및 델리게이트 설정
먼저 빈 프로젝트를 생성한 뒤, 해당 뷰 컨트롤러 클래스가 UITableViewDataSource와 UITableViewDelegate 프로토콜을 채택하도록 합니다. 이 두 프로토콜은 테이블뷰의 데이터 공급과 사용자 상호작용 처리를 담당합니다.
2. 테이블뷰 초기화
아래 코드에서는 먼저 테이블을 생성하고, 해당 테이블에 재사용할 셀을 등록한 후 몇 가지 테이블 속성을 설정합니다. 이어서 테이블뷰의 delegate와 dataSource를 지정하고, 완성된 테이블뷰를 뷰에 추가합니다. 이 함수는 뷰 컨트롤러의 viewDidLoad 메서드 안에서 호출하면 됩니다.
참고: 아래 코드에는 estimatedRowHeight 속성이 설정되어 있다는 점에 주목하세요. 이 값은 셀의 대략적인 높이를 미리 알려주어 스크롤 성능을 향상시키는 역할을 합니다.
func initTableView() {
let tableView = UITableView()
tableView.frame = self.view.frame
tableView.dataSource = self
tableView.delegate = self
tableView.backgroundColor = colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
tableView.estimatedRowHeight = UITableView.automaticDimension
self.view.addSubview(tableView)
}3. 섹션과 행 개수 지정
위 코드를 통해 뷰에 테이블이 추가되었습니다. 이제 테이블에 표시할 섹션과 행의 개수를 데이터소스 메서드를 통해 알려주어야 합니다.
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}다음으로, 테이블뷰의 두 번째 행에 긴 텍스트를 반환하도록 셀을 구성하면 해당 셀이 내용 크기에 맞춰 높이를 갖게 됩니다.
참고: UITableViewCell에는 기본적으로 textLabel 속성이 포함되어 있으며, 이 레이블은 기본적으로 한 줄(numberOfLines = 1)로 설정되어 있습니다. automatic dimension이 정상적으로 작동하는 모습을 확인하려면 레이블의 numberOfLines 값을 0으로 변경해 여러 줄 표시를 허용해야 합니다.
4. 셀 높이 자동 조정 적용
마지막으로, 델리게이트 메서드를 통해 각 셀의 높이가 자동으로 계산되도록 지정합니다.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}위 코드를 모두 작성한 후 앱을 실행하면, 각 셀이 텍스트 길이에 따라 높이가 유동적으로 조정되는 것을 확인할 수 있습니다.
