LottieAnimation with DataBinding potatotips #55 2018/10/09 (Tue) @konifar Kyash Inc.

Kyash + Google Pay

Kyash loves DataBinding ❤ • We are using DataBinding a lot.
 Kyash͸DataBindingΊͬͪΌ࢖ͬͯΔ • Applying not only variables but also events like click and scroll.
 ม਺͚ͩͰ͸ͳ͘ɺΫϦοΫ΍εΫϩʔϧͱ͍ͬͨΠϕϯτ΋ద༻ͯ͠Δ

Custom BindingAdapter rocks! • Of course we are using Custom Binding Adapters.
 ΋ͪΖΜCustom BindingAdapter΋࢖ͬͯΔ • Today I’d like to introduce Adapter example called LottieAnimationViewExt.kt in Kyash app.
 ࠓ೔͸ศརͳKyashΞϓϦͰ࢖͍ͬͯΔLottieAnimationViewExt.kt ͱ͍͏ AdaptersΛ঺հ͢Δ

39 Animation in Kyash History tab • When the user receives 39 Yen (similar pronunciation “Thank you” in Japanese), Fireworks Lottie Animation plays.
 Ϣʔβʔ͕39ԁΛड͚औͬͨ࣌ɺLottieՖՐͷΞχϝʔγϣϯ͕࠶ੜ͞ΕΔ

Layout xml

Layout xml • custom_lottie_autoPlay
 If it’s true, the animation plays automatically when the view is shown.
 trueͩͬͨΒView͕දࣔ͞Εͨ࣌ʹࣗಈతʹ࠶ੜ͞ΕΔ • custom_lottie_fileName
 lottie animation json file path.
 lottieΞχϝʔγϣϯͷjsonϑΝΠϧͷpath

Layout xml • animation39FileName = "lottie/Timeline39Animation.json" • main
 |— assets
 |— lottie
 |— Timeline39Animation.json

LottieAnimationViewExt.kt @BindingAdapter( value = [
 "custom_lottie_fileName", 
 "custom_lottie_autoPlay", 
 "custom_lottie_onAnimationEnd"
 ], requireAll = false ) fun LottieAnimationView.setAnimation(
 jsonPath: String?, 
 autoStart: Boolean?, 
 animationListener: SimpleAnimatorListener?
 ) { … } interface SimpleAnimatorListener { fun onAnimationEnd() }

LottieAnimationViewExt.kt @BindingAdapter( value = [
 "custom_lottie_fileName", 
 "custom_lottie_autoPlay", 
 "custom_lottie_onAnimationEnd"
 ], requireAll = false ) fun LottieAnimationView.setAnimation(
 jsonPath: String?, 
 autoStart: Boolean?, 
 animationListener: SimpleAnimatorListener?
 ) { … } interface SimpleAnimatorListener { fun onAnimationEnd() } Custom Attributes

LottieAnimationViewExt.kt @BindingAdapter( value = [
 "custom_lottie_fileName", 
 "custom_lottie_autoPlay", 
 "custom_lottie_onAnimationEnd"
 ], requireAll = false ) fun LottieAnimationView.setAnimation(
 jsonPath: String?, 
 autoStart: Boolean?, 
 animationListener: SimpleAnimatorListener?
 ) { … } interface SimpleAnimatorListener { fun onAnimationEnd() } If not required all, it’s okay to make Parameters Nullable.

LottieAnimationViewExt.kt @BindingAdapter( value = [
 "custom_lottie_fileName", 
 "custom_lottie_autoPlay", 
 "custom_lottie_onAnimationEnd"
 ], requireAll = false ) fun LottieAnimationView.setAnimation(
 jsonPath: String?, 
 autoStart: Boolean?, 
 animationListener: SimpleAnimatorListener?
 ) { … } interface SimpleAnimatorListener { fun onAnimationEnd() } nullable

LottieAnimationViewExt.kt fun LottieAnimationView.setAnimation( jsonPath: String?, autoStart: Boolean?, animationListener: SimpleAnimatorListener?) { if (autoStart == true && visibility == View.GONE) return if (jsonPath != null) setAnimation(jsonPath) if (animationListener != null) { addAnimatorListener(object : Animator.AnimatorListener { … override fun onAnimationEnd(animation: Animator?) { animationListener.onAnimationEnd() } … }) } if (autoStart != null && autoStart) playAnimation() } interface SimpleAnimatorListener { fun onAnimationEnd() }

LottieAnimationViewExt.kt fun LottieAnimationView.setAnimation( jsonPath: String?, autoStart: Boolean?, animationListener: SimpleAnimatorListener?) { if (autoStart == true && visibility == View.GONE) return if (jsonPath != null) setAnimation(jsonPath) if (animationListener != null) { addAnimatorListener(object : Animator.AnimatorListener { … override fun onAnimationEnd(animation: Animator?) { animationListener.onAnimationEnd() } … }) } if (autoStart != null && autoStart) playAnimation() } interface SimpleAnimatorListener { fun onAnimationEnd() }

LottieAnimationViewExt.kt fun LottieAnimationView.setAnimation( jsonPath: String?, autoStart: Boolean?, animationListener: SimpleAnimatorListener?) { if (autoStart == true && visibility == View.GONE) return if (jsonPath != null) setAnimation(jsonPath) if (animationListener != null) { addAnimatorListener(object : Animator.AnimatorListener { … override fun onAnimationEnd(animation: Animator?) { animationListener.onAnimationEnd() } … }) } if (autoStart != null && autoStart) playAnimation() } interface SimpleAnimatorListener { fun onAnimationEnd() }

LottieAnimationViewExt.kt fun LottieAnimationView.setAnimation( jsonPath: String?, autoStart: Boolean?, animationListener: SimpleAnimatorListener?) { if (autoStart == true && visibility == View.GONE) return if (jsonPath != null) setAnimation(jsonPath) if (animationListener != null) { addAnimatorListener(object : Animator.AnimatorListener { … override fun onAnimationEnd(animation: Animator?) { animationListener.onAnimationEnd() } … }) } if (autoStart != null && autoStart) playAnimation() } interface SimpleAnimatorListener { fun onAnimationEnd() }

LottieAnimationViewExt.kt fun LottieAnimationView.setAnimation( jsonPath: String?, autoStart: Boolean?, animationListener: SimpleAnimatorListener?) { if (autoStart == true && visibility == View.GONE) return if (jsonPath != null) setAnimation(jsonPath) if (animationListener != null) { addAnimatorListener(object : Animator.AnimatorListener { … override fun onAnimationEnd(animation: Animator?) { animationListener.onAnimationEnd() } … }) } if (autoStart != null && autoStart) playAnimation() } interface SimpleAnimatorListener { fun onAnimationEnd() }

That’s it! Super simple.

Custom BindingAdapter rocks! • It makes ViewModel simple and easy to test.
 ViewModel͕γϯϓϧʹͳΓɺςετ΋ॻ͖΍͘͢ͳΔ • Maybe it’s easier to create BindingAdapter than you expected. Let’s try!
 ͨͿΜ૝૾ΑΓ؆୯͔ͩΒ࡞ͬͯΈͯ͸ʁ
 


Thanks!