원피스 현상금 랭킹앱 만들기(3) - 테이블뷰 프로토콜

 

 

테이블 뷰를 쓰는 이유는? 

여러 아이템을 리스트형태로 보여주기 위해 사용한다.

 

테이블뷰가 질문함?

리스트를 표현하려고 할때

테이블 뷰를 뷰컨트롤러에 추가했다. 그리고 실제로 사용하려하면 테이블뷰가 데이터를 보여주기전에 질문을 한다.

 

- 테이블뷰 셀 몇개? 

- 테이블뷰 어떻게 보여줄까? (어떤 셀을 이용해서 보여줄건지)

- 테이블뷰 클릭하면 어떡해? (어떻게 반응할건가)

- etc

 

이밖에도 다양한 상황에서 다양한 반응이 있다. 그에따라 질문이 많아질 수 있다.

모두 답할필요는 없지만 위에 2개(셀몇개, 어떻게 보여줄지)는 답을 해줘야한다.

UI테이블뷰를 사용하기위해서 이렇게 답해줘야한다.

 

테이블뷰를 리스트로 보여주는 서비스를 이용해서 해야할 일들이다. 

해야할일들을 한다는 것이 Protocol이다. 

https://h1guitar.tistory.com/68

프로토콜

 

테이블뷰 서비스를 쓰기위해 해야할일

- 테이블뷰 셀 몇개?

- 테이블뷰 어떻게 보여줄까? (어떤 셀을 이용해서 보여줄건지)

- 테이블뷰 클릭하면 어떡해? (어떻게 반응할건가)

- etc

 

첫 두개는 UItableView 데이타 소스를 이용해서 답해준다. 

세번째 질문은 UItableViewDelegate를 이용해서 답해준다. 

 

스토리보드(메인)화면에서 우측상단의 석삼 같은 가로 짝대기들을 누르고 Assistant를 누른다

그러면 해당 스토리보드와 연동된 코드가 보인다.

 

아래와 같이 UITableViewDataSource와 UITableVIewDelegate를 입력하면 경고창이 뜬다.

 

너가 입력한 BountyViewController의 타입은 UITableViewDataSourced의 프로토콜을 충족시키지 않는데 양식 추가해줄까? 하는 내용이다. FIX버튼을 누르면 하단에 입력할 수 있도록 양식이 생겨난다.

너무 놀라지 말자 회색 박스로 되어있는 [code]부분만 수정하면 된다.

일단 이 내용을 override 밑으로 옮겨주자.

그다음 상단코드에는 원하는 셀의 갯수 아래에는  어떻게 보여줄건지를 입력한다.

identifier를 입력하고 Main 스토리보드에서 해당 셀을 누른다음 우측 상단에 identifier입력하는 곳이 있다 똑같이 cell을 입력해주자.

그다음 어디에서 이걸 가져올건지 정해야한다. 일단 indexPath로 입력 

 

그러면 끝이 아니라 이제 이 테이블뷰를 적용할 바운티 뷰컨트롤러에 연결해주어야한다.

테이블뷰에서  ⌃ 컨트롤을 누르고 ViewController에 연결한다.

그러면 어디에 링크할지 뜨는데 dataSource와 delegate을 각각 적용시켜준다. 

 

그러면 우측상단에  Outlet에 적용된 것을 확인할 수 있다. 

그리고 추가로 셀의 형식을 체크마크 되어있는 모습으로 수정해주려고 해당 cell 을 누르고 Accessory항목을 Checkmark항목으로 수정한다. (Selection 항목은 누르면 클릭했을 때 바뀔 색깔을 선택할 수 있다. ) 

이제 UITableViewDelegate 어떻게 반응할 건지 코딩해줘야한다.

 

[code]부분에 몇번째인지에 대한 정보를 가지고 있는 파라미터 indexPath를 입력

 

그다음 에뮬레이터를 돌려본 화면 !!

저는 셀을 5개로 설정해뒀습니다. 

 

영상을 보면 각 셀을 클릭 했을 때, 콘솔창에서 각 셀의 번호를 볼 수가 있다.  

그렇다. 그 셀들은 번호를 가지고 있는 것이다.