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

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