Glide 4 with Kotlin

Transcript

1. Glide 4 with Kotlin Hiroyuki Kusu (@hkusu_) 2018/4/19 potatotips #50
3. Image loading library for Android Vector ܗࣜͷը૾΋औΓѻ͑Δ
4. ࿩͞ͳ͍͜ͱ Glide 4 ͷಋೖํ๏ Glide 3 ͔Β 4 ΁ͷҠߦͷํ๏ ύϑΥʔϚϯεɾΩϟογϡઓུͳͲ
5. Glide Module @GlideModule class MyGlideModule : AppGlideModule() { override fun applyOptions(context: Context, builder: GlideBuilder) { // GlideશମͷઃఆΛهड़ } override fun registerComponents(context: Context, glide: Glide, registry: Registry) { // Component(ྫ:OkHttpμ΢ϯϩʔυ)ͷઃఆ΍ొ࿥ͳͲΛهड़ } } GlideApp.with(context) .load(url) .into(imageView) #BTJD
   6TBHF (MJEF"QQ
   ͸
   BOOPUBUJPO
   QSPDFTTPS
   Ͱੜ͑Δ
6. Transformation • ԁܗΫϩοϓɾؙ֯͸ Glide 4 Ͱ͸ඪ४Ͱ༻ҙ͞Ε͍ͯΔ • ෳ਺ͷ Transformation Λಉ࣌ʹద༻͢Δ͜ͱ΋Մ GlideApp.with(context) .load(url) .transforms( CenterCrop(), RoundedCorners( resources.getDimensionPixelSize(R.dimen.something_radius) ) ) .into(imageView)
7. Glide Transformations #SJHIUOFTT'JMUFS #MVS
8. Transition // ϑΣʔυ .transition(DrawableTransitionOptions.withCrossFade()) // Ξχϝʔγϣϯ .transition(DrawableTransitionOptions().transition { view -> view.scaleX = 0F view.scaleY = 0F view.animate() .scaleX(1.0f) .scaleY(1.0f) .setDuration(300) .setInterpolator(FastOutSlowInInterpolator()) }) // or .transition(DrawableTransitionOptions().transition(R.anim.show)) Glide 4 ͸ Glide 3 ͱҧ͍ɺσϑΥϧτͰ͸ϑΣʔυͳ͠ͳͷͰ஫ҙ
9. Glide Option (in Glide Extension) @GlideExtension object GlideExtension { @GlideOption @JvmStatic @NonNull fun roundedCornersCrop( options: RequestOptions, context: Context ): RequestOptions { val radius = context .resources .getDimensionPixelSize(R.dimen.something_radius) return options.transforms(CenterCrop(), RoundedCorners(radius)) } } Glide Extension ͸ Java Ͱ͸ Public ίϯελϥΫλͳ͠ˍΦϓγϣϯ ͸ฦΓ஋͕NonNull ͳ static ϝιουͰ࡞੒͢Δඞཁ͕͋Δ ˡ
   ୈҰҾ਺ 3FRVFTU0QUJPOT ͸ඞͣඞཁ Α͘࢖͏ΦϓγϣϯΛఆٛͯ͠࠶ར༻
10. GlideApp.with(context) .load(url) .roundedCornersCrop(context) .into(imageView) (MJEF
    0QUJPO
    Ͱఆٛͨ͠Φϓγϣϯͷར༻ annotation processor Ͱϝιου͕ੜ͑ͯΔ
11. @GlideExtension object GlideExtension { @GlideOption @JvmStatic @NonNull fun override( options: RequestOptions, layoutParams: ViewGroup.LayoutParams ): RequestOptions { val width = layoutParams.width val height = layoutParams.height return options.override(width, height) } } GlideApp.with(context) .load(url) .override(imageView.layoutParams) .into(imageView)
12. • Transition ΍ αϜωΠϧɾϦεφʔͷઃఆͳͲ͸ Glide Option Ͱఆ ٛͰ͖ͳ͍ • Glide Type ͱͯ͠ఆٛͰ͖Δ੍͕໿͕͋Δ • Ұ౓ͷը૾ಡΈࠐΈͰࢦఆͰ͖Δ Glide Type ͸1ͭͷΈ • Ҿ਺Λ౉͢͜ͱ͕Ͱ͖ͳ͍ • ϦιʔεΞΫηεͷҝͷ Context ΍ઃఆ஋౳͸౉ͨ͘͠ͳΔ
13. Kotlin Extension Functions Λ͔ͭ͏
14. // ϑΣʔυ fun GlideRequest<Drawable>.withCrossFade(duration: Int = 300) = transition(DrawableTransitionOptions.withCrossFade(duration)) // Ξχϝʔγϣϯ fun GlideRequest<Drawable>.withShowAnimation(duration: Long = 300, interpolator: Interpolator = LinearInterpolator()) = transition(DrawableTransitionOptions().transition { view -> view.scaleX = 0F view.scaleY = 0F view.animate() .scaleX(1.0f) .scaleY(1.0f) .setDuration(duration) .setInterpolator(interpolator) }) // ϑΣʔυ GlideApp.with(context) .load(url) .withCrossFade(duration = 600) .into(imageView) // Ξχϝʔγϣϯ GlideApp.with(context) .load(url) .withShowAnimation(interpolator = FastOutSlowInInterpolator()) .into(imageView)
15. ࢀߟϦϯΫ Glide 4 ͷಋೖํ๏ GitHub ϦϙδτϦ https://github.com/bumptech/glide ެࣜυΩϡϝϯτ https://bumptech.github.io/glide/ Glide 3 ͔Β 4 ΁ͷҠߦͷํ๏ Migrate Glide v3 to v4 (Qiita) https://qiita.com/ronnnnn/items/9d82130985b5f1f6b77e Migrating from v3 to v4 (ެࣜυΩϡϝϯτ) https://bumptech.github.io/glide/doc/migrating.html
16. Thank you ! @hkusu_
17. ิ଍εϥΠυ
18. GlideApp.with(context) .load(url) .circleCrop() .into(imageView)
19. GlideApp.with(context) .load(url) .transform( RoundedCorners( resources.getDimensionPixelSize(R.dimen.something_radius) ) ) .into(imageView) ̐ͭͷ֯ʹର͢Δؙ֯ͷద༻Λݸผʹ੍ޚ(ྫ:ӈ্ͷΈؙ֯)͢Δ৔߹ ͸ Glide Transformations ͷ RoundedCornersTransformation Λར༻
20. ϓϨʔεϗϧμͱϑΣʔυΛಉ࣌ʹద༻͢Δ ͱϓϨʔεϗϧμ͕ফ͑ͳ͍໰୊ .transition(DrawableTransitionOptions.withCrossFade()) .transition( DrawableTransitionOptions() .crossFade( DrawableCrossFadeFactory .Builder() .setCrossFadeEnabled(true) .build() ) ) ରࡦ
21. @GlideModule class GlideModule : AppGlideModule() { override fun applyOptions(context: Context, builder: GlideBuilder) { builder.setDefaultTransitionOptions( Drawable::class.java, DrawableTransitionOptions() .crossFade( DrawableCrossFadeFactory .Builder() .setCrossFadeEnabled(true) .build() ) ) } } શը૾ϦΫΤετʹϑΣʔυΛద༻
    ͔ͭ
    ରࡦίʔυΛಋೖ ϓϨʔεϗϧμͱϑΣʔυΛಉ࣌ʹద༻͢Δ ͱϓϨʔεϗϧμ͕ফ͑ͳ͍໰୊