iOS 앱을 개발하다 보면 테이블 뷰(UITableView) 맨 아래에 '제출' 또는 '확인' 같은 버튼을 배치해야 하는 경우가 자주 있습니다. 이럴 때 가장 깔끔하게 해결할 수 있는 방법은 바로 테이블 뷰 푸터(Footer)를 활용하는 것입니다. 이 글에서는 테이블에 푸터 뷰를 추가하고, 그 안에 버튼을 배치하는 전체 과정을 코드 예제와 함께 단계별로 살펴보겠습니다.
1. 프로젝트 생성 및 테이블 뷰 초기화
먼저 Xcode에서 새로운 프로젝트를 생성합니다. 그다음 뷰 컨트롤러에 아래 코드를 추가하여 테이블 뷰를 초기화하고, 하나의 섹션과 몇 개의 행(row)으로 테이블을 구성합니다.
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")
self.view.addSubview(tableView)
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 2
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
cell?.layer.backgroundColor = colorLiteral(red: 0.2392156869, green:
0.6745098233, blue: 0.9686274529, alpha: 1)
cell?.textLabel?.text = "cell at \(indexPath.row)"
return cell!
}2. viewDidLoad에서 테이블 뷰 호출하기
위에서 작성한 initTableView() 함수는 스스로 호출되지 않으므로, 반드시 뷰 컨트롤러의 viewDidLoad() 또는 viewDidAppear(_:) 메서드 안에서 직접 호출해 주어야 합니다. 이렇게 하면 화면이 로드될 때 테이블 뷰가 함께 나타나게 됩니다.
3. 행과 푸터의 높이 지정하기
다음으로, 테이블의 각 행과 푸터 영역에 적절한 높이를 부여하는 코드를 추가합니다. 푸터 안에 버튼을 넣을 것이므로 푸터 높이는 충분히 크게 설정하는 것이 좋습니다.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 60
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 100
}주의: 위 델리게이트 메서드들이 정상적으로 동작하려면 해당 클래스가 UITableViewDataSource와 UITableViewDelegate 프로토콜을 반드시 채택(준수)하고 있어야 합니다. 프로토콜을 채택하지 않으면 위 메서드들은 오류로 표시되거나 호출되지 않습니다.
4. 푸터 뷰와 버튼 추가하기
이제 본격적으로 푸터 뷰를 생성하고, 그 안에 버튼을 배치하는 코드를 작성합니다. viewForFooterInSection 메서드에서 푸터 역할을 할 UIView를 만들고, 그 위에 UIButton을 올려 반환하면 됩니다.
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let footerView = UIView()
footerView.backgroundColor = colorLiteral(red: 0.9686274529, green:
0.78039217, blue: 0.3450980484, alpha: 1)
footerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height:
100)
let button = UIButton()
button.frame = CGRect(x: 20, y: 10, width: 300, height: 50)
button.setTitle("CustomButton", for: .normal)
button.setTitleColor( colorLiteral(red: 0, green: 0, blue: 0, alpha: 1), for: .normal)
button.backgroundColor = colorLiteral(red: 0.721568644, green:
0.8862745166, blue: 0.5921568871, alpha: 1)
footerView.addSubview(button)
return footerView
}실행 결과 및 커스터마이징 팁
위 코드를 실제 기기나 시뮬레이터에서 실행하면, 테이블 뷰의 마지막 행 아래에 노란색 푸터 영역과 함께 초록색 버튼이 나타나는 것을 확인할 수 있습니다.
여기서 더 나아가 다음과 같은 확장도 가능합니다.
- 버튼 액션 연결:
button.addTarget(self, action: #selector(submitTapped), for: .touchUpInside)형태로 제출 동작을 연결할 수 있습니다. - 디자인 커스터마이징: 버튼의 모서리 둥글기(
layer.cornerRadius), 폰트, 그림자 등을 자유롭게 조절할 수 있습니다. - 오토레이아웃 적용: 프레임 대신 Auto Layout 제약 조건을 사용하면 다양한 화면 크기에 유연하게 대응할 수 있습니다.
이처럼 테이블 뷰 푸터를 활용하면 별도의 외부 뷰를 추가하지 않고도 테이블 하단에 자연스럽게 제출 버튼을 배치할 수 있습니다.