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

Potatotips #52

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