본문 바로가기

수업 정리

95일차 수업정리(Swift - 화면전환)

**화면 전환
1.방법
    => View를 변경
    => ViewController를 변경
    => ContainerViewController를 이용해서 변경
    => View에 그리기 기능을 이용해서 화면을 다시 그리는 방법

2.ViewController 추가
    => ViewController 클래스로부터 상속받는 클래스를 생성
    => storyboard에 ViewController를 추가하고 class를 앞에서 만든 클래스로 변경하고 storyboard id를 설정
    => 객체 생성: storyboard변수.instantiateViewController(withIdentifier: 스토리보드id) 호출시 UIViewController로부

        터 상속받는 인스턴스의 참조 리턴
        - 앞에서만든 클래스로 강제 형변환해서 사용

3.ViewController 출력
    => present(출력할 뷰 컨트롤러, animated:Bool)
    => transitionStlyle 속성으로 애니메이션 종류를 설정
    => 제거는 presentingViewController.dismiss(animated:Bool, completion:()->Void)

4.버튼을 눌러서 뷰 컨트롤러 출력하기 - 코드로 수행하기
  1) project 나 target 생성
  2) 새로운 뷰 컨트롤러 클래스를 생성 : SecondViewController
    => UIViewController 로 부터 상속받는 클래스 
        - [File] - [New] - [File]
  3) 추가한 뷰 컨트롤러의 화면을 생성
    => 스토리보드에 ViewController 추가, Class 속성(SecondViewController)과 storyboard ID(SecondViewController) 속성을 변경

4)추가한 뷰 컨트롤러에 디자인
=>레이블 1개와 버튼 1개
=>레이블에 변수 연결 :  lblText
=>버튼에는 touchUpInside 이벤트에 메소드를 연결 - back()

5)기본적으로 제공되는 ViewController에 레이블 1개와 버튼 1개를 배치
=>레이블에는 lblMsg 라는 변수를 연결
=>버튼의 touchUpInside 이벤트에 next()라는 메소드를 연결

6)ViewController.swift 파일의 next 메소드에 SecondViewController를 출력하는 코드를 작성

//SecondViewController 객체 생성
let secondViewController = self.storyboard?.instantiateViewController
	(identifier: "SecondViewController") as! SecondViewController

//애니메이션 설정 - 반대로 돌아올 때도 적용됩니다.
secondViewController.modalTransitionStyle = UIModalTransitionStyle.flipHorizontal

//출력
self.present(secondViewController, animated: true)

 

7)SecondViewController.swift 파일의 back 메소드에 이전 뷰 컨트롤러로 돌아가는 코드를 작성

//이전 뷰 컨트롤러로 돌아가기
self.presentingViewController!.dismiss(animated: true)

 

5.서로 다른 뷰 컨트롤러 간의 데이터 공유
1)공유 영역에 변수를 생성해서 저장
=>AppDelegate 클래스에 변수를 생성하면 모든 곳에서 이 변수에 접근 가능

2)프로젝트 내의 class 외부에 변수를 생성하면 프로젝트 내의 모든 곳에서 접근 가능
=>함수형 프로그래밍 언어의 전역 변수를 생성하는 방법
=>비추천

3)코드로 다른 뷰 컨트롤러로 이동한 경우
=>두번째 컨트롤러의 객체를 직접 생성하기 때문에 첫번째 뷰 컨트롤러에서는 객체를 이용해서 두번째 컨트롤러의 모든 멤버 사용 가능
=>두번째 컨트롤러에서는 첫번째 컨트롤러의 객체를 생성하지 않기 때문에 presentingViewController 가 자신을 호출한 뷰 컨트롤러 입니다.
강제 형 변환을 이용해서 첫번째 뷰 컨트롤러의 멤버에 접근할 수 있습니다.

4)SecondViewController.swift 파일에 문자열 변수를 인스턴스 변수로 추가

//문자열 변수
var data : String!

 

5)SecondViewController.swift 파일의 viewDidLoad 메소드에 추가

If data != nil{
	lblText.text = data
}

 

6)ViewController.swift 파일의 next 메소드를 수정

@IBAction func next(_ sender: Any) {
        
        //SecondViewController 객체 생성
        let secondViewController =
            self.storyboard?.instantiateViewController(identifier: "SecondViewController") as! SecondViewController
        //애니메이션 설정 - 반대로 돌아올 때도 적용됩니다.
        secondViewController.modalTransitionStyle = UIModalTransitionStyle.flipHorizontal
        secondViewController.data = "두번째 뷰 컨트롤러"
        //출력
        self.present(secondViewController, animated: true)
    }

 

