カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
•
2 likes•1,888 views
iOS Creators' Meetup vol.3でのでのLT登壇資料になります。 GestureRecognizer(UILongPressGestureRecognizer & UIScreenEdgePanGestureRecognizer)やCustomTransitionを活用したサンプル作成を行った際に実装のポイントや活用した部分についての事項に関してまとめたものになります。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Similar to カスタムトランジションやジェスチャーを生かしたUIの実装ポイント (15)
More from Fumiya Sakai
More from Fumiya Sakai (20)
Recently uploaded
Recently uploaded (8)
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
- 7. ✦ 先ほどの見た目を図解するとViewControllerはこのような形 UIScreenEdgePanGestureRecognizerの実装 self.viewに付与すると、開く動作中に別の指でself.viewの左端を触ると固まるのでこの実装にしました。 ★ぴったりと重なったコンテンツ用のContainerViewを開くトリガーとして活用 ・UIScreenEdgePanGestureRecognizer (コンテンツのContainerViewに付与する) ・おおもとのView (self.view) ・コンテンツ用のContainerView (mainContentsContainer) ・サイドメニュー用のContainerView (sideMenuContainer) コンテンツ表示用のContainerViewの大きさはおおもとのviewと同じ大きさ //左隅部分のGestureRecognizerを作成する（デリゲートの設定と検知位置を決める） let edgeGesture = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(ViewController.edgeTapGesture(sender:))) edgeGesture.delegate = self edgeGesture.edges = .left //初期状態では左隅部分のGestureRecognizerを有効にしておく mainContentsContainer.addGestureRecognizer(edgeGesture)
- 9. ✦ UICollectionViewのセルに付与しその後の処理でドラッグ＆ドロップ UILongPressGestureRecognizerの実装 イベント発生までのタップ時間の設定や指のズレの許容範囲を設定できるのでより細かい設定が可能です。 ★画像のドラッグ＆ドロップに関する処理を行う直前のトリガーとして活用 //セルに表示する値を設定する internal func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { //セルの定義を行う let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "RecipeCell", for: indexPath) as! RecipeCell //（省略）セルへ受け渡された値を設定する //cellのタグを決定する(LongPressGestureRecognizerからの逆引き用に設定) cell.tag = indexPath.row //LongPressGestureRecognizerの定義を行う let longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(MakeRecipeController.longPressCell(sender:))) //イベント発生までのタップ時間：0.24秒 longPressGesture.minimumPressDuration = 0.24 //指のズレを許容する範囲：10px longPressGesture.allowableMovement = 10.0 //セルに対してLongTapGestureRecognizerを付与する cell.addGestureRecognizer(longPressGesture) return cell } longPressCellメソッド内で選択したセルの識別と ドラッグ＆ドロップの実処理部分を行う。
- 10. ✦ NSObjectを継承 ＆ UIViewControllerAnimatedTransitioningを適用 アニメーションを行う実体となるContainerViewの中に遷移元・遷移先の情報とロジックを記載する形に。 ★設定するのは動きの秒数と画面遷移時のアニメーション実体となるContainerView CustomTransitionの基本形（遷移用Class） //アニメーションの時間を定義する internal func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return (アニメーションの動作時間) } //アニメーションの実装を定義する internal func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { �//(流れ1) コンテキストを元にViewないしはViewControllerのインスタンスを取得する（存在しない場合は処理を終了） �//(流れ2) アニメーションの実態となるコンテナビューを作成 �//(流れ3) 拡大・縮小等の処理を記載しアニメーションの実体となるContainerViewに必要なものを追加する ����UIView.animate(withDuration: (アニメーションの動作時間), delay: 0.0, options: .curveEaseOut, animations: { �����//アニメーション処理の中身 �}, completion:{ finished in ����transitionContext.completeTransition(true) �}) } transitionContext = 遷移元や遷移先のViewControllerやそのほか関連する情報が格納されているもの
- 11. ✦ 遷移時のアクションのpresented側にtransitionDelegateを適用 遷移用クラスのインスタンスをViewController側で作りUIViewControllerTransitioningDelegateを適用する ★適用させるプロトコル：UIViewControllerTransitioningDelegate CustomTransitionの基本例（ViewController） //進む場合のアニメーションの設定を行う internal func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { return (UIViewControllerAnimatedTansitioningのインスタンス) } //戻る場合のアニメーションの設定を行う internal func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { return (UIViewControllerAnimatedTansitioningのインスタンス) } このケースはModalでの遷移をCustomTransitionを活用してカスタマイズすることを想定しています。 遷移用のClass内でPresented / Dismissの場合分けが行えるような形で実装をしておく。 ポイント: ※UINavigationControllerと併用してPush / Popの遷移アニメーションのカスタマイズも可能 該当のViewControllerで遷移用Classのインスタンスを作成しPresented / Dismissの設定を行う。