앨런 Swift 앱 만들기 UIKit | 화면전환

안녕하세요

오늘은 제가 강의를 보며 배웠던걸 정리하고자 합니다

 

 

 

⭐️인프런에서 앨런님의 swift 앱 만들기⭐️

를 통해서 정리하였습니다

 

정말 정말 잘 설명해주기 때문에 제가 정리해놓은것 보다 보시는걸 추천드립니다

 

자료제공은 절대 불가합니다

 

---

 

화면전환

|

 

화면전환에는 다양한 방법이 있습니다

 

4가지 방법으로 나눌 수 있습니다

순서대로 알아 봅시다

 

Only code

코드로 통해서 다음 화면을 구상하고 만드는 방법은

 

 

코코아 터치 클래스를 하나 만든 후

 

import UIKit

class FirstViewController: UIViewController {
    
    let mainLabel: UILabel = {
        let label = UILabel()
        
        label.text = "첫 번째 화면입니다"
        label.font = UIFont.systemFont(ofSize: 22)
        
        return label
    }()
    
    let backButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setTitle("BACK", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .blue
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
        button.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)
        return button
    }()
    
   
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        makeUI()
    }
    
    
    
    func makeUI() {
        view.backgroundColor = .gray
        view.addSubview(mainLabel)
        view.addSubview(backButton)
        
        mainLabel.translatesAutoresizingMaskIntoConstraints = false
        backButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            mainLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            mainLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            
            backButton.widthAnchor.constraint(equalToConstant: 70),
            backButton.heightAnchor.constraint(equalToConstant: 40),
            backButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -40),
            backButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
            ])
        
        
        
    }
    
    @objc func backButtonTapped() {
        //뒤로가기
        self.dismiss(animated: true, completion: nil)
    }


}

 

새로 생성한 뷰컨트롤러에서

코드로 버튼과 UILabel을 생성하고

레이아웃을 잡아줍니다

 

그리고 Storyboard의 Button과 viewController를 IBAction으로 연결해줍니다

 

 //코드로 화면 이동
    @IBAction func codeNextButtonTapped(_ sender: UIButton) {
        let firstVC = FirstViewController()
        
        //설정해주지 않으면 전체 화면으로 나타나지 않음
        //설정해주지 않게된다면❓ Safe Area범주의 화면이 나오게됨
        //⭐️fullScreen 명시적으로 설정하기 - 추후에 화면 관리 시스템을 만들면 좋을것 같다라는 생각이 듦
        firstVC.modalPresentationStyle = .fullScreen
        self.present(firstVC, animated: true, completion: nil)
    }

 

이렇게 코드를 짠 후 실행하게되면

 

.fullScreen 사용

 

 

modalPresentationStyle을 fullScreen으로 사용했을 때

SAFE AREA까지 화면이 덮인것을 볼 수 있습니다 

 

.fullScreen 아닐 때

 

반면에 modalPresentationStyle을 주석처리 했을 때

SAFE AREA 부분 이상으로 올라가지 않는것을 볼 수 있습니다

 

스토리보드와 코드로 통해서

 

 

 

위 첫 번째처럼 코코아터치클래스를 하나 생성하고 스토리보드에 뷰컨트롤러를 하나 생성한 후

화면 클래스 이름을 생성한 클래스와 동일한 이름으로 설정해줍니다

 

 

그리고 스토리 보드를 만들어 준 후 SecondViewController와

스토리보드에 있는 UILabel / UIButton을 연결해 줍니다

 

import UIKit

class SecondViewController: UIViewController {

    @IBOutlet weak var mainLabel: UILabel!
    
    //var someString: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        //mainLabel.text = someString
    }
    

    @IBAction func backButtonTapped(_ sender: UIButton) {
        dismiss(animated: true, completion: nil)
    }
}

 

그리곤 storyboardID를 설정하고 스토리보드의 버튼과 ViewController을 IBAction으로 연동한 후 코드를 작성해줍니다 

 

 @IBAction func storyboardWithCodeButton(_ sender: UIButton) {
        //반드시 스토리보드에서 identifier : secondVC를 설정해줘야한다
        guard let secondVC = storyboard?.instantiateViewController(withIdentifier: "secondVC") as? SecondViewController else { return }
        
        self.present(secondVC, animated: true, completion: nil)
    }

 

 

아래 스토리보드를 생성하는 코드인 storyboard?.instantiateViewController(withIdentifire:)을 사용합니다

 

storyboard?. 은 옵셔널 체이닝을 사용하여 storyboard가 nil일 수도 있기 때문에

storyboard가 nil이 아닌 경우에만 초기화가 될 수 있도록 메서드를 호출 하도록 합니다

그리고 뒤에 타입캐스팅 as?를 사용하고 있습니다

as? SecondController는 반환된 UIViewController 인스턴스를 SecondController 타입으로 다운 캐스팅을 하고 있습니다 