5)SecondViewController.swift 파일의 back 메소드를 수정

  //이전 뷰 컨트롤러로 돌아가기
        let viewController = presentingViewController as! ViewController
        viewController.lblMsg.text = "첫번째 뷰 컨트롤러"
        viewController.dismiss(animated: true)

 

5.Segue
=>iOS에서 스토리보드에서 뷰 컨트롤러의 전환을 설정
=>이 방법을 이용하게 되면 뷰 컨트롤러 사이의 화면 이동을 한 번에 보기가 좋습니다.
=>뷰 컨트롤러나 액션을 사용할 수 있는 뷰에서 Control 키를 누르고 다른 뷰 컨트롤러로 드래그 하면 됩니다.
세그웨이 선이 만들어지고 액션이 발생하면 뷰 컨트롤러가 화면에 출력됩니다.
=>직접 코드로 이동을 하더라도 세그웨이를 만들어두면 화면이동을 알아보기가 수월해집니다.

6.세그웨이를 이용한 뷰 컨트롤러 전환
1)ViewController 화면에 버튼을 배치

2)버튼을 선택하고 control을 누르고 SecondViewController로 드래그 하고 드랍을 한 후 present modally를 선택

3)세그웨이를 이용해서 이동할 때는 prepare(for segue:UIStoryboardSegue, sender:Any?) 메소드가 호출됩니다.
=>segue.destination을 호출하면 이동하고자 하는 뷰 컨트롤러의 참조를 리턴
=>segue.identifier는 세그웨이의 id 입니다.

하나의 ViewController에서 여러 개의 ViewController로 세그웨이를 이용해서 이동하는 경우 각각 세그웨이를 구분하기 위한 것입니다.

4)ViewController.swift 파일에 세그웨이로 이동할 때 호출되는 메소드를 재정의

//세그웨이를 이용해서 이동하는 경우 호출되는 메소드
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //세그웨이의 목적지가 되는 뷰 컨트롤러 가져오기
        let secondViewController = segue.destination as! SecondViewController
        secondViewController.data = "세그웨이를 이용한 이동"
    }

 

5)세그웨이로 이동했을 때 이전 뷰 컨트롤러로 돌아가기
=>코드로 자신을 출력한 뷰 컨트롤러를 찾아서 dismiss를 호출해서 돌아갈 수 있습니다.
=>자신을 호출한 뷰 컨트롤러에 @IBAction func 함수이름(segue: UIStoryboardSegue)를 생성하고 출력된 뷰 컨트롤러의 액션을 상단의 exit로 연결해서 이동할 수 있습니다.

6)ViewController.swift 파일에 세그웨이를 이용해서 돌아올 수 있도록 해주는 메소드를 생성

//세그웨이를 이용해서 돌아올 때 호출될 메소드
    @IBAction func returned(segue:UIStoryboardSegue){
        lblMsg.text = "세그웨이를 이용해서 돌아옴"
    }

 

7)Main.storyboard 파일의 SecondViewController에 버튼을 배치하고 exit로 연결

**Container View Controller
1.Content View Controller
=>UIViewController
=>UITableViewController : 열이 1개
=>UICollectionViewController : 열이 여러 개

2.Container View Controller
1)UITabBarController: 하단에 탭을 배치해서 다른 뷰 컨트롤러를 호출하는 형태 - 배열을 이용
=>버튼이 5개까지만 출력이 되도록 만들어져 있어서 가로 보기로 전환하면 탭의 크기가 가로로 늘어나게 되서 UI가 좋지 못하기 때문에 가로 보기에서는 사용하지 않음

2)UINavigationController: 상단에 네비게이션 바를 배치해서 호출하는 형태 - 거의 모든 애플리케이션이 사용 - Stack 이용

3)Master-Detail View Controller: ipad에서 사용하던 뷰 컨트롤러로 왼쪽에는 테이블 뷰를 배치하고 오른쪽에는 뷰 컨트롤러를 배치해서 테이블에서 항목을 선택하면 오른쪽에 상세보기를 해주는 방식 - 지금은 크기가 큰 폰에서도 사용 가능
작은 폰에서는 자동으로 UINavigationController로 변경됩니다.

