[IOS] TableView (with Storyboard)

전 포스팅에 이어서 스토리보드를 사용해 tableView를 구현하는 법을 알아보겠다.

AppDelegate

스토리보드 base & Scene을 사용하지 않을때는 

plist 파일에서 기본적으로 세팅되어 있는 Appliation Scene Manifest 정보를 삭제하여 

Scene Configuration 설정들을 삭제해준다.

 

그리고 SceneDelegate 파일을 삭제하고

SceneDelegate가 생기면서 AppDelegate에 새로 생긴 메소드 2가지(새로운 scene이 생성되거나 삭제될때 호출되는 메소드)를 삭제 해준다.

 

후에 AppDelegate에서 window를 선언만 해주고 빌드를 해보면 잘 나오는걸 볼 수 있을 것이다.

var window: UIWindow?

 

혹시나 나오지 않는다면 스토리보드에서

해당 VC의 Is Initial View Controller의 체크가 선택되어 있는지 확인 바란다.

해당 체크박스가 체크 상태인 VC는 rootVC로 지정이 된다.

SceneDelegate

그리고 스토리보드 base & 앱이 multi window를 지원할 수 있게 SceneDelegate를 사용하고자 할때는

프로젝트 생성시 기본적으로 세팅되어 있기 때문에 아무 작업 없이 바로 사용할 수 있다.

 

TableView

이제 tableView를 드래그 하여 rootView에 addSubView 시키겠다.

 

 

 

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

 

 

이런식으로 구현되어 있는 제약조건의 수정도 가능하다.

 

 

혹은 더블클릭 후 디테일한 수정도 가능하다.

 

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

@IBOutlet weak var tableView: UITableView!

 

Delegate, Datasource

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

dataSource와 deleagate를 지정해준다. (swift 파일에서 코드로도 가능하다. 스토리보드로 진행 한다고 해서 무조건 이런식으로 delegate를 지정해주지 않아도 된다.)

 

Cell

tableView의 cell을 꾸며줄 차례이다.

cell을 custom 하여 진행한다고 가정 하겠다.

TableViewCell을 드래그 하여 tableView 내부에 위치 시킨다.

 

 

그리고 cell contentView에 imageView를 addSubView 하고 

 

 

constraints를 좌측 이미지와 같이 잡아 준다면

우측 이미지와 같이 제약 조건에 맞게 설정된 걸 볼 수 있을 것이다.

 

 

label도 추가하여 제약 조건을 설정하겠다.

 

 

후에 swift 파일을 하나 생성하고 

class ActorCell: UITableViewCell {
    
    
    
}

 

스토리보드에서 cell을 클릭하고 생성한 ActorCell을 선택해준다.

 

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

class ActorCell: UITableViewCell {
    
    @IBOutlet weak var myImageView: UIImageView!
    @IBOutlet weak var actorLabel: UILabel!
    
}

 

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

스토리보드로 구현할때는 이런식으로 identifier에 입력해주기만 하면 된다.

 

 

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

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

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

 

 

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