Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shari

nakajijapan
February 08, 2017

 Shari

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

nakajijapan

February 08, 2017
Tweet

More Decks by nakajijapan

Other Decks in Technology

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