95 iOS 화면전환(view, segue, tableview, navigationbar 등)
** 화면전환
1. 방법
=> View를 변경
=> ViewController를 변경
=> ContainerViewController를 이용해서 변경
=> View에 그리기 기능을 이용해서 화면을 다시 그리는 방법
2. ViewController 추가
=> ViewController 클래스로부터 상속받는 클래스를 생성
=> storyboard에 ViewController를 추가하고 class를 앞에서 만든 클래스로 변경하고 storyboard id를 설정
=> 객체 생성: storyboard변수.instantiateViewController(withIdentifier: 스토리보드id)를 호출하면 UIViewController로부터 상속받는 인스턴스의 참조를 이턴
앞에서만든 클래스로 강제 형변환해서 사용
3. ViewController 출력
=> present(출력할 뷰 컨트롤러, animated:Bool)
=> transitionStyle 속성으로 애니메이션 종류를 설정
=> 제거는 presentingViewController.dismiss(animated:Bool, completion:()->Void)
4. 버튼을 눌러서 뷰 컨트롤러 출력하기 - 코드로 수행하기
1) Project 나 Target 생성
2) 새로운 뷰 컨트롤러 클래스를 생성
=> UIViewController로 부터 상속받는 클래스
[File] - [New] - [File] - [Cocoa Touch File]
3) 추가한 뷰 컨트롤러의 화면을 생성
=> 스토리보드에 ViewController를 추가하고 Class 속성(SecondViewController)과 storyboard ID(SecondViewController) 속성을 변경
4) 추가한 뷰 컨드롤러에 디자인
=> 레이블 1개와 버튼 1개
=> 레이블에 변수 연결 : lblText
=> 버튼에는 touchUpInside 이벤트에 메소드를 연결 - back()
5) 기본적으로 제공되는 ViewController에 레이블 1개와 버튼 1개를 배치
=> 레이블에는 lblMsg라는 변수를 연결
=> 버튼의 touchUpInside이벤트에 next()라는 메소드를 연결
6) next 메소드에 SecondViewController를 출력하는 코드를 작성
@IBOutlet weak var lblMsg: UILabel!
@IBAction func next(_ sender: Any) {
//SecondViewController 객체를 생성
let secondViewController = self.storyboard?.instantiateViewController(identifier:"SecondViewController") as! SecondViewController
//애니메이션 설정 - 반대로 돌아올 때도 적용된다.
secondViewController.modalTransitionStyle = UIModalTransitionStyle.flipHorizontal
//출력
self.present(secondViewController, animated: true)
}
7) SecondViewCotroller.swift 파일에 back 메소드에 이전 뷰 컨트롤러로 돌아가는 코드를 작성
@IBAction func back(_ sender: Any) {
//이전 뷰 컨트롤러로 돌아가기
self.presentingViewController?.dismiss(animated: true)
}
5. 서로 다른 뷰 컨드롤러 간의 데이터 공유
1) 공유 영역의 변수를 생성해서 저장
=> AppDelegate 클래스에 변수를 생성하면 모든 곳에서 이 변수에 접근 가능하다.
2) 프로젝트 내의 클래스 외부에 변수를 생성하면 프로젝트 내에 모든 곳에서 접근이 가능하다. - 비추천
=> 함수형 프로그래밍 언어에서 전역변수 만드는 방법이다.
3) 코드로 다른 뷰 컨트롤러로 이동한 경우
=> 두번째 컨트롤러의 개겣를 직접 생성하기 때문에 첫번째 뷰 컨드롤러에서는 객체를 이용해서 두번째 컨트롤러의 모든 멤버 사용 가능
=> 두번째 컨트롤러에서는 첫번째 컨드롤러의 객체를 생성하지 않기 때문에
presentingViewController가 자신을 호출한 뷰 컨드롤러이다.
강제 형변환을 이용해서 첫번째 뷰 컨드롤러의 멤버에 접근할 수 있다.
4) ViewController.swift 파일의 next 메소드 수정
@IBAction func next(_ sender: Any) {
//SecondViewController 객체를 생성
let secondViewController = self.storyboard?.instantiateViewController(identifier:"SecondViewController") as! SecondViewController
//애니메이션 설정 - 반대로 돌아올 때도 적용된다.
secondViewController.modalTransitionStyle = UIModalTransitionStyle.flipHorizontal
secondViewController.lblTex.text = "두번째 뷰 컨트롤러"
//출력
self.present(secondViewController, animated: true)
}
5) SecondViewController.swift 파일의 viewDidLoad 메소드에 추가
override func viewDidLoad() {
super.viewDidLoad()
if data != nil{
lblTex.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. Segue
=> iOS에서 스토리보드에서 뷰 컨트롤러의 전환을 설정
=> 이 방법을 이용하게 되면 뷰 컨트롤러 사이의 화면 이동을 한번에 보기가 좋다.
=> 뷰 컨트롤러나 액션을 사용할 수 있는 뷰 Control키를 누르고 다른 뷰 컨트롤러로 드래그 하면 된다. (Present Modally)
세그웨이 선이 만들어지고 액션이 발생하면 뷰 컨트롤러가 화면에 출력된다.
=> 직접 코드로 이동을 하더라도 세그웨이를 만들어두면 화면이동을 알아보기가 수월해진다.
6. 세그웨이를 이용한 뷰 컨트롤러 전환
1) ViewController 화면에 버튼을 배치
2) 버튼을 선택하고 control 을 누르고 SecondViewCotroller로 드래그하고 드랍을 한 수 present modally를 선택
3) 세그웨이를 이용해서 이도할 때는 prepare(for seque:UIStoryboardSegue, sender:Any?) 메소드가 호출된다.
=> segue.destination을 호출하면 이동하고자 하는 뷰 컨드롤러의 참조를리턴
=> segue.identifier는 세그웨이의 id 이다.
하나의 뷰 컨트롤러에서 여러개의 뷰 컨트롤러로 세그웨이를 이용해서 이동하는 경우 각각의 세그웨이를 구분하기 위한 것이다.
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가 제공하는 음악 재생 애플리케이션의 탭바를 가지고 있다.
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] - [TabBar Controller]를 선택
=> 새로운 뷰 컨트롤러를 디자인
=> TabBarController를 선택하고 control 을 누른 상태에서 새로운 뷰 컨트롤러
viewControllers를 선택
4. NavigationController
=> 여러개의 ViewController를 Stack을 이용해서 관리하는 컨테이너 컨트롤러
1) 생성
=> 코드로 생성하는 경우는 초기화 메소드에 첫번째 뷰 컨트롤러(rootViewController)를 설정해야 한다.
=> 인터페이스 빌더에서 생성할 때는 [Editor] - [Embed in] - [Navigation Controller]를 선택
2) 속성과 메소드
=> setNavigationBarHidden 메소드를 이용해서 숨기거나 보이는 것을 할 수 있다.
데이터를 출력할 때 하단으로 스크롤하면 화면에서 숨기고 다시 위로 올라오면 화면에 출력하는 형태로 사용
=> puchViewController 메소드를 이용해서 다른 뷰 컨트롤러를 출력
=> popViewController 메소드를 이용해서 현재 보여지는 뷰 컨트롤러를 제거
3) 네비게이션 바 영역이나 네비게이션 컨트롤러는 ViewController의 속성으로 제공
4) 이동은 코드로 하더라도 세그웨이는 만들어서 사용하는 것을 권장
5. 실습 - 루트에서 다른 뷰컨트롤러로 push 하기
1) 새로운 뷰 컨트롤로 생성
=> UIViewController로 부터 상속받는 클래스를 생성 : DetailViewController
=> Mainstoryboard 파일에 ViewController를 추가
=> 추가한 뷰컨트롤러의 class 속성을 DetailViewController로 변경
=> 추가한 뷰컨트롤러의 storyboard ID 속성에 id를 설정 - DetailViewController
2) 기존의 ViewController에 NavigationController를 추가
=> 뷰컨트롤러를 선택하고 Editor] - [Embed in] - [Navigation Controller]를 선택
3) NavigationBar의 구성
=> 왼쪽과 오른쪽에는 BarButtonItem을 여러개 배치 가능
=> 가운데는 UIView로 만들어져 있다.
화면에 보여지는 모든 것들은 UIVIew로 부터 상속을 받는다.
5) 바 버튼을 눌렀을 때 호출될 메소드를 생성
=> 바 버튼을 선택하고 마우스 우클릭을 눌러서 action 밑의 selector를 선택하고 소스코드 창으로 드래그 앤 드랍을 하고 메소드 이름을 입력하고 작성
@IBAction func DetailDisplay(_ sender: Any) {
let detailViewController = self.storyboard?.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
//푸시
self.navigationController?.pushViewController(detailViewController, animated: true)
}
** TableView
=> 데이터 출력을 위한 뷰
=> 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에 테이블 뷰를 1개 배치
2) TableView를 변수와 연결 - tableview
3) 테이블 뷰에 출력할 데이터 배열을 선언
4) viewDidLoad에서 초기화 작업 수행
//
// ViewController.swift
// Table
//
// Created by Lee Seungbum on 2020/08/19.
// Copyright © 2020 Lee Seungbum. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
var data = Array<String>()
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
data.append("기본 테이블")
//테이블 뷰에 delegate와 dataSource 설정
tableView.delegate = self
tableView.dataSource = self
}
}
extension ViewController : UITableViewDelegate, UITableViewDataSource{
//행의 개수를 설정하는 메소드
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
//셀을 설정하는 메소드
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//셀의 아이디
let cellIdenfifier = "Cell"
//셀을 생성
var cell = tableView.dequeueReusableCell(withIdentifier: cellIdenfifier)
//재사용 가능한 셀이 없으면 생성
if cell = nil{
cell = UITableViewCell(style: .default, reuseIdentifier: cellIdenfifier)
}
//셀의 데이터 출력
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 tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "cell"
var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
if cell == nil{
cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
}
cell.textLabel?.text = data[indexPath.row]
cell.accessoryType = .disclosureIndicator
return cell
}
** 셀의 구성
=> 셀의 스타일에 따라 구성이 달라짐
1. 기본 구성
UIImageView imagaView
UILabel textLabel
UILabel detailTextLabel
UIView accessoryView
=> accessoryView는 accessoryType 속성을 이용해서 제공되는 모양을 설정할 수 있다.
Checkmark, detailButton, detailDisclosureButton, disclosureIndicator, none
2. style
default : detailTextLabel 을 사용못함
subtitle : detailTextLabel을 사용 가능
value1 : derailTextLabel이 accessoryView 영역에 출력
value2 : derailTextLabel이 imageView 영역에 출력
3. 셀의 모양 변경
=> style을 변경
=> UITableViewCell을 subclassing - 상속받는 클래스를 생성
=> Cell에는 contentView라는 속성을 가지고 있는데 직접 View를 디자인해서 contentView 속성에 대입
4. 셀의 이미지 뷰에 이미지를 출력하고 textLabel과 detailTextLabel에 문자열을 출력하기
1) 프로젝트에 ViewController를 상속받는 클래스 추가(CellStyleViewController)
2) Main.storyboard 파일에 ViewController를 추가하고 CellStyleViewController로 클래스와 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파일에 테이블 뷰에 출력할 데이터 배열을 인스턴스 변수로 선언
class CellStyleViewController: UIViewController {
//테이블 뷰의 레이블에 출력할 데이터 배열
var names = Array<String>()
//테이블 뷰의 이미지 뷰에 출력할 이미지 파일 이름 배열
var imageNames = Array<String>()
7)CellStyleViewController.swift 파일의 viewDidLoad 메소드에서 배열을 초기화
override func viewDidLoad() {
super.viewDidLoad()
names.append("아이린")
names.append("슬기")
names.append("웬디")
names.append("조이")
names.append("예리")
imageNames.append("red00.jpg")
imageNames.append("red01.jpg")
imageNames.append("red02.jpg")
imageNames.append("red03.jpg")
imageNames.append("red04.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: .value2, 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
=> identifier를 설정 - CustomCell
6) 셀을 디자인하고 변수를 생성
=> 이미지 뷰 1개를 배치하고 ImgView라는 변수로 연결
7) CustomCellViewController.swift 파일에 테이블 뷰에 출력할 데이터 배열 변수를 선언
vsr imageNames = Array<String>()
8) CustomCellViewController.swift 파일의 viewidLoad 메소드에서 데이터를 초기화
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
}
}