$30 off During Our Annual Pro Sale. View Details »

Kyashで使っているTutorial Library / Tutorial Library in Kyash

konifar
June 21, 2018

Kyashで使っているTutorial Library / Tutorial Library in Kyash

Potatotips #52

konifar

June 21, 2018
Tweet

More Decks by konifar

Other Decks in Programming

Transcript

  1. KyashͰ࢖͍ͬͯΔ
    Tutorial Library
    Potatotips #52
    @konifar

    View Slide

  2. ViewΛϋΠϥΠτͯ͠
    ʮ͜ͷϘλϯ͸͜͏࢖͏ΜͩΑʯ
    Έ͍ͨʹઆ໌͢ΔΞϨͷ࿩Ͱ͢

    View Slide

  3. 1 2 3

    View Slide

  4. Similar libraries
    • https://github.com/TakuSemba/Spotlight
    • https://github.com/itzikBraun/TutorialView
    • https://github.com/sjwall/
    MaterialTapTargetPrompt
    • https://github.com/Popalay/Tutors

    View Slide

  5. ͳͥࣗ෼Ͱ࡞Δ͜ͱʹ͔ͨ͠
    1. ϋΠϥΠτ෦෼͕˘͔̋ͷ΋ͷ͔͠ͳ͍
    • ؙ֯ʹ΋ରԠ͔ͨͬͨ͠
    2. ϋΠϥΠτ෦෼ͷΞχϝʔγϣϯ͔͠ରԠ͍ͯ͠ͳ͍
    • ຊ౰ʹॏཁͳͷ͸ςΩετͳͷͰςΩετΛಈ͔͍ͨ͠
    3. ςΩετ෦෼ͷϨΠΞ΢τΛΧελϚΠζ͠ʹ͍͘
    • ਧ͖ग़͠ͳͲϨΠΞ΢τΛࣗ༝ʹηοτ͍ͨ͠

    View Slide

  6. https://github.com/Kyash/
    android-target-instructions

    View Slide

  7. How it works
    • ϋΠϥΠτ͍ͨ͠෦෼Λ”Target”ͱ͍͏୯ҐͰଊ͑ͯTargetΠϯελϯεΛ࡞Δɻ
    SimpleTargetͱ͍͏Ϋϥε͕༻ҙ͞Ε͍ͯΔ͕ɺࣗ෼ͰΧελϜͰ࡞Δ͜ͱ΋Ͱ͖Δɻ
    • ࡞ͬͨTargetΛTargetInstructionsʹηοτͯ͠start()ϝιουΛݺͿͱදࣔ͞ΕΔɻ

    View Slide

  8. 1. ϋΠϥΠτ෦෼ͷܗ
    Square Circle

    View Slide

  9. 1. ϋΠϥΠτ෦෼ͷܗ
    • highlightRadiusͷ஋Ληοτ͢Δɻ
    • Կ΋ηοτ͠ͳ͚Ε͹squareɺେ͖͍஋Ληοτ͢Ε͹circleʹͳΔ

    View Slide

  10. 2. ςΩετ෦෼ͷΞχϝʔγϣϯ
    Overshoot LinearOutSlowIn

    View Slide

  11. 2. ςΩετ෦෼ͷΞχϝʔγϣϯ
    • interpolator΍durationΛηοτͰ͖Δɻ
    • ࠓ͸scaleΞχϝʔγϣϯͷΈ͕ͩɺfade΋͋ͬͯ΋͍͍͔΋ɻ

    View Slide

  12. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    Default Custom

    View Slide

  13. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    ҎԼͷidΛ࣋ͬͨϨΠΞ΢τΛ࡞Δ
    • @id/top_caret
    • @id/message
    • @id/title
    • @id/description
    • @id/bottom_caret

    View Slide

  14. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    • setMessageLayoutResId() Ͱ࡞ͬͨϨΠΞ΢τΛηοτ͢Δ͚ͩɻ
    • ϨΠΞ΢τΛؙ͝ͱ੾Γସ͑ΒΕΔͷͰɺςΩετ΍എܠͷ৭ɺܗɺਧ͖ग़
    ͠ͷ༗ແͳͲࣗ༝ʹΧελϚΠζͰ͖Δɻ

    View Slide

  15. ·ͱΊ

    View Slide

  16. Tutorial Library͸
    ͨ͘͞Μ͋Δ͚Ͳ
    ͲΕ΋ΘΓͱบ͕͋Δ

    View Slide

  17. KyashͷLibrary͸
    1. ؙ֯ରԠͷϋΠϥΠτ
    2. ςΩετΞχϝʔγϣϯ
    3. ϨΠΞ΢τͷࣗ༝౓
    ͕ڧΈ

    View Slide

  18. ΋͠ཁ݅ʹ߹͑͹
    ࢖ͬͯΈͯͶ
    ߹Θͳ͚Ε͹ίʔυݟͯ
    ਅࣅ͢Δͱ͍͍͔΋

    View Slide

  19. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    https://github.com/Kyash/
    android-target-instructions

    View Slide