4)PageViewController: 전자 책을 구현하기 위한 뷰 컨트롤러인데 뷰 컨트롤러를 페이지 단위로 넘겨주는 방식입니다.
=>개발자가 직접 구현하면 메모리 관리 문제가 발생할 수 있어서 메모리 재사용기법을 이용해서 구현을 해 둔 것입니다.

3.UITabBarController
=>화면 하단에 TabBar를 배치하고 여러 개의 뷰 컨트롤러 사이를 이동할 수 있도록 합니다.
=>동일한 데이터를 여러가지 모양으로 보여주고자 할 때 사용하는 것을 권장
=>iOS가 제공하는 음악 재생 애플리케이션이 탭바를 가지고 있습니다.
=>배열을 이용해서 ViewController를 관리

1)코드로 생성
=>초기화 메소드에 뷰 컨트롤러의 배열을 대입해야 합니다.

2)Storyboard에서 생성
=>[Editor] - [Embed In] - [TabBarController]를 선택하면 추가
=>다른 뷰 컨트롤러를 추가하고자 할 때는 TabBarController에서 control을 누르고 다른 뷰 컨트롤러로 드래그 한 후 viewcontrollers를 선택

3)자신의 속성
=>현재 선택된 뷰 컨트롤러: selectedViewController
=>현재 선택된 뷰 컨틀롤러의 인덱스: selectedIndex

4)UITabBarControllerDelegate에 탭 바 아이템을 선택했을 때 호출되는 메소드가 선언되어 있습니다.

5)ViewController
=>ViewController의 tabBarController 속성이나 tabBarItem 속성을 이용해서 탭 바 컨트롤러나 탭 바 아이템을 제어할 수 있습니다.
=>NavigationController로도 실제 제어는 ViewController에서 합니다.
=>title을 설정하면 탭 바 아이템이나 네비게이션 바의 타이틀 뷰에 출력됩니다.

6)아이템 개수 제한
=>5개까지는 바로 출력되고 5개가 넘어가면 5번째 버튼이 More가 되고 More를 클릭하면 테이블 뷰에 다른 항목의 레이블이 출력되서 선택할 수 있도록 합니다.

7)탭 바 컨트롤러를 배치하고 2개의 탭 아이템을 생성 
=>Main.storyboard 파일에서 ViewController를 선택하고 [Editor] - [Embed In] - [Tab Bar Controller]를 선택

=>새로운 뷰 컨트롤러를 디자인

=>TabBarController를 선택하고 control을 누른 상태에서 새로운 뷰 컨트롤러로 드래그 하고 viewControllers를 선택

4.UINavigationController
=>여러 개의 ViewController를 Stack을 이용해서 관리하는 컨테이너 컨트롤러
1)생성
=>코드로 생성하는 경우는 초기화 메소드에 첫번째 뷰 컨트롤러(rootViewController)를 설정을 해야 합니다.

=>인터페이스 빌더에서 생성할 때는 [Editor] - [Embed In] - [Navigation Controller]를 선택

2)속성과 메소드
=>setNavigationBarHidden 메소드를 이용해서 숨기거나 보이는 것을 할 수 있음
데이터를 출력할 때 하단으로 스크롤하면 화면에서 숨기고 다시 위로 올라오면 화면에 출력하는 형태로 사용

=>pushViewController 메소드를 이용해서 다른 뷰 컨트롤러를 출력
=>popViewController 메소드를 이용해서 현재 보여지는 뷰 컨트롤러를 제거

3)네비게이션 바 영역이나 네비게이션 컨트롤러는 ViewController의 속성으로 제공

4)이동은 코드로 하더라도 세그웨이를 만들어서 구조를 한 눈에 알아볼 수 있게 해주는 것이 좋습니다.


5.실습 - 루트에서 다른 뷰 컨트롤러로 push 하기
1)새로운 뷰 컨트롤러 생성
=>UIViewController로 부터 상속받는 클래스를 생성 : DetailViewController

=>Main.storyboard 파일에 ViewController를 추가

=>추가한 뷰 컨트롤러의 class 속성을 DetailViewController로 변경

=>추가한 뷰 컨트롤러의 storyboard ID 속성에 id를 설정 - DetailViewController


2)기존의 ViewController 에 NavigationController를 추가
=>뷰 컨트롤러를 선택하고 [Editor] - [Embed In] - [Navigation Controller]를 선택

