[iOS] Day 16 - TableView(1)

큰 대단원이 시작이 된 것 같다 

새로운 개념으로 뛰어 들어가자

---

UITableView

TableView는 반복되는 형식의 UI를 쉽게 만들 수 있는 특수한 View

TableView에는 하나의 섹션 하나의 Cell이 위치한다

Section은 Cell 용도에 따라 나뉜다

 

Static Cell / Dynamic Prototypes

TableView는 Static과Dynamic Prototypes로 나뉜다 

Static Cell은 아이폰 설정 화면처럼 사용자에 따라 변함없는 View

Dynamic Prototypes은 app상에서 사용자 데이터에 따라 다른 화면이다 

 

NumberOfRowsInSection, CellForRowAt

새로운 File 생성시 TableView를 사용할 때 Subclass를 TableViewController로 하면

많은 문장들이 자동 완성되어 있고 numberOfSection 과 numberOfRowsInSection이 주석이 처리가 되어 있지 않다

두개가 다 필수인가? 

이 문단의 제목에서 알 수 있듯 놀랍게도 numberOfSection은 default가 1이므로 필수로 생성은 하지 않아도 된다 

numberOfRowsInSection은 하나의 섹션안에 몇개의 셀을 넣을 건가 cellForRowAt은 셀의 디자인과 데이터를 넣는 역할을 한다

Apple 놈들 cellForRowAt도 주석 풀어주지... 넣어준 것만으로 감사하다

 

아까부터 Section Cell 하는데 도대체 뭔 소리인가?

 

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 2
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return 3
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "BlogTableViewCell")
        
        cell?.textLabel?.text = "예시"
        
        return cell!
    }
}

 

예시를 보면 섹션 2개 textLable의 text가 예시인 셀 3개를 보여줄거다

감이 좀 오는가?

section은 어원 그대로 하나의 큰 부문이고 그 부문안에 cell이 있는 구조이다 

 

재사용

셀이 너무 많은 경우를 생각해보자 앱에 셀이 넘쳐서 수백개를 하나하나 다 만들려면 메모리가 너무 많이 들어서 

재사용을 하는 것이다 

let cell = tableView.dequeueReusableCell(withIdentifier: "BlogTableViewCell")

dequeReusableCell에 BlogTableViewCell이라는 Identifier을 갖는 재사용 가능한 셀을 반환한다

재사용을 하면 메모리의 절약을 통해 부드러운 UI를 구현할 수 있다

 

Cell을 DataSource에 요청 ->  DataSource dequeReuseableCell 사용 가능한 Cell 여부 확인

-> cellForRowAt Cell Contents 구성 -> View에 표시 -> User입장에서는 화면에 사라진 셀이 테이블 뷰에서 제거(ex 스크롤을 위로 올렸을 때) -> 하지만 실상은 완전히 제거되지 않고 dequeReusableCell에 추가

User 입장에서 Scroll을 반복하면 이 과정이 반복

---

구조

section 설정 -> 셀 설정 -> 셀 디자인 설정

셀 설정시 Identifier 설정은 필수다

위의 코드를 보면 withIdentifier가 나오는데 Storyboard의 셀의 Identifier와 동일하게 설정한 뒤에 코드를 작성해야한다

Storyboard에서 Inspector영역

---

IndexPath

IndexPath는 section과 row를 가지고 있다. 

처음에는 이해하기 어려운 부분이고 처음 배울 때 정말 외우기만 했는데 이건 행렬의 개념과 같다 물은 물이고 산은 산..

IndexPath가 나오면 머리속에 미니언즈가 공장에서 일을 한다고 항상 생각한다

 

IndexPath.row가 설정이 되면 제조업 파트(Section) 별로 미니언즈(Cell)들이 움직이기 시작하고 차례대로 0번 미니언즈부터 마지막 번호 미니언즈까지 cellForRowAt에서 지정된 일을 수행한다

 

추가 TableView에 관한 내용은 다음 포스팅해서 이어서 하겠다