[iOS - swift] 7. 테이블 뷰 (table view)

1. 테이블 뷰가 나온 배경

 - 방대한 콘텐츠를 표현하기 위함

 - 테이블 뷰의 완성 =  테이블 뷰 + 섹션1(테이블 뷰 셀 + 콘텐츠 뷰) + 섹션2(테이블 뷰 셀 + 콘텐츠 뷰) + 섹션n(...)

2. 일반적인 테이블 뷰

 - 테이블 뷰 셀의 종류 : Basic, Right Detail, Left Detail, Subtitle, Custom

 

1) 테이블 뷰 생성 : UITableViewController

  - 통째로 테이블 뷰 생성 : 스토리보드에서 UITablewView 드래그엔 드롭

---

  cf)  UITableViewController가 아닌, UIViewController에서 테이블 뷰 생성 : (1) ~ (4)작업

        (delegate, datasource, table view 각 추가)

      (1) "Table View"드래그 앤 드롭 

      (2) "Table View Cell"드래그 앤 드롭, tableView 뷰를 UIViewController에 @IBOutlet변수로 생성(타입은 UITableView!, 이름은 tableView로 설정된 상태)

      (3) 클래스 부분에 프로토콜 두 개를 extension으로 추가 : UITableViewDataSource, UITableViewDelgate

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell")
        cell.textLabel?.text = "\(indexPath.row)번째 데이터입니다"
        return cell
    }
}
 
extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }
}
 

    (4) 권한 부여 : self.tableView.dataSource = self, self.tableView.delegate = self (또는 스토리보드에서 Dock Bar의 뷰컨트롤러를 테이블 뷰에 드래그앤 드롭 -> dataSource와 Degeate연결)

self.tableView.dataSource = self
self.tableView.delegate = self

 

  * 테이블 뷰에서 데이터가 없는 줄들을 없애는 방법은 텅 빈 view를 table view cell 밑에 높으면 해결

---

2) table view cell을 선택하여 id기입 ( UITableViewController안에서 사용할 재사용 큐에서 셀을 참조하기 위함 )

 

attribute instpector

 

3) 테이블 뷰 셀의 종류

 - static Cells(정적인 방법) : 프로그래밍적으로 구현한 것이 아닌 스토리보드에서 직접 구성한 것

 - dynamic cells(동적인 방법) : 고정되지 않고 갱신되는 내용을 표현할 때 사용 (주로 사용)

     -> 데이터 바인딩 : 데이터 소스를 테이블 뷰의 각 행에 연결하는 과정

                                  데이터 전달에 유용하게 하기 위해서는 아래와 같은 데이터 소스를 생성

class MovieVO {
  var thumbnail: String? // 영화 섬네일 이미지 주소
  var title: String? // 영화 제목
  var description: String? // 영화 설명
  var detail: String? // 상세정보
  var opendate: String? // 개봉일
  var rating: Double? // 평점
  
  // 영화 썸네일 이미지를 담을 UIImage 객체를 추가한다
  var thumbnailImage: UIImage?
}