3)NavigationBar 의 구성
=>왼쪽과 오른쪽에는 BarButtonItem을 여러 개 배치 가능
=>가운데는 UIView로 만들어져 있습니다.
화면에 보여지는 모든 것들은 UIView로 부터 상속을 받습니다.

4)Main.storyboard 파일의 ViewController의 네비게이션 영역에 바 버튼 아이템을 추가

5)바 버튼을 눌렀을 때 호출될 메소드를 생성
=>바 버튼을 선택하고 마우스 오른쪽을 눌러서 action 밑의 selector를 선택하고 소스코드 창으로 드래그 앤 드랍을 하고 메소드 이름을 입력하고 작성

@IBAction func detailDisplay(_ sender: Any) {
        //스토리보드에 디자인 한 뷰 컨트롤러 인스턴스를 생성
        let detailViewController =
            self.storyboard?.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
        //푸시
        self.navigationController?.pushViewController(detailViewController, animated: true)
    }

 

**Table View
=>데이터 출력을 위한 뷰
=>UIScrollView의 하위 클래스 라서 스크롤 기능이 제공
1.사용하는 방법
=>직접 UITableView를 배치해서 사용
=>UITableViewController를 이용 : 화면 전체를 하나의 테이블 뷰로 출력

2.초기화 메소드
=>frame 과 style을 설정
style은 plain 과 grouped 2가지
한 번 설정하면 style은 변경안됨

3.주의할 점
=>UITableView를 직접 배치한 경우에는 Delegate 와 DataSource의 메소드를 구현해서 출력
=>UITableViewController를 사용하는 경우에는 이미 메소드들이 만들어져 있어서 Overriding을 해야 합니다.
=>다른 언어들은 인터페이스나 추상클래스에 존재하는 추상메소드를 구현하는 것도 Overriding이라고 하는데 Swift는 프로토콜에 있는 추상메소드를 구현하는 것은 conform이라고 합니다.

4.출력할 때 구현해야 하는 메소드 - 2개
=>행의 개수를 설정하는 메소드

func tableView(_ tableView:UITableView, numberOfRowsInSection:Int) -> Int

=>실제 출력할 Cell을 리턴하는 메소드

func tableView(_ tableView:UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

=>이 메소드는 필수는 아님 - 섹션의 개수를 설정하는 메소드로 기본적으로 1을 리턴

func tableView(_ tableView:UITableView) -> Int

5.출력
=>섹션(그룹)의 개수를 설정하는 메소드를 호출해서 섹션의 개수를 설정
=>섹션의 개수만큼 반복문을 수행하면서 행의 개수를 설정하는 메소드를 호출해서 섹션 별 행의 개수를 설정 - 섹션의 번호와 행의 번호를 가지고 있는 클래스가 IndexPath(row, section 프로퍼티 소유)
=>IndexPath를 이용해서 출력할 행 만큼 반복문을 돌려서 Cell을 리턴하는 메소드를 호출해서 출력

6.속성 및 메소드
=>delegate, dataSource: 델리게이트 메소드와 데이터 소스 메소드의 위치를 설정
=>reloadData(): 테이블 뷰 의 데이터를 다시 출력 - 데이터가 갱신된 경우 사용
=>섹션의 개수나 섹션 별 행의 개수를 리턴해주는 메소드 존재
=>셀을 가지고 IndexPath를 찾아오거나 IndexPath 또는 좌표를 가지고 Cell을 찾아오는 메소드 존재
=>스크롤의 위치를 특정한 곳으로 옮겨 주는 메소드도 존재 - 데이터를 갱신할 때 사용
=>애니메이션 관련 메소드도 존재

7.UITableViewCell - Table의 하나의 항목에 해당하는 뷰
=>셀의 모양과 셀의 id를 이용해서 생성
=>기본적으로 제공되는 뷰 - 스타일에 따라 위치나 보여지는 것이 변경

UIImageView imageView
UILabel textLabel, detailTextLabel
UIView accessoryView

 

8. 출력할 때 사용하는 자료구조
=>출력을 할 때는 특별한 경우가 아니면 배열을 이용해서 출력
=>여러 개의 섹션을 출력하고자 할 때는 2차원 배열은 별로 좋지못하고 배열을 만들고 그 배열의 key가 되는 속성과 Dictionary를 만들고 그 Dictionary의 배열을 생성해서 출력하는 것이 좋습니다.

9.텍스트를 출력하는 테이블 뷰
=>테이블 뷰를 직접 추가
1)Main.storyboard 파일의 ViewController에 TableView를 1개 배치

