Kyashで使っているTutorial Library / Tutorial Library in Kyash
by
konifar
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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. ςΩετ෦ͷΞχϝʔγϣϯ • interpolatordurationΛηοτͰ͖Δɻ • ࠓ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. ϨΠΞτͷࣗ༝ ͕ڧΈ
Slide 18
Slide 18 text
͠ཁ݅ʹ߹͑ ͬͯΈͯͶ ߹Θͳ͚Είʔυݟͯ ਅࣅ͢Δͱ͍͍͔
Slide 19
Slide 19 text
͋Γ͕ͱ͏͍͟͝·ͨ͠ https://github.com/Kyash/ android-target-instructions