2024.04.25 Today I Learned

이번에는 UIKit 을 다루는 강의를 다 수강한 이후 직접 혼자서 간단한 UI 와 코드를 작성하여 미니게임을 하나 만들기로 생각했다.

간단한 로또 게임을 만들기로 생각해서 UI를 그리고 있는데 보통 게임을 하게되면 메인 페이지에서 게임 시작을 누른 이후 새로운 페이지로 이동해 게임을 진행한다. 따라서 새로운 ViewController 를 생성해서 페이지를 만들고 있었다.

 

그런데 segue 를 설정하던 중 내가 원하는 세그를 찾기 어려웠다... 그 이유는 보통 기본적으로 사용하는 세그는 슬라이드를 통해 이전 페이지로 이동하거나 상세페이지가 아래에서 올라오는 방식이기 때문이다.

 

하지만 나는 저 뒤로가기 버튼이나 상세페이지가 올라오는 방식이 아니라 게임이 종료되기 전까지의 이동을 제한하는 페이지를 만들고 싶었다. 따라서 직접 구현을 할 수 있는 Custom Segue를 사용하였다.

 

커스텀 세그를 사용하는 방법은 아래와 같다.

1. 페이지를 이동할 수 있는 버튼 생성하기

페이지를 이동할 버튼을 만들고 IBAction으로 Controller 와 연결을 해준다.

@IBAction func ChangeVIewButton(_ sender: Any) {
    print("클릭")
    // 테스트용
}

 

이후 버튼이 잘 눌리는지 확인해본다.

2. UIStoryboardSegue 를 상속받은 CustomSegue 클래스 생성

UIStoryboardSegue 를 받아 CustomSegue 를 사용할 클래스를 하나 생성하고 아래와 같이 코드를 작성한다.

class CustomChangeSegue: UIStoryboardSegue {
    override func perform() {
        let sourceView = self.source.view
        let destinationView = self.destination.view
        
        UIView.transition(from: sourceView!, to: destinationView!, duration: 0.5, options: .transitionFlipFromLeft) { (_) in
            // 화면 전환 후에 추가적인 작업을 수행할 수 있습니다.
        }
    }
    
}

 

UIView 를 사용해 화면전환을 어떤식으로 전환할 것인지 직접 세팅할 수 있다.

3. 세그 설정하기

버튼과 ViewController 를 segue로 연동해준다. Segue 를 생성할 때는 Custom 으로 설정을 해주고 옆의 사진처럼 segue 에 식별자와 위에서 만든 클래스로 연동을 잡아준다.

 

 

 

 

 

4. 버튼과 세그 연동하기

위의 단계대로 다 진행했다면 버튼에 세그를 연동해 화면을 전환하는 메소드를 추가하면 된다.

@IBAction func ChangeVIewButton(_ sender: Any) {
        // print("클릭")
        performSegue(withIdentifier: "viewChange", sender: self)
    }

 

performSegue() 함수를 사용하면되는데 위에서 설정한 식별자를 넣어주면 화면전환이 잘 될것이다.

 

사실 코드를 모두 이해한 것은 아니지만 어떤 방식으로 작동하는지에 대해 알아보았고 다음에는 다시 메인화면으로 돌아오는 방법에 대해서도 공부를 통해 알아가야 한다.