iOS ) Peek and Pop

안녕하세요 :) Zedd입니다.

핳 요새 Rx를 공부중이고, 프로젝트에 넣고 있어요.

일단 ViewController의 길이가 줄어들긴 줄어들더라구요 하핫

언젠가 Rx와 관련된 글도 잘 쓸 수 있길 바랍니다.

요새 주말에는 제 개인앱을 업데이트 하고 있는데, Peek and Pop기능을 추가하면 좋겠다는 생각이 들어서요.

공부해보려고 합니다. 

Peek and Pop

---

역시나 문서를 먼저 봅시다.

3D Touch를 사용하여 컨텐츠에 대해 사용자 정의 preview 및 action을 표시하는 것이 Peek and Pop입니다. 

그림으로 보니까 바로 알겠죠? 중간의 기능이 Peek and Pop입니다.

암튼 저는 quick action기능은 있는데 Peek and Pop도 넣으면 좋겠다 싶어서 이번에 넣을려고 해요.

이미 제출...했..

Apple에서는 아주 친절하게도 Peek and Pop에 대한 샘플코드도 제공하고 있습니다.

별거없음.

시작해볼게요.

먼저 저 테이블뷰 cell에 3D Touch를 해야겠죠? 그러니까 저 TableView가 있는 Controller로 가줍니다.

그리고 

해당 ViewController가 위 UIViewControllerPreviewingDelegate를 채택하도록 해줍니다.

iOS9이상만 가능함

그러면 지금 에러가 날텐데, 왜냐 저 프로토콜을 준수하지 않아서입니다.

이 2가지 메소드를 구현해줘야 합니다.

첫번째 메소드부터 봅시다.

사용자가 previewing을 할 ViewController에서 source view를 누를 때 호출되어 preview(peek)를 사용할 수 있음을 나타내는 주위에 블러 효과를 얻습니다.

바로 이 효과,..

파라미터는 2개가 있는데요, previewingContext와 location.

previewingContext는 previewing ViewController의 컨텍스트 객체입니다.

location은 sourceView의 좌표 시스템에서의 touch location입니다.

return 값은 preview(peek)으로 제공하려는 ViewController나, preview를 사용하고 싶지 않다면 nil을 리턴하면 됩니다.

그럼, 우리 같은 경우에는 TableView에 있는 cell에 3D Touch를 했죠?

어떻게 preview view controller를 보여줄 수 있을까요.

참고로 Apple의 샘플코드입니다...

암튼 첫번째 줄에서 location을 이용해서 indexPath를 가져온다음에 또 indexPath를 이용해서 cell을 구해오는 것을 볼 수 있습니다.

그리고 previewingContext의 sourceRect에 cell의 frame을 넣어주는 것을 볼 수 있죠.

사실 이 코드가 없어도 돌아가긴 합니다만, 뭔가 있고 없고의 차이가 눈으로 보여서...

없으면 엄청 딱-팍 이렇게 뜨는 기분임. 있으면 슈웅 하고 뜨는........ㅎ;;;;;;;;;암튼 알아서 보셈

그리고 return 은 당연하게도 내가 preview로 보고싶은 viewController를 리턴해주면 됩니다. 

암튼 뭐 데이터를 배열로 갖고 있는 사람들은 indexPath만 있으면 되겠죠?? indexPath.rowㅇ로 해서...url을 얻어온다거나 하면 됩니다. 

두번째 메소드.

commit view controller에서 commit(pop) view의 presentation을 준비 할 때 호출된다고 해요.

아 이건 제 코든데, 암튼 push로 하든 present로 하든 둘다 viewController를 넣어줘야ㅕ 하잖아요? 그때 파라미터의 viewControllerToCommit을 넣어주면 됩니다.

자, 이러면 일단 에러는 없어졌는데, 아직 3D Touch를 해도 아무것도...작동 안하는 것을 볼 수 있습니다. 

한가지 작업을 더 해줘야하는데요,

register를 해줘야 합니다. 지금은 tableView안의 cell에 할거니까, sourceView가 tableView지만, 

뭐 아니라면 self.view를 넣어줘도 될 듯?

자..이대로 끝나면 넘나 아쉬우니, 다른걸 더 해봅시다. 

애플의 샘플코드를 빌드하고 3D Touch한 상태로 살짝 위로 올리면

이런 action들이 나오게 됩니다.

이걸 해볼게요.

참고로..저는 peek view controller로 SFSafariVeiwController를 띄워주는데 

아무것도 안해줬는데 요것들이 뜨네요.

SFSafariViewController의 하단 툴바에 있는 기능들을 여기서 띄워주는 것 같아요.

암튼 다시 애플코드로 돌아가서, ColorItemViewController.swift에 가보면 

previewActionItems를 오버라이드 한 코드를 볼 수 있습니다. 

TableView에서 UIContextualAction같은.. UIAlertAction같은..그런 비슷한 코드를 볼 수 있습니다. 

바로 UIPreviewAction! 다른말로 peek quick action이라고도 하는데요, 

UIPreviewAction의 정의를 보자면, 

사용자가 peek을 위로 스와이프 하면, peek 아래에 preview action 또는 peek quick actuon을 볼 수 있습니다.

라고 하는데요, 

그냥 오버라이드만 해주면 됩니다.

그냥 코드보면 어케 할지 알겠죠?

style은 3가지가 있는데요, default와 destructive는 익숙하시죠? 여기에 selected라는 스타일이 있더라구요. 

암튼..신기해서 ㅎ

그리고 UIPreviewAction말고도 UIPreviewActionGroup라는 것도 있습니다. 

네 말그대로 그룹이에요!

타이틀과 스타일은 같은데, actions에 [UIPreviewAction]이 들어가죠? 그러니까 UIPreviewAction의 그룹(?)을 넣어주는 겁니다. 저는 우리가 가지고 있던 default랑 destructive 그리고 selected를 넣어줄게요. 

아까 그 코드에 

이렇게만 추가해줬어요. 자..그렇 어떻게 될지 감이 오시나요? 

왼쪽에서 그룹을 누르면, 우리가 아까  [UIPreviewAction]로 넣어준 action들이 뜨게된답니다. 

뭔지 아시겠죠? 

암튼 Peek and Pop기능 잘 사용하길 바래요. XD

저는 이번에 처음 써봐서..많은 공부가 된 것 같아요. 하핫