2)TableView를 변수와 연결 - tableView

3)테이블 뷰에 출력할 데이터 배열을 인스턴스 변수로 선언

//테이블 뷰에 출력할 데이터
var data = Array<String>()

4)viewDidLoad 메소드에 초기화 작업을 수행

//데이터 추가
data.append("기본 테이블")
        
//테이블 뷰의 delegate 와 dataSource 설정
tableView.delegate = self
tableView.dataSource = self

 

5)extension을 추가해서 테이블 뷰 출력관련 메소드를 생성

extension ViewController : UITableViewDelegate, UITableViewDataSource{
    //행의 개수를 설정하는 메소드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    //셀을 설정하는 메소드
    //indexPath 가 셀의 위치
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //셀의 아이디
        let cellIdenfier = "Cell"
        //셀을 생성 - 재사용 가능한 셀로 생성
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdenfier)
        //재사용 가능한 셀이 없으면 생성
        if cell == nil{
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdenfier)
        }
        
        //셀에 데이터를 출력
        cell!.textLabel!.text = data[indexPath.row]
        //셀을 리턴
        return cell!
        
    }
}

 

**TableViewController를 이용해서 데이터를 출력
1.제공되는 뷰 컨트롤러를 제거
1)ViewController.swift 파일을 삭제

2)Main.storyboard 에서 ViewController 제거

2.UITableViewController 클래스로부터 상속받는 ViewController 추가 - RootViewController

3.Main.storyboard 파일을 열어서 TableViewController를 추가하고 Class를 RootViewController 로 그리고 Storyboard ID도 RootViewController로 설정
=>isInitialViewController 항목에 체크

4.RootViewController에 NavigationController를 추가
[Editor] - [Embed In] - [Navigation Controller]

5.RootViewController에 데이터 배열을 인스턴스 변수로 선언

    //테이블 뷰에 데이터를 출력하기 위한 배열
    var data = Array<String>()

6.RootViewController의 viewDidLoad 메소드에 초기화 코드 작성

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //타이틀을 설정
        self.title = "iOS Practice"
        
        //데이터 생성
        data.append("셀의 구성")
    }

7.RootViewController 의 테이블 출력 관련 메소드를 수정

    //섹션(그룹)의 개수를 설정하는 메소드
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    //섹션 별 행의 개수를 설정하는 메소드
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

     override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cellIdenfier = "cell"
        var cell = tableView.dequeueReusableCell(withIdentifier:cellIdenfier)
        if cell == nil{
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdenfier)
        }

        cell!.textLabel?.text = data[indexPath.row]
        cell!.accessoryType = .disclosureIndicator

        return cell!
    }

**셀의 구성
=>셀은 스타일에 따라 구성이 달라짐
1.기본 구성
UIImageView imageView
UILabel textLabel
UILabel detailTextLabel
UIView accessoryView
=>accessoryView는 accessoryType 속성을 이용해서 제공되는 모양을 설정할 수 있습니다.
checkmark, detailButton, detailDisclosureButton, disclosureIndicator, none

2.style
default: detailTextLabel을 사용 못함
subtitle: detailTextLabel을 사용 가능
value1: detailTextLabel이 accessoryView 영역에 출력
value2: detailTextLabel이 imageView 영역에 출력

3.셀의 모양 변경
=>style을 변경
=>UITableViewCell을 subclassing - 상속받는 클래스를 생성
=>Cell에는 contentView라는 속성을 가지고 있는데 직접 View를 디자인해서 contentView 속성에 대입

4.셀의 이미지 뷰에 이미지를 출력하고 textLabel 과 detailTextLabel에 문자열을 출력하기
1)프로젝트에 ViewController를 상속받는 클래스 추가(CellStyleViewController)

2)Main.storyboard 파일에 ViewController를 추가하고 CellStyleViewController로 클래스와 Storyboard ID를 지정

3)RootViewController 클래스에 셀을 선택했을 때 호출되는 메소드를 오버라이딩
=>셀을 선택하면 CellStyleViewController를 푸시하는 코드

//셀을 선택했을 때 호출되는 메소드
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if indexPath.row == 0{
            let cellStyleViewController = self.storyboard?.instantiateViewController(withIdentifier: "CellStyleViewController") as! CellStyleViewController
            
            self.navigationController?.pushViewController(cellStyleViewController, animated: true)
        }
    }

