원피스 현상금 랭킹앱 만들기(4) - 커스텀셀

 

 

보통 셀은 커스터마이징 한 것을 사용한다.

 

커스텀셀을 생성하기위해 

 

먼저 BountyViewController에서  하단에 클래스로 생성한다.  

이 클래스는 ListCell 로 명명하고 UITableViewCell을 상속받아 사용한다. 

안에 이미지뷰가 있어야 하고 

각각 이름과 현상금이 입력될 UILabel이 필요하다. 

class ListCell: UITableViewCell {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLabel: UILabel!
}

그리고 해당 셀을 누른 상태에서 우측에 Inspector의 Class를 같은 이름으로 지정해준다. 그러면 연결

이제 셀의 모양을 천천히 바꿔준다. 안에  imgView, UIlabel 2개를 넣어야 한다. 

 

셀을 먼저 클릭하고 셀의 높이를 수정 200

테이블뷰 클릭, Row Height를 자동에서 200으로 수정

 

그리고 UIimageView를 넣는다.

UIlabel도 넣어주고 복사해준다. 

이제 넣어준 UI컴포넌트들에  오토레이아웃을 적용 시켜준다.

 

imageView에서 컨트롤⌃ 을 누르고 살짝 옆으로 드래그를 하면 아래 그림처럼 나온다. 여기서 Aspect Ratio를 클릭하면 우측에 새롭게 생긴 옵션이 보인다. 거기서 Multiplier를 7:10으로 입력한다.  

imageView를 Content View에 드래그하면 나오는 창에서 

Leading , Center Vertically in Container , Equal Width를 선택하면
스토리보드에 내가 어떤 오토레이아웃을 설정했는지 시각적으로 볼수가 있따. 

이제 수치를 원하는 값으로 변경 시켜주자

 

그다음 Label을 수정한다.

폰트사이즈, 정렬, 볼드 등을 설정하고 Label이라는 초기설정을 원하는 이름으로 변경시킨다. 나는 Luffy라고 설정했다

그다음 오토레이아웃을 적용할 차례이다. 먼저 ImageView와의 관계를 설정한다. 

Luffy로 변경된 Label을 ImageView로 드래그,

Horizontal Spacing을 누른다. 이미지뷰로부터 수평적인 거리를 설정하기 위해서이다. 

그다음 라벨의 오른쪽도 설정을 해주기 위해 Luffy를 ContentView로 드래그 해서 Trailig Space를 누른다. 

라벨을 컨테이너를 기준으로 수직에서 가운데 설정하기위해 Center Vertically in Container를 선택한다. 

수직에서 가운데 설정은 아래 사진을 보면 알수있다. (나도 처음에 이게 무슨말인가 했다)

 

그다음 밑에 현상금으로 들어갈 Label의 폰 설정을 해준다. 여기서 상금도 수정~ 

이번엔 현상금 라벨을 Luffy 라벨에 드래그한다음 Vertival Spacing과 Center HorizonTally를 누른다.

(Vertical Spacing을 누르니까 Vertical Baseline Standard Spacing이 저절로 적용됐다) 

그럼 이제 이름 라벨을 기준으로 수직적인 거리조절, 수평적으로 가운데 설정이 됐다. 

 

이름라벨과의 Top space도 14로 수정해봅니다.

 

그리고 이름 라벨이 세로상으로 너무 중간에 있어서 위치를 수정해주기위해  -30정도로 수정한다.

여기서 수정하면

이렇게 올려준다. 

 

 

이제 이렇게 만든 것들과 아까 만들었던 UI컴포넌트를 연결한다. 

class ListCell: UITableViewCell {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLabel: UILabel!
}

 

스토리보드에서 Assistant를 켠상태에서 각 코드에서 컴포넌트를 매칭시켜준다. 

 

 

이제 BountyViewController로 돌아와서 데이터를 세팅한다. 

각 이름별로 상금을 세팅한다. 이름도 8개 상금도 8개

그리고 이제 셀의 갯수를 지정했었는데 이것을 임의의 숫자가 아닌 어레이의 갯수로 변경한다. 

변경

 

그렇게 다시 에뮬레이터를 구동시켜보면 이제 셀의 갯수가 8개로 반영되고 같은 내용만 반복되고 있는 것을 확인 할 수 있다. 

 

그리고 이미지가 보이지가 않는데 아직 이미지를 세팅하지 않았다. 

이미지 세팅하기

원하는 이미지를 Assets폴더에 드래그한다.

이제 이미지에 대한 데이터를 세팅해보자

상수로 설정한 cell의 타입은 tableView타입이다. 근데 우리는 ListCell을 쓰고 싶기 때문에 타입캐스팅을 해준다.

as? ListCell을 해주는데 값이 없을 수도 있으니까 앞쪽에 guard를 사용한다.  캐스팅이 안되는 경우는 UITableViewCell로 넘어가고 

nil이 아닌경우에는 밑으로 cell로 넘어가도록 만든다. 

 

이것은 if문으로도 구현할 수 있다. 

 

 

이제 셀에 데이터를 세팅해보자.

indexPath  인덱스정보의 row 숫자를 가져올 수 있다. 

만약 indexPath.row가 0이라면 nameList의 0번째 있는 브룩과 bountyList의 0번째 있는 3300000이 매칭이 된다. 

그리고 다시 구동을 해보면 반영된 화면을 볼 수가 있다. 

그리고 guard문으로 사용한 것도 똑같은 결과를 만든다.

guard문 같은 경우는 띄어쓰기가 안들어가는 효과가 있다.