DevelopmentiOS

[iOS] CustomSegue 예제

iOS

평소에는 push segue, show segue를 주로 사용하다가 push segue가 아니더라도 다음 뷰컨트롤러가 오른쪽에서 왼쪽으로 슬라이드 되는 커스텀 세그웨이가 필요해서 한번 찾아보게 되었습니다.

커스텀 세그웨이를 만드는 방법은 생각보다 간단했습니다. 다만 그 애니메이션이 얼마나 복잡하게 되느냐는.. 많이 공부해봐야할 것 같네요.

일단 코드 작성하기에 앞서 스토리보드에서 세그웨이를 사용할 화면을 두 개 만들었습니다.

그 다음에 .swift파일을 UIStoryboardSegue를 상속받는 것으로 하나 만들어줍니다.

[참고]
UIStoryboardSegue는 세 개의 변수를 가지고 있습니다.

1
2
3
4
5
6
var source: UIViewController
// The source view controller for the segue.
var destination: UIViewController
// The destination view controller for the segue.
var identifier: String?
// The identifier for the segue object.

시작적인 트랜지션을 담당하는 함수는 func perform()으로 정의되어 있습니다.

커스텀 세그웨이는 이 perform()함수를 override해서 source와 destination변수를 이용하여 animation을 만들어주면 됩니다.

간단하게 오른쪽에서 왼쪽으로 destination view가 이동하는 코드를 작성해보았습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import UIKit

class SlideLeft: UIStoryboardSegue {

  override func perform() {

    self.source.view.superview?.insertSubview(self.destination.view,
                                              aboveSubview: self.source.view)
    self.destination.view.frame.origin.x = self.source.view.frame.size.width

    UIView.animate(withDuration: 0.25, animations: {
      self.destination.view.frame.origin.x = 0
    }) { (finished) in
      self.source.present(self.destination, animated: false, completion: nil)
    }
  }

}

이제 스토리보드에서 세그웨이를 추가하려하면 앞서 코딩한 slide left가 있는걸 볼 수 있습니다.

간단하게 show를 사용하던 것 처럼 slide left로 추가하시면 마치 push 처럼 오른쪽에서 왼쪽으로 애니메이션 되면서 나오게 됩니다.

잘 작동하는 애니메이션.gif

Share