[iOS] - Table View & Collection View (테이블 뷰, 컬렉션 뷰)

🎤 Table View and Collection View

 

🧐 Table View, Collection View 란?

• UIScrollView의 서브클래스로 무한한 양의(unbounded) 정보에 무한한 접근을 제공하기 위해 사용됩니다. 하지만 자료를 보여주는 방식에서 차이가 발생합니다.
  • Table View: 정보를 하나의 긴 리스트로 보여줍니다(섹션 분리는 가능합니다).
  • Collection View: 다양한 방식이 가능하지만 기본적으로 정보를 2D 포맷으로 보여줍니다(주로 text flow 같은 flowing으로). 여기서 text flow란 글을 읽듯이 왼쪽에서 오른쪽으로, 그리고 다음 줄로 이어서 계속 작성하는 방식을 말합니다. 컬렉션 뷰는 커스터마이징이 가능합니다.
• 결국 두 View의 차이는 하나는 행으로 나열하여 자료를 보여주는 것이고, 다른 하나는 2차원으로 놓여진 무작위의(arbitrary) 아이템이라는 것입니다.

 

📝 Table View

• Table View의 기본적인 형태는 아래와 같습니다
• 
• Table View의 행은 그룹으로 묶일 수 있습니다. 이렇게 묶인 그룹은 섹션이 됩니다. 섹션은 테이블의 데이터가 고정될(static) 때만 사용합니다. 예를 들어, 음식 리스트 같이 매번 바뀌는 임의의(arbitrary) 무작위한 정보에는 사용하지 않습니다.
  
• 설정 화면의 경우 항상 내용이 고정되어 있기 때문에 Section을 활용하여 구현했습니다.
• 대표적인 Table View의 예시로 설정(settings) 화면이 있습니다.

 

📱 Collection View

• Collection View의 기본적인 형태는 아래와 같습니다.그림과 같이 기본적으로 2D로 배치되어 있습니다. 위의 그림을 보면 행이 존재하는 것 같지만 실제로 행은 존재하지 않습니다. 단순히 줄에서 줄로 배치된 형태입니다. 만약 크기가 달랐다면 행이 존재하는 것처럼 보이지 않을 것입니다.
• 
• Collection View도 section을 가질 수 있습니다.
• 

 

🧐 How to use?

• 팔레트에서 직접 View를 드래그해서 사용 가능합니다. 팔레트에서 Table을 검색해보겠습니다.Table View를 직접 넣거나 Table View Controller를 통해 새로운 Controller를 생성할 수 있습니다. 
• 
• MVC에서 전체 뷰가 Table View이거나 Collection View라면 위의 Controller 옵션을 통해 쉽게 생성할 수 있습니다.
• Collection View 역시 마찬가지 입니다.
• 

 

📂 Data를 어디에서 받을 수 있을까?

