Do it! 스위프트로 아이폰 앱만들기(11~12장 내비게이션/테이블 뷰 컨트롤)

11장. 내비게이션 컨트롤러 이용해 화면 전환하기

12장.  테이블 뷰 컨트롤러 이용해 할일 목록 만들기

#  내비게이션 컨트롤러 이용해 화면 전환하기

가. "Editor-Embed in-Navigation Controller"를 선택합니다.

viewController화면을 클릭한 후, navigation Controller 버튼을 클릭

나. library 팔레트에서 "View Controller"를 끌어다가 메인화면 컨트롤러의 오른쪽 빈 공간에 놓습니다.

View 추가

다. library 팔레트에서 "Bar Button Item"을 찾아 네비게이션 바의 오른쪽에 끌어다 놓습니다. 그리고 Arributes inspector의 system item 에 값을 Edit 등으로 변경합니다.

라. EDIT 버튼을 마우스 오른쪽 버튼으로 클릭한 채 오른쪽의 뷰 컨트롤러에 갖다 놓습니다. 그러면 검은색 창에 Action Segue를 Show로 선택합니다. 그러면 "메인화면"에서 서브화면으로 갔다가 돌아오는 형태를 취하게 됩니다. 그러면 별도의 코딩이 없어도 화면 전환이 가능합니다. 

마. 새로운 화면은 뷰 컨트롤러 클래스 파일이 없어, 메뉴에서 File-New-File.. 에서 Cocoa Touch Class를 선택합니다. SubClass는 UIViewController로 하고 클래스명은 ***ViewController로 저장합니다.

view controller 파일 생성

바. Main.storyboard 파일에서 새로 추가한 뷰 컨트롤러(화면)을 선택한후, Identity inspector를 클릭한 후, Class에 새로 만든 ***ViewController 를 선택하여 연결시킵니다. 

class ViewController: UIViewController {

    var images = ["caterpillar.jpg", "child.jpg", "dahlias.jpg", "strawberry.jpg", "woman.jpg"]
    
    @IBOutlet var imgView: UIImageView!
    @IBOutlet var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        print (images.count)
        pageControl.numberOfPages = images.count
        pageControl.currentPage = 0
        
        pageControl.pageIndicatorTintColor = UIColor.green
        pageControl.currentPageIndicatorTintColor = UIColor.red
        imgView.image = UIImage(named: images[0])
    }

    @IBAction func pageChange(_ sender: UIPageControl) {
        print("current page : ")
        print (pageControl.currentPage)
        imgView.image = UIImage(named: images[pageControl.currentPage])
    }
    
}

사. prepare()함수를 재정의하여 값을 전달하고 전달자가 누구인지는 segue.identifier값을 통해 알 수 있습니다.

class ViewController: UIViewController, EditDelegate {
     

    let imgOn = UIImage(named: "lamp_on.png")
    let imgOff = UIImage(named: "lamp_off.png")
    
    var isOn = true
    @IBOutlet var txMessage: UITextField!
    
    @IBOutlet var imgView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        imgView.image = imgOn
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender : Any?) {
        let editViewController = segue.destination as! EditViewController
        if segue.identifier == "editButton" {
            //버튼을 클릭한 경우
            editViewController.textWayValue = "segue : use button"
        } else if segue.identifier == "editBarButton" {
            //바 버튼을 클릭한 경우
            editViewController.textWayValue = "segue : use Bar button"
        }
        editViewController.isOn = isOn
        editViewController.textMessage = txMessage.text!
        editViewController.delegate = self
    }
    
    func didMessageEditDone(_ controller: EditViewController, message: String ) {
        txMessage.text = message
         
    }
    func didImageOnOffDone(_ controller: EditViewController, isOn: Bool) {
        self.isOn = isOn
        if isOn {
            imgView.image = imgOn
        } else {
            imgView.image = imgOff
        }
    }


}

아.데이터를 전달할 경우, delegate역할의 프로토콜을 작성 및 프로토콜내 함수 정의

import UIKit

protocol EditDelegate {
    func didMessageEditDone(_ controller : EditViewController, message : String )
    func didImageOnOffDone(_ controller : EditViewController, isOn : Bool)
}

