View Controller Transitioning 에 대하여 - 2

View Controller Transitioning 에 대하여 - 1 

View Controller Transitioning 에 대하여 - 2 (현재페이지)

View Controller Transitioning 에 대하여 - 3 

저번 포스팅에 서 UIViewControllerAnimatedTransitioning의 기초 사용법을 알아보았다.

이번 포스팅은 조금더 깊숙하게 들어가보도록하자

완성된 애니메이션을 만들어서 쓰고 싶은데 어떤 모양이 좋을까 하다가 결정한게 바로 이것

iOS 사용자라면 다들 익숙하고 알고 있는

요 애니메이션을 구현해 보도록하겠다. gif속 앱은 애플의 기본앱인 Mail앱

1편에서는 Push의 형태로 구현을 했다면 이번엔 Modal의 형태로 구현을 해야 한다

코드를 작성하기전에 필요한 것들을 생각해보자 올라오는뷰가(B View)완전히 덮는게 아닌 일정한 간격을 벌린채 올라와있다 그리고 뒤에있는 부모뷰(A View)는 조금씩 스케일이 작아지고 있고  살짝 어둡게 처리 된듯하다 그리고 gif엔 안나오지만 b View의 navi쪽에 제스쳐 기능도 추가되어있다 

먼저  storyboard를 수정하자 

기존의 푸시(show e.g. Push)를 빼고 모달(Present Modally)로 바꿔준다

그리고 B View에 네비게이션바를 추가해 네비가 있는것처럼 꾸며줬다

Segue id값은 은 "modalSegue"로 대충 정했다 

얼핏 보면 1편과 똑같아 보이지만 다르다

1편에 작성된 코드를 모두 삭제 하고 새로이 작성해보자

1편에는 테스트 용도로 작성했다면 이번엔 실제 프로젝트에 사용한다 생각 하며 코딩을 한다

우선 상태체크를 위한 전역변수 두개를 만들자 

이는 현재 화면의 상태를 체크 하기 위한 값과 현재 동작이 닫기 위한것인지 열기위한 것인지 구분하기 위함이다

또 전역상수 3개를 만들것인데 이는 꼭 안만들어도 되나 수치같은 숫자값은 만들어 쓰는게 오타로 인한 오동작을 막아주기때문에 선언한다

var isRecersed: Bool = false var isCloseViewControllerNow = false let modalViewYOffset: CGFloat = 44.0 let noModalViewScale: CGFloat = 0.9 let noModalViewAlpha: CGFloat = 0.6

변수명만 봐도 대충 무엇을 위한 변수 상수 인지 알수 있을듯

다음은 나머지 부분을 작성한다 

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 1.0 } func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { guard let fromViewController: UIViewController = transitionContext.viewController(forKey: .from) else { transitionContext.completeTransition(false) return } guard let toViewController: UIViewController = transitionContext.viewController(forKey: .to) else { transitionContext.completeTransition(false) return } let containerView: UIView = transitionContext.containerView let finalViewControllerFrame = transitionContext.finalFrame(for: toViewController) let duration: TimeInterval = self.transitionDuration(using: transitionContext) let viewHeight: CGFloat = fromViewController.view.frame.height let modalViewController: UIViewController = self.isRecersed ? fromViewController : toViewController let nonModalViewController: UIViewController = self.isRecersed ? toViewController : fromViewController var modalFinalFrame = self.isRecersed ? finalViewControllerFrame.offsetBy(dx: 0, dy: viewHeight) : finalViewControllerFrame var scaleFactor: CGFloat = 0.0 var alphaVal: CGFloat = 0.0 if self.isRecersed == true { scaleFactor = 1.0 alphaVal = 1.0 } else { modalFinalFrame.origin.y += self.modalViewYOffset modalViewController.view.frame = finalViewControllerFrame.offsetBy(dx: 0, dy: viewHeight) scaleFactor = self.noModalViewScale alphaVal = self.noModalViewAlpha containerView.addSubview(toViewController.view) } UIView.animate(withDuration: duration, delay: 0.0, usingSpringWithDamping: 100, initialSpringVelocity: 10, options: .allowUserInteraction, animations: { nonModalViewController.view.transform = CGAffineTransform.identity.scaledBy(x: scaleFactor, y: scaleFactor) nonModalViewController.view.alpha = alphaVal modalViewController.view.frame = modalFinalFrame if self.isCloseViewControllerNow == true { toViewController.view.transform = CGAffineTransform.identity toViewController.view.frame = transitionContext.finalFrame(for: toViewController) self.isCloseViewControllerNow = false } }) { (isFinish) in transitionContext.completeTransition(!transitionContext.transitionWasCancelled) self.isRecersed = !self.isRecersed } } func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { return self } func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { self.isCloseViewControllerNow = true return self }

fromViewController와 toViewController를 guard let 으로 선언 한 이유는 옵셔널 체크로 인한 크래시발생을 아예 없애기 위해서다

isRecersed로 from과 to 를 정하여 각각 modalViewController와 nonModalViewController로 구분하고

isRecersed 가 false 일경우 상수로 지정해놓은 스케일값과 Y값으로 애니메이션 동작을 하도록 하고 있다

isRecersed 가 true라는건 모달이 띄워진 상태를 말하고 false은 모달이 안띄워진 상태라고 보면 된다

UIView.animate를 spring애니메이션으로 정했다 하지만 정도는 약하게 설정했다 최대한 부드럽게 동작하기 위해서다\

A View 에서도 코드를 조금 수정해야 한다 

1편에 작성했던 UINavigationControllerDelegate를 삭제 하고 A View자신에게 애니메이션 클래스로 선언하고 

override func prepare(for segue: UIStoryboaedSegue, sender: Any?) 에 아까 지정했던 segue id값으로 B View를 가져와 마찬가지로 애니메이션 클래스를 추가해보자

class AViewController: UIViewController { var transitionManager = ModalTransition() override func viewDidLoad() { super.viewDidLoad() self.transitioningDelegate = self.transitionManager } override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if segue.identifier == "modalSegue" { if let viewController = segue.destination as? BViewController { viewController.transitioningDelegate = self.transitionManager viewController.modalPresentationStyle = .custom } } } }

B View에는 그냥 버튼 Action하나 추가 해서 dismiss코드 하나 추가 해주면 된다

그리고 실행하면 

오 대충 모양새가 나온다

다음편은 제스쳐 기능을 추가해 드래그하며 닫기를 해보도록하자