4) 출력할 이미지 파일을 프로젝트에 복사

5)Main.storyboard 파일의 CellStyleViewController 에 테이블 뷰를 추가
=>테이블 뷰를 선택하고 마우스 오른쪽을 클릭해서 delegate 와 dataSource를 자신의 뷰 컨트롤러로 설정

6)CellStyleViewController.swift 파일에 테이블 뷰에 출력할 데이터 배열을 인스턴스 변수로 선언

    //테이블 뷰의 레이블에 출력할 데이터 배열
    var names = Array<String>()
    //테이블 뷰의 이미지 뷰에 출력할 이미지 파일 이름 배열
    var imageNames = Array<String>()

7)CellStyleViewController.swift 파일의 viewDidLoad 메소드에서 배열을 초기화

       names.append("아이린")
        names.append("슬기")
        names.append("웬디")
        names.append("조이")
        names.append("예리")
        
        imageNames.append("red0.jpg")
        imageNames.append("red1.jpg")
        imageNames.append("red2.jpg")
        imageNames.append("red3.jpg")
        imageNames.append("red4.jpg")

8) CellStyleViewController.swift 파일에 extension을 추가해서 테이블 뷰 출력 관련 메소드를 구현

extension CellStyleViewController:UITableViewDelegate, UITableViewDataSource{
    //셀의 개수를 설정하는 메소드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return names.count
    }
    
    //셀을 설정하는 메소드
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "Cell"
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
        if cell == nil{
            cell = UITableViewCell(style: .subtitle, reuseIdentifier: cellIdentifier)
        }
        
        cell!.textLabel!.text = names[indexPath.row]
        cell!.detailTextLabel!.text = "레드벨벳"
        cell!.imageView!.image = UIImage(named: imageNames[indexPath.row])
        
        return cell!
    }
}

 

**사용자 정의 셀(Custom Cell)
1.작성 방법
1)TableView에 UITableViewCell을 추가하고 원하는 모양으로 디자인

2)UITableViewCell로 부터 상속받는 클래스를 생성

3)디자인 한 셀의 클래스를 2번에서 만든 클래스로 변경하고 CellIdentifier를 설정
=>디자인 한 항목 중 편집이 가능하도록 하고자 하는 뷰의 변수를 Cell 클래스에 연결

4)테이블 뷰의 셀을 리턴하는 메소드에서 셀을 만들고 2번에서 만든 클래스로 강제 형 변환해주면 됩니다.

2.셀에 이미지 만 출력하는 사용자 정의 셀을 만들어서 사용
1)UIViewController로 부터 상속받는 클래스를 생성(CustomCellViewController)

2)Main.storyboard 파일에 ViewController를 추가하고 클래스와 Storyboard ID를 설정 - CustomCellViewController

3)사용자 정의 셀 클래스로 사용할 UITableViewCell로 부터 상속받는 클래스를 생성(CustomCell)

4)Main.storyboard 파일의 CustomCellViewController에 TableView를 배치하고 delegate 와 dataSource를 설정

5)TableView 안에 TableViewCell을 배치
=>추가한 셀을 선택하고 class 속성을 앞에서 만든 클래스로 변경 - CustomCell
=>idenfier를 설정 - CustomCell

6)셀을 디자인하고 변수를 생성
=>이미지 뷰 1개를 배치하고 imgView라는 변수로 연결


7)CustomCellViewController.swift 파일에 테이블 뷰 에 출력할 데이터 배열 변수를 선언

var imageNames = Array<String>()

8)CustomCellViewController.swift 파일의 viewDidLoad 메소드에서 데이터를 초기화

imageNames.append(“red0.jpg”)

9)CustomCellViewController.swift 파일에 extension을 생성하고 테이블 뷰 출력 관련 메소드를 conform

extension CustomCellViewController : UITableViewDataSource, UITableViewDelegate{
    
    //행의 개수를 설정하는 메소드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return imageNames.count
    }
    
    //셀을 만드는 메소드
    func tableView(_ tableView:UITableView, cellForRowAt indexPath:IndexPath ) -> UITableViewCell{
        let cellIdentifier = "CustomCell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier) as! CustomCell
        cell.imgView.image = UIImage(named:imageNames[indexPath.row])
        return cell
        
    }
    
}