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

35e08efcf39d692f540047fb756eb4e3?s=47 konifar
June 21, 2018

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

Potatotips #52

35e08efcf39d692f540047fb756eb4e3?s=128

konifar

June 21, 2018
Tweet

Transcript

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

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

  3. 1 2 3

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

    https://github.com/Popalay/Tutors
  5. ͳͥࣗ෼Ͱ࡞Δ͜ͱʹ͔ͨ͠ 1. ϋΠϥΠτ෦෼͕˘͔̋ͷ΋ͷ͔͠ͳ͍ • ؙ֯ʹ΋ରԠ͔ͨͬͨ͠ 2. ϋΠϥΠτ෦෼ͷΞχϝʔγϣϯ͔͠ରԠ͍ͯ͠ͳ͍ • ຊ౰ʹॏཁͳͷ͸ςΩετͳͷͰςΩετΛಈ͔͍ͨ͠ 3.

    ςΩετ෦෼ͷϨΠΞ΢τΛΧελϚΠζ͠ʹ͍͘ • ਧ͖ग़͠ͳͲϨΠΞ΢τΛࣗ༝ʹηοτ͍ͨ͠
  6. https://github.com/Kyash/ android-target-instructions

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

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

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

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

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

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

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

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

  15. ·ͱΊ

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

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

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

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