[iOS] 커스텀 프로토타입 셀에 대해 알아보자~! - HoonIOS

안녕하세요 HoonIOS입니다. :)

 

다른 포스팅에서 프로토타입 셀의 종류에 대해 알아봤습니다.

 

테이블 뷰 컨트롤러를 구현하면서 커스텀 프로토타입 셀을 사용했습니다.

구현 방법이 궁금하시다면 들어가서 한번 읽어 보시는 것을 추천드리고 위의 방식은 아울렛 변수로 구현한 것입니다.

 

 

 커스텀 프로토타입 셀이란?

 

커스텀 프로토타입 셀은 셀을 구성할 때 제약적이지 않고 자유롭게 셀을 구성을 할 때 많이 사용을 합니다.

 

따라서 자유도가 매우 높겠죠?

 

커스텀 프로토타입으로 설정하는 것은 그렇게 어렵지 않습니다.

 

* 사진 설명

• 테이블 뷰 셀의 style인스펙터에서 custom으로 설정을 해주면 됩니다.
• 설정을 해주면 오른쪽과 같이 아무것도 없는 빈 테이블 뷰셀이 구성되게 됩니다.

※ 번외

 프로토 타입 셀의 높이를 조절하는 방법은 총 두 가지가 있습니다.

1. 첫번째
   - 프로토타입 셀의 리사이징 핸들을 드래그하면 가로길이와 세로길이가  팝업으로 표시되는데 이것을 참고해서 프로토타입 셀의 높이를 손쉽게 맞출수 있습니다.

   

2. 두번째
   - 테이블 뷰를 선택하고 사이즈 인스팩터의 TableView에서 RowHeight 항목 옆에 Automatic 체크 박스를 해제하고 직접 원하는 높이를 입력하면됩니다.
   - 단 이것은 테이블 뷰 안에 있는 모든 셀의 높이를 일괄 설정을 합니다.

 

 

기본 프로토타입 셀의 스타일에서는 textLabel, detailTextLabel을 통해 라벨들을 직접 접근을 할 수 있었지만 커스텀 프로토타입 셀은 그게 아닙니다.

 

그래서 프로토타입 셀 안에 있는 객체들을 소스코드에서 연결하기 위해서는 총 2가지 방법이 있습니다.

 

1. 태그 속성 값을 이용하는 것
2. 아울렛 변수를 연결하여 참조하는 방법

 

우선 태그 속성 값을 이용하는 방법에 대해 먼저 알아보겠습니다.

 

태그 속성 값을 이용

 

태그 값을 이용하는 것은 해당 객체에 식별할 수 있는 일종의 아이디나 일련번호를 주는 것입니다.

 

손쉽게 구현 가능해서 작업해야 할 부분이 상대적으로 적다는 장점이 있지만 관리하기가 매우 어렵다는 단점이 있습니다.

 

관리하기 어려운 이유는 화면에 있는 수많은 요소들 모두 번호를 붙여주고 그에 따라 관리를 해야 되기 때문이죠 나중 되면 이 속성은 무슨 태그 값을 줬지.... 이러고 헷갈리는 게 다수입니다.

 

그럼 이제 태그를 통해 설정을 해보겠습니다.

 

* 설명

• 라벨을 101, 102로 이미지는 103으로 태그를 설정해주겠습니다.

 

 

이 블로그 포스팅에 했던 부분에서 큰 차이가 없고 셀을 구성하는 cellForRowAt에서 셀들을 뿌려주는 부분만 바꿔주면 됩니다. 

 

한번 구현해보겠습니다.

 

* 코드 설명

• 앞의 포스팅에서는 아울렛 변수를 해줬으므로 해당 아울렛변수를 가져와 값을 넣어줬지만 이번에는 태그를 사용하여 구현했습니다.
• 프로토타입 셀에 있는 각 객체에 태그를 넣어줬던 값을 통해 객체의 인스턴스를 생성하려면 viewWithTag(_:) 메서드를 사용하면 됩니다.
• viewWithTag메서드는 레이블, 이미지뿐만 아니라 버튼, 스위치 버튼 등 객체 대부분을 불러오는 데 사용을 할 수 있습니다.
• 이렇게 viewWithTag메서드를 통해 가져온 인스턴스는 UIView형태로 되어 있기 때문에 적절한 타입으로 다운 캐스팅을 해줘야 합니다.
• 잘못된 태그 값을 받았을 때를 대비해서 옵셔널 다운 캐스팅을 통해 옵셔널 타입으로 정의를 해야 됩니다.

그럼 이렇게 앞의 결괏값과 같은 결괏값이 나오게 됩니다.

 

 

 

 아울렛 변수를 이용하여 구현하기

 

앞에서 포스팅을 했는데 간단하게 설명을 한번 더 해보겠습니다.

 

 

UITableViewCell을 상속한 클래스를 만들어줍니다. 그리고 스토리보드에서 TableViewCell과 해당 클래스를 커스텀해줘야 합니다.

 

테이블 뷰 셀을 클래스와 연결을 해줬으니 이제 각 셀의 라벨 및 UIImageView를 연결해 주기 위해 아울렛 선언을 해줘야 합니다.

 

* 코드 설명

• 이렇게 각 라벨을 설정해준 이유는 이것은 커스텀으로 설정되어 있기 때문에 기본 테이블 뷰 셀에서는 해당 UILabel이 선언되어 있지 않습니다.
• 따라서 테이블 뷰 셀을 상속받은 클래스에다가 구현을 해준 것입니다.

이제 테이블 뷰 행을 구성해 보겠습니다.

 

* 코드 설명

• 테이블 뷰를 재사용 큐를 사용하여 테이블 뷰의 identifier로 해준 값을 통해 테이블 뷰 셀의 인스턴스를 생성합니다.
• 여기서 중요한 점은 테이블 뷰셀을 커스텀마이징해줬기 때문에 customPlayer로 캐스팅을 해줘야 합니다.
• 데이터 소스의 값을 아울렛변수 선언을 해준 객체들에게 값을 넣어주면 됩니다.

 

이렇게 커스텀 프로토타입 셀을 총 2가지 방법을 이용해서 구현을 해봤습니다.

태그보다는 아울렛변수가 유지관리하거나 개발을 할 때 더 편하니 아울렛 변수를 이용하는 것을 더 추천드립니다.