[iOS] - TableView Cell 갯수에 따른 유동적 높이 조절

오늘은 간단한 예제로 Cell 갯수에따라 테이블 뷰 높이를 바꿔보는 걸 해볼려고해요

 

먼저 프로젝트 생성 후 간단하게 테이블 뷰를 만들어주겠습니다.

tableView.backgroundColor = .green
        tableView.delegate = self
        tableView.dataSource = self
        tableView.snp.makeConstraints{
            $0.width.equalTo(200)
            $0.height.equalTo(50)
            $0.center.equalToSuperview()
        }

 

스냅킷이랑 스토리보드랑 막 썼어요!!! (귀차니즘..)

테이블 뷰 그리는 방법은 다 아실거라고 생각하고 다음 고고

 

그리고

 var data = [
    "안녕하세요",
    "재욱이에요"
    ]

이런 변수를 만들고 버튼을 하나 만들거에요

버튼을 클릭하면 data가 추가되고 그에 따라 셀도 늘어나겠죠??

보통 테이블 뷰 크기는 고정인데 우리는 다르게 테이블 뷰 자체가 커지도록 해볼거에요

 

버튼을 대애애충 만들자!

 let btn = UIButton(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
        self.view.addSubview(btn)
        btn.backgroundColor = .lightGray
        
        btn.addTarget(self, action: #selector(changeData), for: .touchUpInside)

 

정말 대충 만들었쬬

 

changeData라는 함수가 실행하면 data를 append 시켜줄거구

tableView의 height를 변경해주기만 하면 끝!

 

전체 소스 첨부할게용

//
//  ViewController.swift
//  Test
//
//  Created by Jay on 2022/03/02.
//

import UIKit
import SnapKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    
    var data = [
    "안녕하세요",
    "재욱이에요"
    ]
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    
        tableView.backgroundColor = .green
        tableView.delegate = self
        tableView.dataSource = self
        tableView.snp.makeConstraints{
            $0.width.equalTo(200)
            $0.height.equalTo(50)
            $0.center.equalToSuperview()
        }
        
        let btn = UIButton(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
        self.view.addSubview(btn)
        btn.backgroundColor = .lightGray
        
        btn.addTarget(self, action: #selector(changeData), for: .touchUpInside)
        
    }
    @objc func changeData(){
        print("클릭")
        data.append("반가워요!")
        
        tableView.snp.updateConstraints{
            $0.height.equalTo(data.count * 50)
        }
    }
    
    

}
extension ViewController: UITableViewDelegate, UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell") else {
            print("여기")
            return UITableViewCell() }
        
        cell.textLabel?.text = data[indexPath.row]
        cell.backgroundColor = .red
        return cell
    }
    
    
    
    
    
}

 

 

아 참 근데 셀의 갯수는 테이블 뷰를 리로드해야 갱신됩니다.

 

음 근데 만약 셀의 크기도 유동적이라면 어떻게 할까요??

 

그때는 tableView.contentSize.height!

즉 테이블뷰가 가지고 있는 컨텐츠의 사이즈를 높이로 지정해주면 됩니다!

   @objc func changeData(){
        print("클릭")
        data.append("반가워요!")
        
        tableView.snp.updateConstraints{
            $0.height.equalTo(self.tableView.contentSize.height)
        }
        tableView.reloadData()
    }

 

리로드도 추가했어요!! 

이러면 클릭 할 때 마다 테이블 뷰가 커지는걸 확인 할 수 있어요

끝