iOS - 목록형 씬

목록형 씬

   다수의 데이터 출력

   테이블 뷰 구조

      테이블 뷰

         클래스 : UITableView
         스크롤 뷰 상속
         셀을 기반으로 다수의 컨텐츠 출력

      테이블 뷰 구조

         셀
         섹션, 섹션 헤더/푸터
         테이블 뷰 헤더/푸터

   테이블 뷰 속성

      셀 생성 방식 : 정적, 동적
      셀 구분선
      셀 선택
      인덱스

      테이블 뷰 스타일 : Plain Style, Grouped Style

   
   테이블 뷰 데이터 소스

      컨텐츠에 대한 정보 제공
      섹션과 셀 개수
      셀 제공

   
   테이블 뷰 데이터 소스 연결

      

   셀 위치 정보


      IndexPath

         위치 정보 타입 : Index
         위치 정보 얻기(섹션, 로우)

var section: Int { get }
var row: Int { get } 

      위치 정보 생성

let indexPath = IndexPath(row: 1, section: 0)

 

   테이블 뷰 데이터 소스 예제

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
   return data.count
}

func tableView(_ tableView: UITableView,
   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   let cell = UITableViewCell()
   
   // 배열에서 항목 데이터 얻기
   let item = data[indexPath.row]
   return cell
}

 

   테이블 뷰 셀


      셀 스타일
     
         커스텀
         Basic
         Right Detail, Left Detail
         Subtitle

      셀에 컨텐츠 출력

         셀 종류에 따라서 일부 뷰는 nil

      셀 재사용

         테이블 뷰에서 스크롤 동작
         셀이 새로 나타나고 사라짐
         사라지는 셀을 재사용

      재사용 가능한 셀 찾기

         하나의 테이블 뷰에는 다양한 종류의 셀 사용
         개별 셀 종류마다 고유의 ID(재사용 ID) 부여

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   var cell = tableView.dequeueReusableCellWithIdentifier("CELL_ID")
   if nil == cell {
      cell = UITableViewCell(style:.default, reuseIDentifier: "CELL_ID")
   }
   cell!.textLable?.text = "항목 내용"
   return cell!
}

      프로토타입 방식으로 셀 다루기

         테이블 뷰에 사용하려는 셀 등록
         재사용 가능한 셀 얻기와 셀 생성을 한번에

      테이블 뷰에 셀 등록

         테이블 뷰 속성 중 Content를 Dynamic Prototype
         Prototype Cells에서 등록하는 셀 개수 설정

   
      프로토타입 방식의 셀 속성

            Style : 셀 스타일
            Identifier : 재사용 ID
            Selection : 셀 선택
            Separator : 셀 구분선

      재사용 ID

         코드에 작성한 ID와 다르면 에러 발생
         하나의 테이블 뷰에는 유일한 ID 작성

      

테이블 뷰 이벤트


   테이블 뷰에서 사용자 행위

      테이블 뷰 스크롤
      테이블 뷰 셀 선택
      테이블 뷰 셀의 컨트롤 사용


   
   
테이블 뷰 구조하는 방법

         1. 테이블 뷰 제약조건 추가

         2. 테이블 뷰 데이터 소스 추가

         3. 테이블 뷰에 프로토타입 셀 추가

         4. 각 셀 별로 Style, Identifier 변경

         5. 이벤트 처리를 위해 델리게이트도 연결