Toy Project/One Piece (iOS)

3. TableView 실습

개발자킹콩 2021. 1. 31. 02:49

Assistant를 누르면 ViewController 화면과 코드를 동시에 볼수있다.

TableView를 사용하려면 UITableDataSource, UITableViewDelegate를 상속받고 알맞은 protocol을 지켜야한다.(질문에 대한 답을 해야한다.)

 

구조는 다음과 같다.

 

 

 

여기서 위 tableView는 몇개의 Cell을 보여줄것인지를 결정하는 것이다.

UITableViewDataSource에 해당한다.

아래의 tableView는 cell들이 어떻게 표현되는지, 보여지는지를 정의하게 되는 것이다. 

 

TableView는 Cell을 통해서 데이터를 출력하게 되는데, 이때 이 Cell들은 재활동되어 화면에 보이는 것만큼의 Cell만 필요하게 된다.

 

 

 

 

 

 

재활용되는 셀을 가져오는 것이 tableView.dequeueReusableCell에 해당한다.

 

재활용될때의 기능을 수행하고 이 데이터들을 구분짓는 구분자가 필요하다. 

이 구분자를 “cell”로 지정한 것이다.

여기서 TableView Cell의 identifier가 cell로 지정되어 있어야 정확히 지정된 것이다.

  1. tableView.dequeueReusableCell로 재활용하는 기능을 사용한다.
  2. 여기서 identifier이 “cell”이라고 String을 지정한다.
  3. 그럼 TableView Cell의 identifier이 해당 String과 동일하게 적히도록 지정한다.
  4. for: IndexPath 는 셀의 위치를 표시하는 것이다.
  5. 이제 UITableViewCell타입을 리턴하게 되는데 변수 cell이다.

 

위 함수의 경우 UITableViewCell을 반환 해야하고 cell을 리턴하자.

그리고 attribute inspector의 Accessory를 None에서 Checkmark로 변경하자. (체크표시)

 

 

 

코드를 이렇게 작성하고 시뮬레이션을 돌리면 accessory를 Checkmark로 지정 했는데 체크표시가 되어있지 않다

이유는 현재 TableView의 Cell과 코드가 연결되어 있지 않다.

 

우리는 아직 Table View의 Delegate(대표자, 대리인)가 ViewConroller이라고 지정하지 않았다.

TableView가 누구에게 물어볼 것인지를 정하지 않은 것이다.

 

예를 들자면 Auto layouting 하듯이 —>  TableView를 선택후 컨트롤을 눌러 나오는 선을  ViewController에 갖다대어 delegate와 dataSource를 지정해주면 된다.

(아직은 DataSource부분만 완성하긴 했다.)

 

그 후 TableView의 Connection inspector을 확인해보면 DataSource와 Delegate가 연결되어 있음을 확인할 수 있다.

 

그 의미는 TableView가 셀을 몇개 이용할 것인지, 셀 안의 데이터를 어떻게 표현할 것인지에 대한 질문을 DataSource에게 하게 되는 것이고, 이에 대한 대답을 코드에서 확인하도록 되는 것이다. 

물론 TableView의 Cell을 눌렀을 때 어떤 반응, 액션을 보일 것인지에 대한 질문은 Delegate에게 하게 되는 것이고, 이에 대한 대답은 Delegate의 코드부분에 작성하면 되는 것이다.

 

 

 

 

그럼 이제 클릭 되었을 때 어떻게 반응 하는지에 대한 부분을 작성해보자

 

didDeselectRowAt indexPath 속성을 갖는 tableView로 Delegate의 답을 표현가능하다.

 

 

 

 

몇번째 것이 클릭 되었는지 알기 위해서, 몇 번째에 대한 정보를 갖고 있는 IndexPath가 파라미터로 들어오니 그것을 출력해보자

참고로 이것도 index이기에 0부터 시작하는 것을 주의하자

 

 

 

Cell의 갯수를 늘려서도 사용해보자