MotionLayoutを使ってクリスマスなアプリを作った

社内勉強会 #深いい勉強会 の資料です

Github
https://github.com/akihito-okada/ChristmasToy

qiita
https://qiita.com/akihito-okada/items/4f35e63dbd28cd7afe4c

Transcript

1. MotionLayoutΛ࢖ͬͯ ΫϦεϚεͳΞϓϦΛͭͬͨ͘
2. Merry Christmas
3. Young @nana music Android Engineer
4. Amazon Music Player
6. ͜ΕΛMotion LayoutͰͭ͘Δ
7. Motion Layout ʁ • Google I/O 2018Ͱൃද͞Εͨ • MotionLayout͸ConstraintLayout 2.0ʹؚ·Ε͍ͯΔ • ·ͩalpha൛ • ϢʔβʔͷΠϯλϥΫγϣϯ౳ʹԠͯ͡ɺগͳ͍ιʔε ίʔυͰɺ͵Δ͵ΔͳΞχϝʔγϣϯΛඳըͰ͖Δ
9. ࠓճͭͬͨ͘΋ͷ
11. λονΠϕϯτͷ੍ޚ
12. TouchEventͷྖҬ • MotionLayoutͷྖҬશମ(྘৭ͷྖҬ)Ͱυ ϥοάૢ࡞͕༗ޮʹͳΔͨΊɺޙΖͷView ʹΠϕϯτ͕౉Βͳ͍ • ྖҬΛখ͘͢͞ΔͱྖҬ͔Β͸Έग़ͨ࣌ʹ View͕ݟ੾ΕΔ • ಈతʹྖҬΛมߋ͢ΔͱΞχϝʔγϣϯ͕ յΕΔ • ͱͳ͔͍͚ͩυϥοάૢ࡞Λ༗ޮʹ͍ͨ͠
13. TouchEventͷ఻ൖ ਌ͷϨΠΞ΢τͷλον੍ޚΠϕϯτ ↓ ͱͳ͔͍ͷλονΠϕϯτ ↓ ਌ͷϨΠΞ΢τͷλονΠϕϯτ ↓ എܠͷLayoutͷλονΠϕϯτ ※ ଠઢ͸લޙɺࡉઢ͸ࢠڙΛද͍ͯ͠·͢ എܠͷLayout ਌ͷLayout ͱͳ͔͍ 5PVDI
14. TouchEventͷ఻ൖ എܠͷLayout MotionLayout ͱͳ͔͍ 5PVDI MotionLayoutͷλον੍ޚΠϕϯτ ↓ MotionLayoutͷλονΠϕϯτ ※ ͱͳ͔͍ɾഎܠͷLayoutͷλον Πϕϯτ͸ൃੜ͠ͳ͍
15. override fun onInterceptTouchEvent(ev: MotionEvent): Boolean { return if (isPassTouchEventToChild) { // ࢠͷViewʹΠϕϯτΛྲྀ͢ false } else { // എܠͷϨΠΞ΢τʹΠϕϯτΛྲྀ͢ true } } LayoutͷTouchEventͷ੍ޚ
16. LayoutͷTouchEventͷ੍ޚ ΍Γ͍ͨ͜ͱ 1. ͱͳ͔͍ͷλον Πϕϯτ -> MotionLayoutɾͱͳ͔͍ʹλο νΠϕϯτΛ఻ൖ 2. ͱͳ͔͍Ҏ֎ͷλονΠϕϯτ -> എܠͷϨΠΞ΢τʹλονΠϕϯ τΛ఻ൖ എܠͷLayout MotionLayout ͱͳ͔͍
17. LayoutͷTouchEventͷ੍ޚ എܠͷLayout CustomLayout MotionLayout ͱͳ͔͍ ΍ͬͨ͜ͱ 1. CustomLayoutΛ࡞ͬͯ MotionLayoutΛϥοϓ͢Δ 2. CustomLayoutͷ onInterceptTouchEventΛ੍ޚ ※ CustomViewͱMotionLayout ͷྖҬ͸ಉ͡
18. LayoutͷTouchEventͷ੍ޚ എܠͷLayout CustomLayout MotionLayout ͱͳ͔͍ CustomLayout onInterceptTouchEvent : false ↓ MotionLayoutͷλονΠϕϯτ ※ എܠͷLayoutͷλονΠϕϯτ͸ൃ ੜ͠ͳ͍ 5PVDI
19. LayoutͷTouchEventͷ੍ޚ എܠͷLayout CustomLayout MotionLayout ͱͳ͔͍ CustomLayout onInterceptTouchEvent : true ↓ എܠͷLayoutͷλονΠϕϯτ ※ MotionLayoutͷλονΠϕϯτ͸ൃ ੜ͠ͳ͍ 5PVDI
20. ͱΓ͋͑ͣͰ͖ͨ
21. Github https://github.com/akihito- okada/ChristmasToy qiita https://qiita.com/akihito-okada/ items/4f35e63dbd28cd7afe4c
22. ·ͱΊ • MotionLayoutָ͍͠ • λονΠϕϯτͷ੍ޚ೉͍͠ • ॎԣͳΠϕϯτΛίϯτϩʔϧ͠Α͏ͱ͢Δͱ MotionLayoutͰ͸೉͍͠ • MotionLayoutͷجຊ͔Β֎ΕΔͱ೉͘͠ͳΔ • ͜Ε͔Βػೳ΋૿͍͑ͯ͘ͱࢥ͏ͷͰ௥͍ͬͯ͘
23. ࢀߟ Picture-in-picture video overlay with MotionLayout https://medium.com/vrt-digital-studio/picture-in-picture- video-overlay-with-motionlayout-a9404663b9e7 Android ͷλονΠϕϯτΛཧղ͢Δ(ͦͷ1) http://blog.lciel.jp/blog/2013/12/03/android-touch- event/