• 앞서 언급한 것처럼 MVC에서 View는 데이터를 가질 수 없습니다. 그래서 테이블 뷰에서 정의한 var(변수)에 데이터를 저장하는 방식으로 데이터를 제공할 수 없습니다. 따라서 테이블 뷰가 데이터를 요청해야 합니다. 이 방식은 delegation과 같은 방식으로 동작합니다.
• data Source라는 변수가 있고 View가 이 변수를 갖고 있습니다. dataSource의 타입은 프로토콜이고 이 프로토콜에는 데이터를 요청하는 한 뭉치의 메소드((bunch of methods)가 있습니다. 데이터를 달라고 요청하는 방식으로 table view가 데이터를 얻습니다.

🎯 dataSource, delegate 구현하기

// Table View
var dataSource: UITableViewDataSource
var delegate: UITableViewDelegate

// Collection View
var dataSource: UICollectionViewDataSource
var delegate: UICollectionViewDelegate

• UI-ViewDataSource와 UI-ViewDelegate은 위에서 언급한 한 뭉치의 메소드를 가지고 있습니다.
  • numberOfSections: section을 나누는 메소드로 이 메소드를 구현하지 않으면 섹션 구분이 없이 하나의 섹션이 됩니다.
  • tableView or collectionView(numberOfRowsInSection): 한 섹션에 몇개의 행이 있는지 정하는 메소드입니다. 각 섹션에 직접 물어보게 됩니다. Collection View의 경우에는 이 섹션에 몇 개의 아이템이 있는지 묻습니다.
  • tableView or collectionView(cellForItemAt): 각 행/아이템에 데이터를 받아오는 메소드입니다.
    📝 IndexPath:
    • 매우 작은 구조체입니다. 여기에 섹션과 행 또는 섹션과 아이템을 가지고 있습니다. 섹션과 행을 합쳐서 나타내는 방식입니다. 그래서 Table View나 Collection View는 데이터를 요청할 수 있고, 이 메소드는 IndexPath를 제공합니다.
    • IndexPath는 변수로 row, item, section을 가지고 있습니다.
    🎯 return type UI(Table/Collection)ViewCell:
    • 메소드의 return type은 (Table View의 경우) UITableViewCell 입니다. 이것은 UI 뷰의 서브클래스입니다.
    • 이 view는 행을 그리는데 사용됩니다.
  • tableView 안에 cell을 구현해보겠습니다.cell을 구현하기 위해 사용한 reuse 메소드를 분석해보겠습니다.
  • func tableView(_ tv: UITV, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tv.dequeueReusableCell(withIdentifier: "MyCellId". for: indexPath) }
• // UITableView func numberOfSections(in tableView: UITV) -> Int func tableView(_ tv: UITV, numberOfRowsInSection section: Int) -> Int func tableView(_ tv: UITV, cellForRowAt indexPath: IndexPath) -> UITableViewCell // UICollectionView func numberOfSections(in collectionView: UICV) -> Int func collectionView(_ tv: UICV, numberOfItemsInSection section: Int) -> Int func collectionView(_ tv: UICV, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

📝 Cell Reuse(셀 재사용)

• 아이팟에 10,000 곡의 음악이 있다고 생각해보겠습니다. 이것을 Table View로 보여줄 때 앨범 자켓, 곡명, 가수 등의 정보는 10,000개이고 만 개의 UI 뷰를 갖는다는 것은 매우 비효율적입니다. 그래서 실제 테이블 뷰는 보여지는 행만 UI 테이블 뷰 셀을 생성합니다. 스크롤을 해서 어떤 셀이 맨 위로 가게 돼면 이는 재사용되서 맨 아래에 놓여지게 됩니다. 따라서 스크롤을 하는 동안 반복적으로 뷰는 재사용됩니다.
• 위의 내용을 구조적으로 설명해보면 스크롤을 할 때 하나의 UITableViewCell은 재사용 풀(a pool to be reused)로 가서 dequeueReusableCell 메소드를 통해 셀을 가져오게 됩니다.
  🧐 왜 ReusableCell이 Queue로 구현되어 있을까 고민해봤습니다. 여러가지 자료구조가 있는데 말이죠! 처음에는 data가 담겨있는 채로 cell에 저장되어 내용이 꺼내진다고 생각하여 Stack이 더 맞지않을까 생각했습니다. 스크롤을 위로 올려 셀이 사라졌다가 다시 내리면 역순으로 나와야 한다는 생각을 했었습니다. 하지만 실제로는 셀 자체만 반복사용하는 구조였습니다. 그래서 먼저 들어가 있던 셀이 먼저 나오는 구조가 더 합리적이므로 FIFO(First In First Out)의 구조로 구현된 것 같습니다.
• 만약에 방금 스크린이 켜져서 재사용할 수 있는 Cell이 없을 경우는 어떻게 할까요? 바로 스토리보드에서 만든 프로토타입을 복사해서 생성하게 됩니다. 레이블, 버튼, 이미지 등을 사용해서 셀의 모양을 만들고 오토 레이아웃 등을 사용해 셀을 고정시키면 셀이 필요할 때마다 스토리보드에서 복사본을 만들고 이를 재사용하게 됩니다.그래서 재사용할 셀에 대해 말하고, 만약 재사용할 셀이 없다면 스토리보드에 보이는 이 셀을 복사해서 만들게 됩니다. 위의 구문을 다시 분석해보면"상수 cell을 선언한다, UI Table View의 dequeueReusableCell에서 "MyCellId"라는 identifier를 가진 Cell을 indexPath의 정보를 넣어 가져온다"
• 라고 해석할 수 있습니다.
• let cell = tv.dequeueReusableCell(withIdentifier: "MyCellId". for: indexPath)
• 
• Reuse에서 주의해야할 점이 있습니다.해석하면 셀을 재사용하는 것은 멀티스레딩에 심각한 영향을 줄 수 있다는 이야기입니다. 예를 들어, 어떤 row에 불러와야할 데이터 중 이미지가 있고 한 스레드에서 이것을 불러오기 위해 인터넷에서 데이터를 가져오는 작업을 시작합니다. 이 작업은 오랜 시간이 걸립니다. 그 사이 사용자가 손가락으로 스크롤해서 그 셀을 보내버리고 이 셀은 재사용됩니다. 그럼 앱은 이미 다른 셀의 내용을 담아 보여주는데 새로운 이미지가 아닌 기존에 요청된 이미지가 셀에 도착하게 됩니다. 이를 주의하지 않으면 다른 셀의 이미지를 새로운 셀에 보여주게 됩니다. 따라서 이미지가 오면 이 이미지가 이것을 요청한 셀이 여전히 화면에 보여지고 있는지 확인해야 합니다. 이것은 일반적인 멀티스레딩 문제로 데이터를 불러오면 화면에 여전히 데이터가 존재하는지 확인하는 작업이 필요합니다. 그래서 아래와 같은 코드를 볼 수 있습니다.decision은 어떤 데이터를 가지고 있는지, 어떤 section에 존재하는지 등에 따라 결정됩니다. 이 결정된 결과는 prototype이 되고 프로토 타입 자체를 identifier로 결정하여 cell을 불러오면 멀티스레딩에서 발생하는 cell reuse에 다른 데이터가 불러와지는 문제를 해결할 수 있습니다.
• func tableView(_ tv: UITV, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let prototype = decision ? "FoodCell" : "CustomFoodCell" let cell = tv.dequeueReusableCell(withIdentifier: prototype. for: indexPath) cell.textLabel?.text = food(at: indexPath) cell.detailTextLable?.text = emoji(at: indexPath) }
• The fact that cells are reused has serious implications for multithreading!

 

📂 Loading up Cells(셀 불러오기)

 

• 한 article을 인용해보겠습니다.위의 문장을 해석해보면 custom UI를 UITableViewCell prototype에 넣을 때 outlet이 필요하지만 Controller에 직접 연결할 수 없다는 뜻입니다. 기존에 IBOutlet을 통해 연결했을 때는 하나의 값을 View에서 불러오기위해 직접 연결했는데, TableView에서는 엄청나게 많은 cell이 존재하기 때문에 일일이 연결할 수 없습니다. 또 하나의 single outlet에 연결되기 위해서는 배열 등을 사용해야하는데 그럼 너무 복잡한 구조가 됩니다. 그래서 처음으로 outlet을 View에 구현하겠습니다. 그리고 이 View는 UITableViewCell의 서브클래스이어야 합니다.이렇게 구현하면 각각의 행은 자신만의 TableViewCell이 있고 각각의 TableViewCell은 자신만의 아울렛을 가지게 됩니다.

  func tableView(_ tv: UITV, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let prototype = decision ? "FoodCell" : "CustomFoodCell"
      let cell = tv.dequeueReusableCell(withIdentifier: prototype. for: indexPath)
      if let myTVCell = cell as? MyTVC {
        myTVC.name = food(at: indexPath); myTVC.emoji = emoji(at: indexPath)
      }
  }

• 커스텀 UITableViewCell 서브클래스를 생성할 때에는 반드시 작은 프로토타입 행이 선택된 상태에서 진행해야 합니다. 왜냐하면 default로 UITableViewCell 클래스로 설정되어있기 때문에 myTVC 클래스로 변경해주어야 합니다. 이를 코드로 구현해보겠습니다.
• class myTVC: UITableViewCell { @IBOutlet var name: UILabel @IBOutlet var category: UILabel @IBOutlet var details: UILabel }
• When we put custom UI into a UITableViewCell prototype, we probably need outlet to it.No, we can't, because there might be multiple rows with that type of cell
• They can't all be hooked up to the same single outlet!
• Can we hook them up directly to our Controller?

 

🏢 Static Table View

• static한 테이블 뷰는 일반적인 테이블 뷰와 다르게 무작위의(arbitrary) 데이터를 보여주는 것이 아니라 고정된 양의 데이터를 가지고 있습니다(e.g. 설정 화면). 이런 경우는 행과 섹션의 개수가 정해져 있기 때문에 개수를 세는 등의 함수는 필요하지 않습니다. cellForRowAt 역시 필요하지 않습니다. 이 때에는 스토리보드의 컨트롤러에 행의 데이터를 직접 작성하면 됩니다. 사용하는 방법을 알아보겠습니다.

🧐 How to use?

​

• 위 그림과 같이 Table View의 Content를 Static Cells로 바꿔주고 Style을 Grouped로 설정해줍니다.

 

🙋 만약 모델이 변경된다면?(What if your Model changes?)

 

• 아이팟에 음악이 추가되거나, 음식 리스트의 음식이 추가될 때 Table View나 Collection View는 업데이트 되어야 합니다. 이를 위해 두 View에는 reloadData() 라는 function이 존재합니다. 이 함수는 보여지는 모든 셀에 대해 다시 호출(reload)합니다. 약간 무거운 메소드이지만 그렇게 문제 될 것이 없습니다. 데이터 전체를 reload 하는 것이 아니라 보여지는 셀에 대해서만 호출되기 때문입니다.

 

📐 row의 높이 설정하기

 

• Table이 가진 Row의 높이를 설정하는 방법은 세가지가 있습니다.
  1. rowHeight 사용하기
  2. rowHeight는 테이블 뷰의 변수입니다. 스토리보드에서 설정 가능하며 항상 그 높이가 되도록 행을 고정시킵니다.
  3. 오토레이아웃 활용하기
  4. Auto Layout을 활용해 행 높이를 설정할 수 있습니다. 이것은 복잡한 경우의 셀에 해당합니다. 예를 들어, 과일에 대한 디테일한 정보가 많다면 셀의 크기는 커져야합니다. 반대로 정보의 양이 작다면 셀의 크기는 작아져야합니다. 제대로 설정한다면 일반적인 뷰가 행의 높이를 조절합니다. 일반적인 UIView를 행 내부에서 상위 뷰로 놓고 정보를 입력합니다. 이를 드러내는 제약을 설정합니다. 그리고 행의 가장자리에 그 일반적인 뷰를 드러내도록 제약을 설정합니다. 이를 통해 테이블 뷰가 나타나면 오토레이 아웃으로인해 어떤 크기를 가져야하는지 알 수 있게 됩니다. 이를 위해 1번의 rowHeight가 아니라 UITableViewAutomaticDimension으로 설정합니다.
  5. tableView 메소드 이용하기
  6. tableView(heightForRowAt indexPath: ) 메소드를 통해 row의 높이를 조절할 수 있습니다. 이 메소드는 해당 인덱스를 가진 행의 높이를 반환합니다. Auto Layout 없이 효과적으로 높이를 계산할 수 있다면 이것은 좋은 방식이 될 수 있습니다.
• Collection View의 경우도 기본적으로 Table View와 같지만 sizeForItemAt이라는 요소가 하나 추가됩니다. 왜냐하면 Collection View는 줄로 되어 있는 것이 아니라 하나의 요소가 Rectangle하게 구성되어 있으므로 공통적인 높이가 없습니다.

 

🦄 Table View의 Header 넣기

• Table View가 여러 섹션을 가지고 있을 때 섹션의 이름(header)을 넣는 것은 매우 쉽습니다. 아래의 메소드를 활용합니다.
• func tableView(_ tv: UITV, titleForHeaderInSection section: Int) -> String?

Reference: Stanford CS193p by Paul Hegarty