[Swift] ViewController 화면전환

앱을 만들다가 화면 전환이 필요할 때마다 찾아봐서 정리하면서 공부해 볼게요~

 

UIKit 프레임워크를 사용

 

우선 초기 화면에서 command + N을 눌러 swift file을 하나 생성

- 'ViewController2'라는 이름으로 생성

 

ViewController 코드에서 버튼을 눌러 화면을 넘어가는 기능을 수행할 것이기 때문에 다음과 같이 작성

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var NextPage: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

 

생성된 ViewController2 내부의 코드는 다음과 같이 작성

import UIKit

class ViewController2: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.view.backgroundColor = UIColor.blue // 배경화면을 파란색으로 설정
    }
}

 

다음 Main 스토리보드로 이동하여 command + shift + L을 눌러 View Controller를 생성

생성한 View Controller의 설정(우측상단) 중에 Custom Class의 Class를 ViewController2로 변경

 

다음 command + shift + L을 눌러 ViewController에 button을 추가하고 상단 버튼의 3개 중 왼쪽 버튼을 오른쪽 클릭하여 NextPage와 button을 연결

 

연결된 버튼을 control 키를 눌러 드래그하여 ViewController2로 끌어준 뒤 놓아줌

 

놓아주면 Action Segue 목록이 뜨게 되는데 어떠한 방식으로 화면을 넘길지 선택할 수 있음

(정리본은 show를 선택)

 

↓↓↓실행화면↓↓↓

실행하게 되면 모달형식으로 화면이 올라오게 되고 모달 된 화면을 내리면 다시 이전 화면으로 돌아갈 수 있음

 

@IBAction을 이용하여 스토리보드에서 control로 드래그 없이 화면 전환을 할 수 있음

ViewController 코드에 @IBAction 부분을 추가로 작성

class ViewController: UIViewController {
    
    @IBOutlet weak var NextPage: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func NextPageClick(_ sender: UIButton) {
        let vcName = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2")
        
        vcName?.modalPresentationStyle = .fullScreen // 모달이 아닌 전체화면으로 보여짐
        
        self.present(vcName!, animated: true, completion: nil)
    }
}

 

다음 스토리보드에서는 control로 버튼과 화면을 연결해 주었던 줄을 지우고

ViewController2의 설정에서 'identity'부분의 Storyboard ID를 위의 코드에 withIdentifier로 설정해 주었던 "ViewController2"를 작성

 

다음 ViewController의 Button을  NextPageClick 하고 연결

연결 옵션은 Touch Up Inside로 설정

 

↓↓↓실행화면↓↓↓

실행하게 되면 화면이 올라오는 방식으로 바뀌면서 전체화면으로 설정해 두었기 이전 페이지로 가는 방법은 따로 버튼을 만들던지 해야 함

화면 전환 애니메이션은 vcName?.modalTransitionStyle = .crossDissolve 이런 식으로 NextPageClick 함수에 추가하면 됨

 

마지막으로 Navigation bar를 사용하는 방법이 있음

내비게이션을 사용하기 위해 Editor -> Embed In -> Navigation Controller를 선택

그럼 Navigation Controller가 생성됨

 

ViewController로 돌아가서 다음과 같이 코드를 작성

class ViewController: UIViewController {
    
    @IBOutlet weak var NextPage: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func NextPageClick(_ sender: UIButton) {
        let pushVC = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2")
        self.navigationController?.pushViewController(pushVC!, animated: true)
    }
}

 

마찬가지로 스토리보드에서 ViewController2의 설정에서 Storyboard ID를 'ViewController2'로 설정

(Xcode 텍스트 기본 색상이 파란색이라서 ViewController2의 배경색을 초록색으로 변경함)

 

↓↓↓실행화면↓↓↓

기본 애니메이션은 오른쪽에서 화면이 나타나고 상단에 '< Back' 버튼이 생겨 다시 이전 화면으로 돌아갈 수 있음

 

이상으로 화면 전환에 대해서 정리해 보았습니다~!