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

by konifar

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1 2 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

·ͱΊ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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