Shari

Kyobashi.swift x AKIBA.swift 合同勉強会
https://kyobashi-swift.connpass.com/event/48794/

Transcript

1. ,ZPCBTIJTXJGUY",*#"TXJGU
   !OBLBKJKBQBO
   Shari
   minneʹಋೖͯ̍͠೥
   

   View Slide

2. AKIBA.swift
   Kyobashi.swift
   Shibuya.swift
   

   View Slide

3. @nakajijapan
   GMO PEPABO inc.
   Principal Engineer
   iOS / Web / OS X
   About Me
   Daichi Nakajima
   

   View Slide

4. ϋϯυϝΠυ࡞඼Λ
   ചΕΔɺങ͑Δɻ
   ࠃ಺࠷େڃͷ
   ϋϯυϝΠυϚʔέοτ
   

   View Slide

5. NKJMultiMovieCaptureView
   NKJMovieComposer
   NKJPagerViewController
   PhotoSlider
   Teiten
   GitHub
   Sengiri
   Shari
   frustration.me
   Kazaguruma
   

   View Slide

6. Shari
   

   View Slide

7. View Slide

8. ࣷར
   • ਣ൧
   • ωλͷҾཱ͖ͯ໾
   

   View Slide

9. What is Shari?
   

   View Slide

10. UI Component
    IUUQTHJUIVCDPNOBLBKJKBQBO4IBSJ
    

    View Slide

11. View Slide

12. Why?
    

    View Slide

13. Why
    • Χʔτͷࡏݿมߋ
    • UIPickerViewΛར༻͍ͯͨ͠
    • ૢ࡞͕̍εςοϓ஗͍
    • தԝ഑ஔ͕ετϨε
    

    View Slide

14. Why
    • Χʔτͷࡏݿมߋ
    • UIPickerViewΛར༻͍ͯͨ͠
    • ૢ࡞͕̍εςοϓ஗͍
    • தԝ഑ஔ͕ετϨε
    ࡏݿมߋʹ̍ɺ͕̎΄ͱΜͲ
    

    View Slide

15. ղܾ͍ͤͨ͞
    

    View Slide

16. Want
    • UIPickerViewͷ୅ସ
    • ͳΔ΂͘؆୯ʹ
    • େྔͷࡏݿΛબ୒͢ΔϢʔβ΋ߟྀ
    

    View Slide

17. Goal
    

    View Slide

18. View Slide

19. Try!
    

    View Slide

20. Animation
    

    View Slide

21. UIPercentDrivenInte
    ractiveTransition
    

    View Slide

22. UIPercentDrivenInteractiveTransition
    • Interactively control view controller
    • Percent Driven
    • update(_:), cancel(), finish()
    • Using gesture recognizger
    $MBTT
    IUUQTEFWFMPQFSBQQMFDPNSFGFSFODFVJLJUVJQFSDFOUESJWFOJOUFSBDUJWFUSBOTJUJPO
    

    View Slide

23. UIViewControllerAni
    matorTransitioning
    

    View Slide

24. UIViewControllerAnimatorTransitioning
    • Custom ViewController Transition
    • Define how animation you want to make
    1SPUPDPM
    

    View Slide

25. Πέϧ
    

    View Slide

26. ΠέφΠ
    

    View Slide

27. Problem
    

    View Slide

28. Problem
    • ࠷ॳ͔Β࠷ޙ·Ͱͷදݱ͔͠Ͱ͖ͳ͍
    • ్தͷUIͷ੍ޚ͕ೖΕΒΕͳ͍
    

    View Slide

29. ❌
    

    View Slide

30. View Slide

31. Implementation
    • Using Container View Controller
    

    View Slide

32. Half
    

    View Slide

33. Implementation
    modalNavigationController.parentNavigationController = navigationController
    navigationController?.si.presentViewController(
    toViewController: modalNavigationController
    )
    • Call Customized Container View Controller
    

    View Slide

34. Implementation
    func presentViewController(toViewController:UIViewController) {
    toViewController.beginAppearanceTransition(true, animated: true)
    ModalAnimator.present(toView: toViewController.view, fromView: parentTargetView)
    { [weak self] in
    guard let strongSelf = self else { return }
    toViewController.endAppearanceTransition()
    toViewController.didMove(toParentViewController: strongSelf.base)
    }
    let tapGestureRecognizer = UITapGestureRecognizer(target: base, action:
    #selector(UINavigationController.overlayViewDidTap(gestureRecognizer:)))
    let overlayView = ModalAnimator.overlayView(fromView: parentTargetView)
    overlayView!.addGestureRecognizer(tapGestureRecognizer)
    }
    

    View Slide

35. Implementation
    func presentViewController(toViewController:UIViewController) {
    toViewController.beginAppearanceTransition(true, animated: true)
    ModalAnimator.present(toView: toViewController.view, fromView: parentTargetView)
    { [weak self] in
    guard let strongSelf = self else { return }
    toViewController.endAppearanceTransition()
    toViewController.didMove(toParentViewController: strongSelf.base)
    }
    let tapGestureRecognizer = UITapGestureRecognizer(target: base, action:
    #selector(UINavigationController.overlayViewDidTap(gestureRecognizer:)))
    let overlayView = ModalAnimator.overlayView(fromView: parentTargetView)
    overlayView!.addGestureRecognizer(tapGestureRecognizer)
    }
    ൒෼͚ͩදࣔ͢ΔΞχϝʔγϣϯ
    

    View Slide

36. Transition
    Background
    option
    

    View Slide

37. Implementation
    public class ShariNavigationController: UINavigationController {
    func handlePanGesture(gestureRecognizer: UIPanGestureRecognizer) {
    (..snip..)
    case .changed:
    var frame = view.frame
    frame.origin.y += degreeY
    frame.size.height += -degreeY
    view.frame = frame
    ModalAnimator.transitionBackgroundView(
    overlayView: backgroundView, location: location)
    (..snip..)
    • Get frame using UIPanGestureRecognizer
    

    View Slide

38. Implementation
    public class func transitionBackgroundView(overlayView: UIView, location:CGPoint) {
    let screenShotView = ModalAnimator.screenShotView(overlayView: overlayView)
    let scale = self.map(
    value: location.y, inMin: 0, inMax: UIScreen.main.bounds.height, outMin: 0.9, outMax: 1.0)
    let transform = CATransform3DMakeScale(scale, scale, 1)
    screenShotView.layer.removeAllAnimations()
    screenShotView.layer.transform = transform
    screenShotView.layoutIfNeeded()
    }
    • Transition in real time
    5SBOTGFSBNPVOUPGNPWFNFOU
    (FU*NBHF
    

    View Slide

39. View Slide

40. Conclusion
    

    View Slide

41. Conclusion
    • ؆୯ʂʁ
    • ঢ়گΛ఻͑ͯϑΟʔυόοΫΛఏڙͰ͖Δ
    • ίϯςΩετΛҡ࣋Ͱ͖Δ
    • ϛεΛࣄલʹ๷͛Δ
    

    View Slide

42. Conclusion
    • minneͷσβΠϯίϯϙʔωϯτͷҰͭ
    • Χʔτ - ࡏݿมߋ
    • ചΕͨ΋ͷ - ߜΓࠐΈ
    • ࡞඼ը໘ - Φϓγϣϯબ୒
    

    View Slide

43. Shari
    

    View Slide

44. Thanks.
    
    

    View Slide