iOS ) 커스텀 테이블뷰 사용하기

 

커스텀 셀을 사용한 테이블뷰 만들어보기!

 

어떤 테이블뷰를 만들어볼 거냐하면..

 

이 사진을 쪼개서...

각 신체부위별(...) 테이블뷰를 만들어볼 거임

 

Assets.xcassets에 사용할 이미지 파일 넣어주고...

 

뷰에 테이블뷰를 넣어주고, constraint을 줌

그리고 뷰컨트롤러에 테이블을 연결해줍니다.

 

테이블뷰의 attribute inspector - prototype cells: 1로 만들어주고,

셀에 어떤 식으로 들어갈지 꾸며줌 

이미지뷰와 Label을 넣어주고, constraint을 준 모습

 

이제 이 테이블뷰 셀에 연결할 수 있는 클래스를 만들어줘야 하는데,

먼저 table view cell의 atrributes inspector - Identifier : 에서 '셀 이름'을 정해줍니다

본인이 원하는 이름으로 입력해주면 됨

 

이제 new file - Cocoa Touch Class를 하나 만들어줄게요

 

파일이 만들어지면 클래스 안에 코드가 뭐라뭐라 있는데 쓸거면 써도 되고, 지워도 아무런 지장 없음

지금 이 클래스를 만든 이유는 그냥.. ImageView와 Label에 대한 참조를 하려고 만든 것 뿐이라 지워주고,

IBOutlet을 연결해줍니다.

 

 

 

이렇게 만들어주고, 이제 다시 main.storyboard로 가서 연결을 시킵니다

 

 

table cell - Identity inspector 에서, Class를 방금 만든 클래스로 지정해주고

 

cell을 우클릭 - 방금 만든 iconImageView, label을 각각의 ImageView, Label에 연결시켜줍니다.

옆에 있는 동그라미를 누른 상태로 드래그하면 연결됨!

 

이제 준비작업이 끝났으니 입맛대로 테이블뷰를 만들어볼 차례임

 

 

데이터를 채울 데이터를 담을 배열을 하나 만들어줄텐데

image, label 두 가지 자료를 사용할 거니까 구조체를 하나 만들어주고, 그걸 이용해서 데이터를 만들어볼게요

 

이렇게 뷰컨트롤러 안에 하나 만들어주고... 

 

이제 데이터를........어떻게 테이블에 담냐는 건데....

 

 

먼저, 테이블뷰는 '어떻게 보여줄지'를 다루는 거고,

'무엇을 보여줄지'는 UITableViewDataSource 프로토콜이 담당합니다.

자세한 건 아래의 공식문서에서..

https://developer.apple.com/documentation/uikit/uitableviewdatasource/

https://developer.apple.com/documentation/uikit/views_and_controls/table_views/filling_a_table_with_data

https://developer.apple.com/documentation/uikit/uitableviewdatasource/1614861-tableview

 

 

ViewController class 옆에 하나 추가해주던지..

아니면 extension으로 따로 빼줍시다.

 

 

이 프로토콜에는 두 가지 메서드가 필요한데,

--------

하나는 테이블의 행의 개수(섹션 개수는 선택사항)를 리턴

func numberOfSections(in tableView: UITableView) -> Int  // Optional 
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

 

하나는 각 셀의 특정 위치에 삽입할 데이터 소스에 관한 것

func tableView(_ tableView: UITableView, 
  cellForRowAt indexPath: IndexPath) -> UITableViewCell

 

------------

 

현재 이 메서드들이 없는 상태여서 경고메시지가 뜨는데, fix를 누르면 2개의 메서드가 저절로 입력될거예요

안되면 수동으로 입력해주면 됨..

 

 

이렇게 필요한 메서드들을 만들어주고

 

 

 

데이터를 실제 화면에 넣어주기 위해 self에 위와 같이 할당해줍니다

 

 

이제 실행을.......해보면............

 

 

 

응 잘됨..