[Swift 4] Custom Segue로 화면 전환을 가로 방향으로 하는 법

앱 제작시에 일반적인 화면 전환 방법으로는 내비게이션 컨트롤러와 세그를 이용하는 방법이 주로 사용되는데

내비게이션 컨트롤러의 경우 화면 전환은 가로 방향으로 오른쪽에서 나타나서 왼쪽으로 이동하고

세그인 경우에는 세로 방향으로 아래에서 위로 이동한다.

내비게이션 컨트롤러를 이용하지 않고 세그를 이용하면서 화면 전환 방향을 가로방식으로 하려면 커스텀 세그를 만들어 사용해야 한다.

1. CustomSegueClass 만들기
   

//  CustomSegueClass.swift  

import UIKit

 

  // RightViewController  뷰 이동

  class right: UIStoryboardSegue {

      override func perform()

      {

          let src = self.source as UIViewController

          let dst = self.destination as UIViewController

          src.view.superview?.insertSubview(dst.view, aboveSubview: src.view)

          dst.view.transform = CGAffineTransform(translationX: src.view.frame.size.width, y: 0)

          UIView.animate(withDuration: 0.25,

                                     delay: 0.0,

                                     options: UIViewAnimationOptions.curveEaseInOut,

                                     animations: {

                                      dst.view.transform = CGAffineTransform(translationX: 0, y: 0)

                                      src.view.transform = CGAffineTransform(translationX: -src.view.frame.size.width/3, y: 0)

          },

                                     completion: { finished in

                                      src.present(dst, animated: false, completion: nil)

          }

          )

      }

  }

 

  // RightViewController  뷰 닫기

  class Unwind_right: UIStoryboardSegue {

      override func perform()

      {

          let src = self.source as UIViewController

          let dst = self.destination as UIViewController

          src.view.superview?.insertSubview(dst.view, belowSubview: src.view)

          src.view.transform = CGAffineTransform(translationX: 0, y: 0)

          dst.view.transform = CGAffineTransform(translationX: -src.view.frame.size.width/3, y: 0)

          UIView.animate(withDuration: 0.25,

                                     delay: 0.0,

                                     options: UIViewAnimationOptions.curveEaseInOut,

                                     animations: {

                                      src.view.transform = CGAffineTransform(translationX: src.view.frame.size.width, y: 0)

                                      dst.view.transform = CGAffineTransform(translationX: 0, y: 0)

          },

                                     completion: { finished in

                                      src.dismiss(animated: false, completion: nil)

          }

          )

      }

  }

2. 세그로 연결하기 - 연결할 때 액션 세그에서 제일 아래의 커스텀을 선택한다.

3. 세그의 옵션을 선택 - 연결된 세그를 선택 후 인스펙터 창에서 클래스를 right를 선택한다.

4. 되돌아가기 Unwind 설정하기 - 돌아가고자 하는 화면의 ViewController 파일에 아래 코드를 넣는다.

@IBAction func returnFromSegueActions(segue:UIStoryboardSegue){ }

예를 들어 A 화면에서 B 화면으로 이동한 후 다시 A 화면으로 돌아가고 싶다면 A 화면의 소스에 넣는다.

5. Back 버튼에 Unwind를 연결한다.

Back 버튼을 드래그하여 화면에 표시한 곳에 두고 액션 세그 창에서 “returnFromSegueActionsWithSegue”를 선택한다.

6. Unwind의 방향을 설정한다.
   

  

좌측 도큐먼트 아웃라인에 생성된 Unwind를 선택 후 우측 인스펙터에서 액션은 “returnFromSegueActionsWithSegue” 클래스는 “Unwind_right”를 선택해 준다.

모든 과정을 마쳤다면 세그웨이 방식의 연결임에도 내비게이션 컨트롤러를 사용한것과 같이 가로방향으로 화면 전환이 일어날 것이다.