다운 캐스팅에서 ?를 사용하는 이유는 SecondViewController 인지 확실하지 않기 때문에 타입 캐스팅을 하고 있습니다

만약 성공하게 되면 타입의 옵셔널값이 되고 실패하게되면 nil이 됩니다(앱 크래시 방지)

 

간접 세그웨이

 

class ThirdViewController: UIViewController {

    @IBOutlet weak var mainLabel: UILabel!
    var someString: String?
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        mainLabel.text = someString
    }
    

    @IBAction func backButtonTapped(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }

 

세 번째도 스토리보드를 하나 만들어 준 후 스토리보드에서 UILabel / Button을 ThirdViewController에 연결한 후 코드를 작성해줍니다

 

그리고 ViewController에서 스토리보드 버튼과 연동한 후 코드를 작성해 줍니다

 

   //간접세그웨이
    //버튼을 바로 만들어서 전달이 되는데 만약 정보를 전달해야할 때 perform세그웨이구현해야함
    @IBAction func sotryboardWithSegueButtonTapped(_ sender: UIButton) {
        self.performSegue(withIdentifier: "toThirdVC", sender: self)
    }
    
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //간접세그웨이 구현시 반드시 prepare 메서드를 사용하여 구현해야함
        if segue.identifier == "toThirdVC" {
            let thirdVC = segue.destination as! ThirdViewController
            thirdVC.someString = "반갑습니다"
            //⭐️만약 mainLabel.text = "반갑습니다" 스토리보드 객체보다 먼저 생성하려고 하기 때문에 ⚠️에러⚠️가 발생
        }
  }

 

performSegue(withIdentifire:,sender:)를 사용하여 즉시 새로운 뷰 컨트롤러가 생성되고 화면 전환이 이루어지게 됩니다

그리고 prepare(for:sender:)로 통해서 다음 씬에 필요한 정보를 넘겨줄 수 있습니다

그리곤 다음 씬에서 데이터를 초기화하여 적용할 수 있는 형식입니다

 

performSegue 세그웨이를 호출 후  prepare(for:sender:) 메서드를 사용해서 다음 씬에서 필요한 데이터를

적용하는 방식이라고 이해하시면 됩니다

주의할 점은 반드시 스토리뷰에서 세그웨이를 사용할 때 

가운데 연결된 선을 선택해서 id를 세팅해야합니다

 

 

그리고 3번째는 씬에서 씬으로 설정한 세그웨이입니다

반드시 뷰 컨트롤러 위에 있는 

 

누른후 Control을 누른채로 다음화면과 연결해주면 됩니다 :)

 

직접 세그웨이(버튼을 통하여)

직접 세그웨이는 버튼을 다음화면과 직접 연결하는 방법입니다

 

버튼을 누르고 Control을 누른 후 다음화면과 연결하여 세그웨이를 만들 수 있습니다

그리곤 뷰컨트롤러 new file을 만든 후 코드를 작성해줍니다

 

class FourthViewController: UIViewController {

    
    
    @IBOutlet weak var mainLabel: UILabel!
    var someString: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        
        // Do any additional setup after loading the view.
        
        guard let someString = someString else { 
            print("여기로 들어옴")
            return
        }
        
        mainLabel.text = someString
    }
    

    @IBAction func backButtonTapped(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }

 

그리곤 ViewController에서도 추가적으로 작업을 해줍니다

 

 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //간접세그웨이 구현시 반드시 prepare 메서드를 사용하여 구현해야함
        if segue.identifier == "toThirdVC" {
            let thirdVC = segue.destination as! ThirdViewController
            thirdVC.someString = "반갑습니다"
            //⭐️만약 mainLabel.text = "반갑습니다" 스토리보드 객체보다 먼저 생성하려고 하기 때문에 ⚠️에러⚠️가 발생
        }
        
        if segue.identifier == "toFourthVC" {
            let fourthVC = segue.destination as! FourthViewController
            fourthVC.someString = "반갑습니다."
            print("여기로 들어옴")
        }
        
    }
    
     //조건에 따라 다음화면 이동할지/말지 - 반드시 작성해야하는건 아니지만 특정 조건으로 인하여 다음 화면으로
     //넘어가지 않게끔 하고 싶다면 이용할 가치가 있다
    override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
        print(#function)
//        
//        if identifier == "toFourthVC" {
//            return false
//        }
        
        return true
    }

 

 

이렇게 세팅이 끝난 후 실행해보면

다양한 방법으로 다음 화면을 실행할 수  있음을 알게되었습니다

또한 

세그웨이를 사용할 때는 고려해야할 부분들이 많아서 선뜻 사용하기가 어려울 수도 있겠다 라는 생각이 들었습니다

 

마지막으로 다음 화면을 넘겨줄 데이터 값은 

반드시 직접적으로 UILabel.text 이렇게 넘겨주는게 아닌 다음화면의 변수를 하나 생성하여 넣어주는 방식으로 사용해야

다음 화면에서 오류가 나지 않는 것을 알게되었습니다