iOS) UITableView 스토리보드 없이 코드 작성(programmatically)

오늘은 테이블뷰 생성 기본을 해보려고 합니다. 

아래와 같이 테이블뷰는 컬렉션 뷰와 함께 앱을 구성하는 요소에 정말 많이 사용됩니다. 

 

보통 많은 예제들은 스토리보드로 작성 하지만 저는 이번에 코드로 작성해 보려고 합니다. (코드가 좋아서 .. ㅎ)

 

프로젝트를 생성 합니닷

테이블뷰 객체를 생성 합니다. 

 

 

그리고 해당 객체뷰의 레이아웃을 지정해 줍니다.

테이블 뷰를 루트뷰의 top , bottom,  leading , trailing 크기에 딱 맞게 설정해 줍니다.

 

오호 ... 

일단 데이터를 담을 수 있는 테이블 뷰가 생성 되었습니다.  XD

 

 

그리고 이제 delegate 와 datasource를 채택하는 작업을 해줍니다.

 

잉 머고??

 

에러가 뜹니다.

 

에러를 클릭 해보면

뷰컨에 UITablewViewDataSource 프로토콜이 구현이 안되어서 오류가 뜬다고 합니다.

 

 

친절한 Xcode의 알림에 따라 Fix 를 눌러줍니다.

그럼 해당 함수들을 구현하라고 하는데 

 

각 함수들의 의미하는 바는

 

numberOfRowsInSection을 매개 변수로 받는 함수는 TableView에 나타내질 정보의 갯수를 리턴 합니다. 

 

cellForRowAt을 매개변수로 받는 함수는 해당 셀에 어떤 데이터를 나타낼지를 리턴 합니다.

 

 

함수를 구현하기에 앞서 임시 데이터를 만들어 줍니다.

 

그리고 

 

TableView 대리자를 위임해 줘야 합니다.

 

table.delegate = self

table.dataSource = self

 

다음으로 TableView에게 어떠한 요소를 출력 해야하는지 알려줘야 하기 때문에

다음과 같이 입력해 줍니다.

 

 

 

마지막으로 이와 같이

 

임시 배열의 갯수만큼의 행을 리턴 하도록 설정해주고 

 

정말 중요한 dequeueReusableCell 을 써주도록 합니다.

 

그리고 해당 셀에 대해서 각 행별로 배열에 있던 값이 들어가도록 위와 같이 작성 하면 끝입니다.

 

이제 실행을 다시 해보도록 합니다.

 

 

와우 데이터가 들어왔습니다. 허허 신기하군요 

 

응용하기 위해서 셀을 커스텀 하게 사용자의 입맛에 따라

 

작성해서 테이블 뷰를 생성 가능 합니다. 

 

커스텀 셀은 다음 시간에 해보도록 하겠습니다.

 

긴 글 봐주셔서 감사합니다. XD

 

 

모든 코드는 아래에 있습니다.

import UIKit

class ViewController: UIViewController {
    
    let testArr = ["a", "b", "c", "d", "a", "b", "c", "d"]
    let table = UITableView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        table.delegate = self
        table.dataSource = self
        
        attribute()
        layout()
    }
    
    func attribute() {
        table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
    
    func layout() {
        view.addSubview(table)
        table.translatesAutoresizingMaskIntoConstraints = false
        table.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        table.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        table.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        table.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return testArr.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = table.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as UITableViewCell
        
        cell.textLabel?.text = testArr[indexPath.row]
        
        return cell
    }
}