4. Custom Cell

애플에서는 충분히 활용가능하고 디자인 잘 된 Cell을 제공하고 있지만 실제 앱을 만들때는 제공하는 다양하고 자신의 서비스에 맞는 데이터 표현이 각각 다르기에 Cell로 데이터 표현시 어떻게 하면 사용자 정의가 가능한지를 살펴보자.

 

 

 

우리는 이렇게 생긴 Custom Cell을 만들어 보려고 한다.

 

 

---

 

 

 

Custom Cell의 경우 ViewController 외부에 또다른 Class로 선언되며,

당연히 이름은 알아서 지정하고, UITableViewCell을 상속받아 사용된다.

 

 

 

이렇게 필요한 것들을 변수로 선언하고 타입이 각각 어떤 UI 기능 인지를 지정해주면 된다.

 

왜 weak 키워드를 사용했는지? 왜 타입 젤뒤가 !가 되었는지?

대충 조사해보면 weak는 optional로 선언되야 한다고 했는데 !가 되었는지 살펴보자!

 

 

 

---

 

 

 

이제 우리는 우리가 만든 Custom Cell을 현재 Cell의 identify inspector에 지정해주어야한다. 

 

 

 

이제 accessory의 checkmark를 해제하고, Cell 사이즈를 200으로 맞추자

 

 

 

 

 

 

그 후 UI ImageView, UI Label를 삽입한다.

복사할 땐 옵션을 누르고 땡기면 된다.

 

 

넣었으면 UI Component에 auto layout를 적용한다.

 

 

---

 

 

 

[UI Image View]

UI Image View의 경우는 Aspect Ratio(가로세로비율, 측면비율)을 7:10로 지정한다.

 

 

Content View에 갖다대고 Leading으로 왼쪽에서 얼마나 떨어지는 지를 결정하고(15),

Cell 높이의 중앙에 위치하도록 Center VertiCally를 설정한다.

Equal height를 -10으로 설정해서 작게 만든다.

 

 

 

 

[UI Label]

 

이름 변경 후 Image View와 수형(Horizontal) 과 Content View와 Trailing(오른쪽)을 맞춘다.

높이 지정은 가운데 지정이니 Content View와 연결 후 가운데 오도록 설정한다.

너무 중간이니깐 center 기준 -30으로 지정한다.

 

 

상금의 경우 이름에 대하여 적절한 Vertical이 형성되도록 선택하고, Center Horizontal을 설정한다.

 

우리는 현재 Custom Cell을 만들고 Cell의 요소들을 StoryBoard에 만들었으니 이제 코드와 UIComponents를 연결하면 해당 UI Components가 코드의 변수와 연결된다. 

 

 

 

---

 

 

 

이제 데이터를 삽입하자.

 

 

 

그리고 Cell의 갯수를 지정하는 UITableViewDataSource에서 데이터의 갯수에 해당하는 값을 return한다. 

 

 

 

cell의 갯수는 8개로 나오고 TableView에 맞게 스르륵 스크롤 잘 된다.

그럼 이제 데이터를 표현하도록 코딩해보자~

 

 

---

 

 

 

 

 

 

현재 Cell의 타입은 UITableViewCell이다. 여기서 우리가 사용하려는 타입은 ListCell이다. 

 

 

 

그러면 ListCell은 현재 UITableViewCell을 상속받고 있으니까, 

 

 

 

Down Casting을 사용하게 되는데 상위클래스는 반드시 하위클래스로 casting되지 않을 수 있으므로 optional casting을 이용한다.

해당 사진에서는 if let 구문을 사용햤는데 해당 코드에서는 guard 키워드를 사용하려 한다.

 

 

 

 

ListCell로 Down casting을 했는데 이게 nil이 되버리면 UITableViewCell을 리턴하고 아니면 정상적으로 ListCell을 반환하도록 하였다. 

 

 

 

 

 

완성~~~~