이번에는 UIKit peek and pop 중 preview action에 대해서 살펴보겠습니다.
애플에서 제공하는 예제를 참고하였습니다. 애플 공식 예제
Peek and Pop 이란?
우선 Peek과 Pop의 차이점을 먼저 설명하면 Peek은 화면을 누르는 강도를 점점 강하게 했을 때이고 Pop은 아주 강하게 꾸욱 눌렀을 때를 의미합니다.
Peek은 지원 단말을 가지고 계신 분들이라면 신기해서 많이 해보셨을텐데 Pop을 해보셨을지는.. (네.. 저는 이 문서 작성하면서 알았습니다..)
Peek and Pop의 구현
- 등록(Register) : registerForPreviewingWithDelegate 메소드를 통해 preview delegate 및 preview가 나타날 대상 view를 지정합니다. 또한 대상 view controller에 UIViewControllerPreviewingDelegate protocol을 지정합니다. 일반적으로 viewDidLoad 메소드에서 등록을 합니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class PresentedViewController: UITableViewController, UIViewControllerPreviewingDelegate { | |
| … | |
| override func viewDidLoad() { | |
| super.viewDidLoad() | |
| registerForPreviewingWithDelegate(self, sourceView: view) | |
| } | |
| … | |
| } | |
- Peek : protocol 메소드 중 previewingContext: viewControllerForLocation: 을 통해 기능이 정의되며 Previewing에 사용할 View Controller를 지정하고 animation이 시작될 rect 와 preferred content size를 지정합니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { | |
| guard let indexPath = self.tableView.indexPathForRowAtPoint(location), cell = self.tableView.cellForRowAtIndexPath(indexPath) else { return nil } | |
| let selectedData = self.data[indexPath.row] | |
| var detailViewCntrlr: UIViewController? | |
| switch selectedData.type { | |
| case .List: | |
| detailViewCntrlr = self.storyboard?.instantiateViewControllerWithIdentifier("DETAIL_LIST_SCREEN") | |
| break | |
| case .Web: | |
| detailViewCntrlr = self.storyboard?.instantiateViewControllerWithIdentifier("DETAIL_WEB_SCREEN") | |
| break | |
| case .Content: | |
| detailViewCntrlr = self.storyboard?.instantiateViewControllerWithIdentifier("DETAIL_CONTENT_SCREEN") | |
| break | |
| } | |
| guard detailViewCntrlr != nil else { return nil } | |
| detailViewCntrlr!.preferredContentSize = CGSizeMake(0.0, 0.0) | |
| previewingContext.sourceRect = cell.frame | |
| return detailViewCntrlr | |
| } |
- Pop : protocol 메소드 중 previewingContext: commitViewController: 를 통해 정의됩니다. 일반적으로는 showViewController 혹은 showDetailViewController를 이용하며 둘의 차이점은 타겟이 되는 view controller만 전체화면으로 보여줄 것(showDetailViewController)이냐 대상 view controller를 포함한 container view controller까지 전체화면으로 보여줄 것이냐 차이로 저는 이해를 했습니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) { | |
| showViewController(viewControllerToCommit, sender: self) | |
| } |
Previewing Action
previewActionItems()는 UIViewController에 iOS9부터 추가된 메소드로 peek action을 정의할 때 사용합니다. action이 정의된 view controller를 peeking 할 경우에 preview 상단에 화살표가 나타나며 화살표 방향으로 손가락을 이동하면 하단에서 정의된 actions가 UIActionSheet 처럼 나타납니다. (iPhone6s plus 에서는 최대 9개까지 액션이 표현되네요..) action의 정의는 UIAlertAction()을 정의할 때와 유사한 형태이므로 바로 이해가 되실 것입니다.
주의! preview actions는 preview 타겟이 되는 view controller에 정의가 되어야 합니다.
또한 actions group을 지원하여 UIPreviewActionGroup() 을 이용하여 여러 액션을 그룹으로 정의도 가능합니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| override func previewActionItems() -> [UIPreviewActionItem] { | |
| let safariAction = UIPreviewAction(title: "Open with Safari", style: UIPreviewActionStyle.Default) { (action, viewCntrlr) -> Void in | |
| UIApplication.sharedApplication().openURL(NSURL(string: "http://y8k.me")!) | |
| } | |
| let closeAction = UIPreviewAction(title: "Copy URL", style: .Default) { (action, viewCntrlr) -> Void in | |
| UIPasteboard.generalPasteboard().string = "http://y8k.me" | |
| } | |
| let action1 = UIPreviewAction(title: "Action1", style: .Default) { (action, vc) -> Void in | |
| print("action1") | |
| } | |
| let action2 = UIPreviewAction(title: "Action2", style: .Default) { (action, vc) -> Void in | |
| print("action2") | |
| } | |
| let action3 = UIPreviewAction(title: "Action3", style: .Default) { (action, vc) -> Void in | |
| print("action3") | |
| } | |
| let actionGroup = UIPreviewActionGroup(title: "Actions", style: UIPreviewActionStyle.Default, actions: [action1, action2, action3]) | |
| return [safariAction, closeAction, actionGroup] | |
| } |
결론
UIKit peek and pop 을 구현하는 방법을 간략하게 알아봤습니다. 앞서 살펴본 short cut 보다는 코드가 많지만 이 역시 구현하기 어렵진 않습니다. 이 녀석을 어디에 어떻게 쓸까는 기획자 분들이나 새로운 기술을 적용하기 좋아하는 저를 포함한 여러 개발자분들의 고민이 필요할 듯 합니다. 당장에 예제를 만들어 보면서도 Safari에서 열기 혹은 클립보드에 복사 말고는 생각나는 것이 없더라구요..
애플에서 제공한 예제를 참고해서 이 글을 쓰면서 작성해 본 코드는 Github 에 등록했습니다. 계획없이 궁금한 부분에 대한 코드를 그냥 적다보니 다소 복잡할 수 있는데 PresentedViewController.swift / DetailWebViewController / DetailListViewController / DetailContentViewController를 참고하시면 되며 단말에 올려 테스트 해보시는 분들은 앱 실행하시고 MODAL 버튼을 누르셔서 peeking 혹은 popping을 해보시면 됩니다.
마지막으로 이해를 돕기 위한 짧은 영상을 첨부합니다.
