iOS Custom Presentation & Transition (1) 〜コード一行もない編〜
作りたいもの
MainViewControllerとDetailsViewControllerがある。
最初はMainViewControllerが表示されてる状態。
MainViewControllerからDetailsViewControllerをモーダルで下からslide inして出して、MainViewControllerの上に表示させる。DetailsViewControllerは画面の下の一部だけを使ってて、他の部分は半透明でMainViewControllerの画面が表示されてるようにする。
そして、DetailsViewControllerを閉じる方法として、DetailsViewController画面で何かしら操作して閉じる。もしくは半透明の画面部分でタップして閉じる。さらに、一番楽しいの、DetailsViewControllerの画面部分をDragして閉じる。
イメージはこんなもの⤵️
どう作るの？分解するのだ
こういうUIは良く見かけると思う。一瞬で一連のアニメーションで終わってるから、ぼんやりしてこれらは一つのControllerで実装されたものに見えがち。
実は各部分の実現を担当する担当者がいるのだ！
まずはPresentationとTransitionで分かれている。
Presentationとは
このDetailsViewControllerが表示されている状態の見た目のこと。
今回の例でいうと、「DetailsViewControllerをスクリーンの下の一部だけに出して、残りの部分は半透明にする」のこと。
コード上は、UIPresentationControllerをimplementしてこの部分を実現する。
Transitionとは
DetailsViewControllerの出し方と閉じる方のこと。
今回の例でいうと、表示するときは下からslide inにして、閉じるときは下にslide outにする。
コード上、UIViewControllerAnimatedTransitioningをimplementして実現する。
Interactive transitionとは
ジェスチャーでtransitionを完成させること。
今回の例でいうと、DetailsViewControllerをドラッグして閉じるのこと。
コード上、UIPercentDrivenInteractiveTransitionみたいなInteractive transition専用のprotocolをimplementして実現する。
「こんなpresentationとtransitionを使うよ〜」のことをどうViewControllerに教える
UIViewControllerTransitioningDelegateを使うのだ！そしてこのprotocolをimplementしてものをDetailsViewController教えればいい。詳細はまた今度。
まとめの図
以上説明した要素の関係をまとめた図。
（ドキュメントからパクッた）
今後のアジェンダ
こんな流れでちょっとずつ書いていく。お楽しみに。
記事のまとめ
iOS Custom Presentation & Transition (1) 〜コード一行もない編〜 - your3i’s blog
iOS Custom Presentation & Transition (2) 〜UIPresentationControllerでカスタムモーダルを作る〜 - your3i’s blog
iOS Custom Presentation & Transition (3) 〜Custom Transition〜 - your3i’s blog
iOS Custom Presentation & Transition (4) 〜Interactive Transition〜 - your3i’s blog
