[IOS] TableView (with xib)

 

이번 포스팅은 xib 파일을 사용한 tableView 구현에 대해 알아보겠다.

 

AppDelegate 혹은 SceneDelegate에서의 rooViewController 설정은 

앞 포스팅에서 확인 할 수 있다.

 

[IOS] TableView (with Storyboard)

 

[IOS] TableView (with Code)

 

TableView

먼저 tableView를 드래그 하여 rootView에 addSubView 시키겠다.

 

 

 

그리고 constraints를 하단 이미지와 같이 safeArea에 맞게 적용 시켰다.

 

 

그리고 ViewController.swift 파일로 드래그앤드랍을 통해 @IBOutlet을 선언한다.

@IBOutlet weak var tableView: UITableView!

 

 

Delegate, Datasource

 

tableView를 ViewController 버튼으로 드래그 하여

dataSource와 deleagate를 지정해주겠다.

 

 

Cell

 

cell을 드래그 하여 protoTypeCell을 생성했었던 스토리보드에서의 구현 방법과는 다르게

이번에는 xib 파일을 사용하여 구현을 할것이므로

새로운 CocoaTouchClass 파일을 생성하겠다.

 

 

 

그리고 xib 파일을 함께 생성한다는 조건에 체크한 후 생성을 하겠다.

 

 

그러면 swift 파일 하나와

하단 이미지와 같은 UITableViewCell의 xib파일이 하나 생성된다.

 

 

cell contentView에 imageView를 addSubView 하고

 

constraints를 좌측 이미지와 같이 잡아 주고

비율을 1:1로 설정을 해주겠다.

 

그러면 셀의 크기를 변경해도 1:1 비율에 맞게 

imageView 크기가 동적으로 맞춰지는걸 볼 수 있을것이다.

 

 

혹은 image의 크기의 제한을 두고 싶다면 아래와 같이 witdth의 제약을 추가하여 

해당 width와 1:1 비율을 적용 시킬수 있는 제약을 추가 해줄수도 있다.

 

 

스토리보드로만 구현할 당시 cell의 class를 지정해주었던 점과는 달리

xib 파일에서는 생성할 당시 swift 파일과 xib 파일을 함께 생성했기 때문에 

자동으로 class가 연결되어 있는걸 볼 수 있을것이다.

 

 

 

그 다음 cell을 재사용하기 위한 등록 절차를 보겠다.

xib로 구현할때는 이런식으로 identifier에 입력해주고 

 

 

생성했던 xib 파일 이름을 사용하여 UINib을 생성하고

위에서 입력해주었던 identifier를 사용하여 등록해야 한다.

let myNib = UINib(nibName: "MyTableViewCell", bundle: nil)

tableView.register(myNib, forCellReuseIdentifier: "cellID")

 

 

그리고 register시 넘겨 주었던 cellID를 사용하여

cell을 불러 오기 위한 작업을 cellForRowAt 메소드 내부에서 처리해주었다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	guard let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as? MyTableViewCell else { return .init() }
    .
    .
    .
	return cell
}

 

 

이렇게 했을때 하단 이미지와 같이 cell이 그려지는걸 볼 수 있다.