[Swift] Custom TableView Code로 작성하기

Custom TableView Code로 작성하기

 

Record
작성일	2019. 05. 29 (수)
Swift 버전	Swift 5
Xcode 버전	10.2.1

 

customCell을 활용한 tableView 연습 결과 화면

안녕하세요 :]
오늘은 customCell 등록을 통해서 tableView를 사용하는 연습을 하도록 하겠습니다.

 

1. tableView 선언 및 설정

테이블 뷰의 오토 레이아웃을 잡기 위해서

translayesAutoresizingMaskIntoConstraints를 false로 설정합니다.

 

다음으로 register를 통해서 customCell인 MainTableViewCell을 등록하고,

Cell의 Identifier는 MainTableViewCell에 정의해놓은 identifier 상수 값을 가져옵니다.

 

 

 

 

 

2. tableView 추가 설정 및 오토 레이아웃

 

configure() 함수에서 "tableView.dataSource = self"를 합니다.

tableView의 Heigth를 직접 적용하려면 rowHeight 값을 주면 됩니다.

그리고 autoLayout을 잡기 전에 tableView를 view에 addSubView 합니다.

마지막으로, 오토 레이아웃을 통해서 테이블 뷰의 레이아웃을 설정합니다.

 

 

 

 

3. tableView CustomCell 생성

 

ViewController에서 customCell을 register 할 때 사용할 identifier를 선언합니다.

이렇게 작성할 경우의 이점은, identifier의 오탈자 발생을 줄여줍니다.

identifier의 값을 잘못 적었다 하더라도 의도하던 대로 cell의 연결이 잘 이루어지게 될 거예요.

그리고, customCell을 꾸미기 시작합니다.

ImageView와 2개의 Label을 올립니다.

물론 오토 레이아웃을 잡기 위해서 translatesAutoresizingMaskIntoConstraints의 값도 false로 줍니다.

 

 

 

 

4. tableView CustomCell 설정

 

UITableViewCell 안에서 addSubview를 할 때는 contentView에 addSubview를 하게 됩니다.

ImageView와 Label의 오토 레이아웃을 잡아주면 customCell은 끝입니다.

 

 

 

 

5. tableView의 dataSource

 

MainViewController의 configure() 함수에서 "tableView.dataSource = self"를 해줬던 걸 기억하실 겁니다.

dataSource를 사용하겠다고 해줬으니! 사용해 봅시다.

 

사실, tableView를 사용할 때는 필수적으로 dataSource를 사용해야 합니다.

(delegate의 경우 선택적입니다.)

 

먼저, numberOfRowsInSection은 몇 개의 cell을 생성할 것인지 알려주는 메서드입니다.

return Type이 Int이며, 반환되는 숫자만큼 cell을 생성하게 됩니다.

 

다음으로, cellForRowAt은 UITableViewCell을 반환합니다.

여기서 실제로 셀을 생성하고 indexPath.row 값을 사용하여

cell에 접근하여 값들을 적용시켜 주기도 합니다.

 

 

 

 

위의 코드만으로도 기본적인 customCell을 사용한 tableView 생성에는 큰 문제가 되지 않습니다.

그밖에 셀의 선택, 삭제, Section 생성 등은 부가적인 기능 추가를 통해서 사용하실 수 있습니다.

 

위에 예제 코드는 git을 통해서 확인해주세요~

https://github.com/furydeveloper/SwiftPractice/tree/master/TableViewExample

 

 

감사합니다 :]