1. TableView

* 정의

- 테이블 뷰는 컨텐츠를 세로방향 목록으로 구현할 때 사용한다. 테이블 뷰가 쓰인 예시로는 설정, 전화번호기록부가 있고, 이러한 것들은 모두 세로로 구현이 되어 있다.

하나의 그룹을 [section] 이라고 하며 그룹에 속해 있는 각 개별 항목을 [cell] 이라고 한다.

현재 화면의 테이블 뷰를 보면 4개의 section 과, 각 section 마다 cell 이 1개, 3개, 1개, 8개가 있다. 즉, 2차원 배열로 구성이 되어 있어 특정 cell 의 위치에 접근하고 싶다면 section의 인덱스, cell의 인덱스를 모두 고려해야 한다.

* 테이블 뷰는 두 개의 스타일을 가지고 있다고 한다.

1. 그룹 스타일	section이 여백으로 구분되어 있는 스타일.

2. 플레인 스타일	section으로 구분되어 있지만, 여백이 없어 Header 나 Footer로 구분을 해줘야 하는 스타일.

* cell 오른쪽에 accessory view를 설정하여 이미지를 넣을 수도 있다. 화면에 표시되는 방식을 유추할 수 있게 힌트를 제공 해준다.

ex) Disclosure Indicator

* > 모양이 cell 맨 오른쪽에 추가 되었다.

* 이제 본론으로 들어가서 테이블 뷰를 활용해서 세로로 스크롤 할 수 있는 목록을 구현해보자. 기본적인 셋팅은 다음과 같다.

1. 화면에 테이블뷰 추가 드래그앤 드롭

2. 화면 전체를 채우자

3. 핀에서 위,아래,왼쪽,오른쪽 여백 제약 Add!

4. 테이블 셀도 추가!

일단 실행해보자 command + R !!

이대로 실행하면 테이블 뷰에 하나의 셀이 표시될 것 같지만 표시되지 않는다....... 왜 그럴까?...;;

* 방금 추가한 셀이 프로토타입 셀이기 때문이다. 프로토타입 셀은 단지 탬플릿 같은 역할일 뿐이다. 일단 계속해서 이 프로토타입 셀을 디자인 해보자.

* 테이블 뷰 셀을 선택하고, Attribute inspector를 클릭해보자. 그러면 현재 스타일이 커스텀이라고 되어 있는데 셀디자인을 직접구성할때는 직접 커스텀을 사용하면 된다. 하지만 귀찮으니 우리는 미리 구현되어있는 Basic Style을 선택하자! Basic Style은 하나의 텍스트를 출력할때 사용한다고 한다.

* 셀렉션 옵션은 셀을 선택했을때 시각적으로 강조하는 방법을 설정한다. 디폴트로 되어 있을 때에는 회색배경이 표시된다. 일단 디폴트로 설정해보자.

이제 셀디자인은 끝(?) 이 났다 !

* 현재 디자인한 이 셀은 우리가 셀을 생성할 때 템플릿으로 사용되는 프로토타입 셀이다. 테이블 뷰는 셀을 생성할 때 "문자열" 을 기준으로 프로토타입 셀과 진짜 셀을 구분한다. 그렇기 때문에 우리는 identifier의 입력필드에 가서 테이블 뷰가 셀을 식별 할수 있게끔 "cell" 이라는 문자열을 입력해보자.

이제 테이블 뷰는 셀을 식별할 수 있게 되었다. 이번에는 테이블 뷰에 표시할 데이터를 지정해보자. 테이블 뷰는 Delegata Pattern을 통해서 필요한 데이터를 델리게이트에게 요청하고 델리게이트는 이 요청을 받아서 테이블 뷰에게 데이터를 리턴 해준다고 한다. 우리는 이제 이 델리게이트를 구현하면 된다. 보통 데이터를 공급하는 델리게이트를 datasource 라고 부른다. datasource 에서 구현해야 하는 메소드는 UITableViewDataSource 프로토콜에 선언되어 있다. 일단 프로토콜에 대한 이야기는 뒤로 미루기로 하고 , 테이블 뷰를 선택한 다음 컨트롤키를 누른 상태에서 드래그앤드롭으로 뷰컨트롤러에 옮겨보자!

