1)UITableView - cell 구성

이번에는 UITableView에 관련하여 공부를 해봅시다(Apple Document)

UITableView 공식 문서

기본적으로 UITableView에 관한 공식문서에서 보면 확인할 수 있는 화면입니다.

세로로 스크롤되는 컨텐츠 행을 표시

TableView는 표라는 틀을 제공한다면, 실질적인 컨텐츠를 보여주는 것은 UITableViewCell안에서 텍스트와 이미지를 원하는 내용으로 표시하여 우리에게 보여줄 수 있다

Main에서 UIViewContoller에 UITableView를 올리는 것이 가장 기본적인 시작입니다

TableView를 올렸으면 이제 데이터를 채워보도록 하죠
데이터로 테이블 채우기

tableview는 데이터 기반요소로 데이터 소스 개체는 DataSoure프로토콜을 채택하여 사용한다

UITableViewDataSource

데이터를 관리 및 TableviewCell에 데이터를 제공하기 위함
여러가지 기능이 있지만, 기본적으로 셀의 갯수 및 셀 마다 어떤 것을 보여줘야될 지를 정의 하는 것은 기본적으로 있어야한다
예시를 들어 확인해보자

class ViewController: UIViewController, UITableViewDataSource {

    ....

}

이런식으로 ViewController옆에 tableviewDataSource를 채택한다음에 옆에

이런식으로 protocol stubs를 추가해야된다고 나온다 -> 간단히 Fix를 눌러보자

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }

이렇게 dataSource에 관한 기본적은 stub이 나오고 에러는 나오지 않는다
numberOfRowInSecion은 셀의 갯수
cellForRowAt은 각 셀마다 어떻게 보여줄건지 그려라 라는 것이다

이 다음에는 셀에 대해 생각해보자
위와같이 셀의 갯수를 정하고 다음은 셀에 어떤 내용을 보여줄건지를 그려야되는데 셀을 만들고 간단하게 글자를 넣어보자

간단하게 보여줄 Label 만들자

이다음은 Cell를 정의하고 해줍시다

class TableCell: UITableViewCell {
     ...   
}

이렇게 UITableViewCell를 채택한 TableCell이라는 클래스를 만들고, 그걸 TableViewCell에 지정을 해줍니다

(그래야 안에 label을 연결해서 사용할 수 있습니다)

이제 연결을 했다고 하고 cell에 간단한 구성은 끝났습니다~

class TableCell: UITableViewCell {
    @IBOutlet weak var titleText: UILabel!
}

이제는 아까 cellForRowAt에 각 셀에서 보여줄 것을 그려야됩니다 한번 해봅시다

애플 공식문서

공식 문서를 보면 cell이라는 것에 tableview..하는데 한번 한개씩 알아 봅시다

우선 tableView는 현재 storyBoard에 올린 tableView를 연결해서 한 것을 말한다

(음...그러니깐 스토리보드에 있는 테이블뷰를 말하는것)

그 뒤에 dequeueResuableCell() 메소드는 셀을 재사용한다는 것이다.

재사용의 의미는 한 화면의 테이블뷰 셀이 여러개가 있다고 가정하자 그러고 총 100개의 셀이 있는데 맨처음에 화면에서 5개의 셀이 보여진다면, 우리가 스크롤을 해 위로 올렸을 때, 셀이라는 것은 미리 만들어두지 않고, 원래 있던 것을 다시 사용하여 우리에게 보여준다 한마디로 회면에 보여지는 5개의 셀이 계속 재사용되어 사용된다

자 이제 코드를 작성해보자

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var table: UITableView!
    ...
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = table.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableCell
        cell.titleText.text = "안녕"
        return cell
    }
}

table은 현재 스토리보드에 있는 UITableView를 연결
cellForRowAt
1.indexPath는 현재 셀의 위치
2."cell"은 스토리보드에서 tableViewCell에 Identifier에 지정한 이름을 뜻한다.
이렇게 정해주고 cell에 titleText(Label)에 text는 안녕 이라고 지정해준다.
이러면 numberOfRowsInsecion에 정한 수만큼 셀이 보여질 것이다(10이라고 해줌)

확인해보자

 

잘나옵니다 ㅎㅎ