[iOS 앱개발 - Swift] 테이블뷰에 커스텀셀 추가

[iOS 앱개발 - Swift] 테이블뷰에 커스텀셀 추가

이전까지는 기본으로 제공되는 셀의 스타일을 이용했다면, 이번포스팅에서는 원하는 모양으로 셀을 만드는 방법을 알아봅시다!

우선 이전 포스팅에서 만들어 둔 테이블 뷰를 재활용하는 걸로 할게요. 어차피 단순하게 만들어둔 테이블이라 편하게 만들어서 사용하면 될 것 같네용!

 

이 포스팅은 edwith 의 부스트코스 iOS 프로그래밍 강좌를 보면서 공부한 내용을 정리하는 글입니다. 3번째 프로젝트의 테이블뷰에 대한 공부예요! 모든 강의와 자료가 무료이고, 네이버 아이디로도 이용할 수 있답니다. 관심이 있으신 분은 여기로!

---

Storyboard에 배치하기

일단 테이블뷰에 새로운 셀을 추가해줍니다. Inspector 에서 해당 셀의 Style을 Custom으로, Identifier 는 "customCell"으로 해줄게요. 그리고 셀에 2개의 레이블을 달아서 왼쪽 레이블에는 입력해준 메세지를, 오른쪽 레이블에는 메세지를 테이블뷰에 올린 시간을 담는 역할을 맡기도록 할게요.

 

Custom Cell을 담당하는 클래스 작성하기

해당 Custom Cell을 담당할 "CustomTableViewCell" 클래스를 작성해줄게요. [ ⌘ + N ] 으로 새로 만들기 창을 열어서 코코아 터치 클래스를 새로 만들어줍니다. 여기서 수행할 역할이 테이블 뷰 셀을 관리할 예정이니 UITableViewCell의 하위클래스로 만들어줍시다. 이름은 대충 아래처럼 지어줄게요.

 

 

여기서 커스텀셀에서 관리해줄 항목들을 작성해줘야 하는데, 우리는 셀에 레이블이 2개가 있으니, 이를 연결해줍시다. 표준 스타일의 셀에는 Title 이라는 레이블이 자동으로 연결되어 있던거였군요! 

 

Custom Table View Cell 스크립트

새로 만드는 셀을 커스텀셀로 설정하기

이전에는 기본적으로 만들어져있던 셀을 가져와서 Title을 집어넣고 글을 만들었었는데, 그 방법과 비슷한 방법으로 설정해주면 됩니다. 음, 거의 똑같다고 볼 수 있을 것 같네요?

 

위에서 작성한 CustomTableViewCell 의 instance인 cell을 하나 선언해주고, 여기에 기존에 cell을 선언해서 집어넣던 방법을 가져와 사용하면 됩니다. 그저 identifier가 다를 뿐이죠. 그런데 이 함수의 반환형이 UITableViewCell이기 때문에 type에 차이가 있어 에러가 발생해요. as 형변환을 통해 이를 CustomTableViewCell Type 으로 만들어줍시다.

 

 

위의 이미지에서 좌측 레이블에는 입력받은 text를 삽입하고, 우측 레이블에는 셀을 추가한 시간을 담고 있는데, 위의 timeFormatter는 이렇게 작성해주었어요.  이정도는 이제 간단하게 쓸 수 있죠. 후후후

 

 

이렇게 코드를 작성해주고 빌드를 하면 다음과 같은 결과를 얻을 수 있습니다. 

 

생각보다 높이가 너무 낮네요? 각 셀의 높이는 tableView의 delegate를 이용해 수정할 수 있어요. 이제는 익숙해질 때도 되었는데, 아직 델리게이트라는 단어가 좀 어색하네요 ㅋㅋㅋ

 

 

tableView를 입력해두고, height가 들어가는 메서드를 찾으니 요게 나오더군요. 얘도 똑같이 indexpath를 인자로 받아서 어느 섹션의 몇번째 행의 셀이 어느정도의 높이를 가질지 return 값으로 결정할 수 있는 메서드입니다. 귀찮으니 모든 셀의 높이를 50으로 통일해버릴게요. 이 코드를 ViewController에 넣어주고난 다음 새로 빌드를 해주면 다음과 같은 결과를 얻을 수 있습니다.

 

 

편--안

 

---

커스텀셀에도 작은 뷰가 포함되어 있어, 이미지나 글 같은 다양한 컴포넌트를 담을 수 있어요. 오토 레이아웃으로 제약만 잘 설정해주면 깔끔한 모양새로 반복적으로 셀을 만들어 넣을 수 있으니, 필요한 셀을 미리 만들어두고 적시에 사용해서 사용자경험을 좋게 만드는 데에 자주 사용해야겠다는 생각이 드네요.

 

TableView의 델리게이트로 어떤 것을 할 수 있는지에 대해서도 잘 알아둬야겠어요. 각 설정을 코드로 다룰 수 있다는게 편한 것 같기도 하면서 아직은 어색하단 말이죠 ㅋㅋㅋ. 좀 더.. 연습이... 필요해... 

 

---

지금 저는 edwith 의 부스트코스 iOS 프로그래밍 강좌를 수강하면서 글을 정리하고 있습니다! 서두에서도 말했듯이, 모든 강의와 강의자료가 무료로 개방되어있고, 네이버 아이디로도 강좌를 수강할 수 있을만큼 진입장벽이 낮아요. 기존에 프로그래밍을 배워서 기본기가 있는 상태에서 iOS 개발에 입문하시려는 분에게 딱 알맞는 강의라고 생각합니다. 제가 그랬거든요 ㅋㅋㅋ iOS 개발 실력이 늘고있어서 이 강좌를 듣기 잘한 것 같다는 생각이 자주 듭니당! 관심있으신 분은 아래 링크를 확인해보세용!

 

https://www.edwith.org/boostcourse-ios/joinLectures/12966

[부스트코스] iOS 프로그래밍 강좌소개 : edwith