그리고 dataSource 를 선택 해준다. 이제 뷰컨트롤러가 테이블뷰의 데이터소스로 지정되었다 그렇다는 것은 이제 뷰컨트롤러가 델리게이트 되었다는 것을 의미한다!

이제 뷰컨트롤러에서 프로토콜 메소드를 구현해야 한다. 뷰컨트롤러 클래서 내부에서 구현하는 방법도 있지만 익스텐션으로 구현하는 것이 더 쉽고 간단하니 먼저 데이터들을 저장할 상수를 선언하고, 밑에 새로운 익스텐션을 추가하여 UITableViewDataSource 프로토콜을 채용하도록 선언해보자 !

그런데 뭔가? 이상하다.... ViewController 가 UITableViewDataSource 프로토콜을 준수하지 않는다는 에러메시지가 뜬다..왜지?

그렇다! 프로토콜은 반드시 따라야 하는 "규칙" 같은 것이다. 나는 지금 어떠한 "규칙"을 지키지 않았다!! 애플개발자 문서를 보도록하자!

Topics 파트를 보면 여러 메소드중에 아래에 작은 글씨로 Required 라고 기입이 되어 있는 특정 메소드 2개가 있을 것이다. 이 2개의 메소드는 우리가 테이블뷰를 구현할 때 반드시 사용해야 하는 메소드인 것이다. 그러므로 나는 저 메소드들을 작성해야 한다. 그러나 xcode는 참 편리하다. 자동완성기능이 있다. 그러므로 그냥 fix버튼을 눌러버리자!

그랬더니 개발자 문서에서 Required로 표시되어 있던 메소드가 추가되었다!

그럼 이제 익스텐션 내부에 선언된 메소드들을 살펴보자. 위의 개발자 문서에 나와있는대로 첫번째 메소드는 section에 표시할 cell의 수를 return 한다. 현재 list배열에 포함되어 있는 문자열의 갯수를 리턴해보자!

그리고 그 밑에 있는 메소드를 보자. 문서에는 테이블 뷰의 특정 위치에 삽입 할 cell을 tableView 가 datasource에게 요청한다고 나와 있다. 요청하기 위해서 이 메소드는 cell 을 생성하고 cell 에 표시할 데이터를 설정한 다음 리턴해야 한다. 리턴형을 보면 UITableViewCell 로 선언되어 있다.

cell을 요청할 때는 dequeueReusableCell 메소드를 호출해야 한다. 첫번째 파라미터에는 아까 설정했던 식별자를 전달 해야한다. 만약 이 파라미터로 전달한 식별자를 가진 프로토타입 셀이 존재하지 않는다면 크래시가 발생한다. 그러나 아까 우리가 식별자를 "cell" 로 지정해줬기 때문에 크래시는 나지 않을 것이다!!!

두번째 파라미터에는 델리게이트메소드로 전달된 indexPath를 그대로 전달한다. indexPath 란 현재 메소드에서 return 하는 cell 이 표시되는 위치이다.

1. section 속성을 통해 section 인덱스를 얻을 수 있고

2. row 속성을 통해 cell 인덱스를 얻을 수 있다.

* 이제 cell 상수에는 새로운 cell 이 저장된다. 이제 이 cell 에 실제 데이터를 표시할 수 있게 해야 한다. 아까 전에 cell Style을 Basic으로 하면서 하나의 레이블이 추가 되었다. 이 레이블에는 텍스트 레이블 속성으로 접근할 수 있다. 레이블에 접근하여 배열에 저장되어 있는 문자열을 할당하고 출력할 수 있도록 구현해보자.

cell 을 return 해주는 코드까지 작성을 하면 이제 테이블뷰는 리턴된 셀을 받아서 화면에 출력한다. 이제는 실행을 좀 해보자!!

command + R !!!

* 배열에 저장된 문자열이 테이블 뷰에 출력된다 !!!!