[ios/Swift] TableView 사용법 - 기본

tableview는 다른 언어에서 리스트뷰와 같다.

사용법은 두가지가 있는데 tableview controller를 통으로 사용하거나 view controller에 테이블뷰를 부분 포함시켜서 사용한다.

 

이번에는 테이블뷰를 부분 포함하는 것에 설명한다.

 

먼저 스토리보드에서 뷰컨트롤러에 TableView와 TableView Cell을 추가한다.

 

 

테이블뷰를 뷰컨트롤러에 위임 해준다. (dataSource, deletegate)

 

 

테이블 뷰 셀을 커스텀 하기 위해 클래스를 하나 만들어 준다.

import UIKit

class TableViewCell: UITableViewCell {
    
}

이 클래스에 다양한 컨트롤을 추가하여 셀을 표현할 수 있는데 일단은 클래스만 만들어 주겠다.

 

 

테이블 뷰셀과 커스텀 클래스를 연결해준다.

테이블 뷰 셀을 스토리보드에서 터치하고 속성에서 위와 같이 클래스를 연결

 

 

테이블 뷰 셀 id 설정

마찬가지로  테이블 뷰 셀 속성에서 아이디를 원하는 것으로 설정한다.

나는 클래스 이름과 동일하게 했다.

 

 

뷰컨트롤러 코드에서 테이블 뷰를 사용하기 위한 프로토콜을 채택한다. (참고로 TableViewController를 사용하면 채택 필요없음)

extension ViewController: UITableViewDelegate, UITableViewDataSource {

}

 

 

프로토콜을 채택하고 테이블 뷰를 기본적으로 나타내기 위해 필요한 두 개의 함수를 정의해 준다.

// 테이블 뷰에서 한 섹션에 나타날 셀의 개수를 반환 (지금 섹션은 1개)
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}
// 커스텀 클래스를 가져와 셀을 표현
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell

    return cell
}

지금 테이블 뷰의 섹션은 1개이고 10개의 셀을 반환한다.

상수 cell을 가져와 셀을 표현할 수 있는데 일단은 공백으로 두었다.

 

 

여기까지 하고 실행하여 테스트 하면?

아직 컨텐츠는 공백이지만 10개의 셀이 잘 생성된 것을 확인할 수 있다.

 

그러면 이제 틀을 다 짜 줬으니 콘텐츠를 추가해 보도록 하겠다!

먼저 스토리 보드에서 원하는 컨트롤들을 셀 안 Content View안에 배치해준다.

나는 레이블과 버튼을 배치하였다.

 

 

배치만 하면 원하는대로 사용할 수 없기 때문에 커스텀 클래스에 아울렛 변수와 액션함수를 추가해준다.

import UIKit

class TableViewCell: UITableViewCell {
    
    @IBOutlet var label: UILabel! // 레이블
    @IBOutlet var button: UIButton! // 버튼
    
    // 버튼 액션 함수
    @IBAction func onButton(_ sender: Any) {
        print("버튼을 터치했습니다.")
    }
}

레이블과 버튼의 아울렛 변수를 만들어 주고 버튼을 터치하면 print할 수 있는 액션도 추가해줬다.

 

 

그리고 아까 cell을 표현하는 함수로 돌아가서

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell

    cell.label.text = String(indexPath.row) // 셀의 레이블에 텍스트 출력
    cell.button.setTitle(String(indexPath.row), for: .normal) // 버튼의 텍스트 수정

    return cell
}

레이블과 버튼에 각 셀의 인덱스를 출력하도록 해봤다.

 

 

결과는 다음과 같다.

 

 

그리고 아무 버튼이나 터치하면

위와 같이 액션의 기능도 가능하다.

셀 안의 버튼으로 다양한 기능을 구현하려면 델리게이트 패턴이 필요한데 다음에 정리해 보도록 하겠다.

 

여기까지 테이블 뷰 기본 사용법에 대해 정리해 보았다.