class EditViewController: UIViewController {

자. didMessageEditDone함수에서 메시지 전달 : txMessage.text = message

차. EditViewController에서 delegate 변수 생성 : var delegate : EditDelegate?

카. 수정화면의 btnDone()함수 를 통해 메인화면으로 값 전달하는 부분 생성 : delegate?.didMessageEditDone(self, message : txMessage.text!)

타. 메인스토리의 ViewController에서 prepare()문에 한줄 추가 : editViewController.delegate = self

//
//  ViewController.swift
//  Navigation
//
//  Created by abdurl on 2023/09/20.
//

import UIKit

class ViewController: UIViewController, EditDelegate {
     

    let imgOn = UIImage(named: "lamp_on.png")
    let imgOff = UIImage(named: "lamp_off.png")
    
    var isOn = true
    @IBOutlet var txMessage: UITextField!
    
    @IBOutlet var imgView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        imgView.image = imgOn
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender : Any?) {
        let editViewController = segue.destination as! EditViewController
        if segue.identifier == "editButton" {
            //버튼을 클릭한 경우
            editViewController.textWayValue = "segue : use button"
        } else if segue.identifier == "editBarButton" {
            //바 버튼을 클릭한 경우
            editViewController.textWayValue = "segue : use Bar button"
        }
        editViewController.isOn = isOn
        editViewController.textMessage = txMessage.text!
        editViewController.delegate = self
    }
    
    func didMessageEditDone(_ controller: EditViewController, message: String ) {
        txMessage.text = message
         
    }
    func didImageOnOffDone(_ controller: EditViewController, isOn: Bool) {
        self.isOn = isOn
        if isOn {
            imgView.image = imgOn
        } else {
            imgView.image = imgOff
        }
    }


}

import UIKit

protocol EditDelegate {
    func didMessageEditDone(_ controller : EditViewController, message : String )
    func didImageOnOffDone(_ controller : EditViewController, isOn : Bool)
}

class EditViewController: UIViewController {
    
    
    var textWayValue : String = ""
    var textMessage : String = ""
    var delegate : EditDelegate?
    var isOn = true

    @IBOutlet var txMessage: UITextField!
   
    @IBOutlet var lblWay: UILabel!
    
    @IBOutlet var swIsOn: UISwitch!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        lblWay.text = textWayValue
        txMessage.text = textMessage
        swIsOn.isOn = isOn

        // Do any additional setup after loading the view.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

    @IBAction func btnDone(_ sender: UIButton) {
        
        if delegate != nil {
            delegate?.didMessageEditDone(self, message: txMessage.text!)
            delegate?.didImageOnOffDone(self, isOn: isOn)
        }
        //navigationController?.popViewController(animated: true)
        _ = navigationController?.popViewController(animated: true)
    }
    
    @IBAction func swImageOnOff(_ sender: UISwitch) {
        
        if sender.isOn {
            isOn = true
        } else {
            isOn = false
        }
    }
}

 

#  테이블 뷰 컨트롤러 이용해 할 일 목록 만들기

가. 아이폰 모양의 스토리보드의 상단을 드래그 한 후, "delete" 버튼으로 화면에 내용 삭제 : 빈 화면 만들기

나. 프로젝트 내의 ViewControllers.swift파일 삭제

다. Library 팔레트에서 Table View Controller를 선택해서 스토리보드에 올려 놓습니다.

라. 메뉴에서 Editor-Embed in-Navigation Controller를 선택하여 추가(Attributes inspector에서 "is Initial View Controller" 항목에 체크)

마. Library팔레트에서 View Controller를 2개를 선택해서 화면에 추가(화면 2개 추가)

바. Library팔레트에서 "Bar Button Item(바 버튼 아이템)"을 찾아 테이블 뷰 컨트롤러의 오른쪽 윗부분에 배치합니다. "Attributes Inspector"을 클릭한 후, System Item값을 Add로 수정합니다. 

사. 바 버튼 아이템을 마우스 오른쪽 버튼으로 클릭하여 새로 추가한 뷰 컨트롤러(마.에서 추가한 화면)로 드래그 합니다. 그리고 뷰 컨트롤러가 전체적으로 파랗게 되면 마우스 버튼을 놓습니다. 그리고 Action Segue 창에서 Show를 선택합니다. 

.. 이후 부분에 대해서는 내용이 많고, 책이 정리가 잘 되어 있기에 실제 책을 보거나 영상 강의를 보는 것을 추천합니다. 저도 이 책은 여기까지 마무리 하고 최근 구매한 인프런의 강좌를 듣고자 합니다.