Glide 4 with Kotlin

Transcript

1. Glide 4 with Kotlin
   Hiroyuki Kusu (@hkusu_)
   2018/4/19 potatotips #50
   

   View Slide

2. View Slide

3. Image loading library for Android
   Vector ܗࣜͷը૾΋औΓѻ͑Δ
   

   View Slide

4. ࿩͞ͳ͍͜ͱ
   Glide 4 ͷಋೖํ๏
   Glide 3 ͔Β 4 ΁ͷҠߦͷํ๏
   ύϑΥʔϚϯεɾΩϟογϡઓུͳͲ
   

   View Slide

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)
   #BTJD6TBHF
   (MJEF"QQ͸BOOPUBUJPOQSPDFTTPSͰੜ͑Δ
   

   View Slide

6. Transformation
   • ԁܗΫϩοϓɾؙ֯͸ Glide 4 Ͱ͸ඪ४Ͱ༻ҙ͞Ε͍ͯΔ
   • ෳ਺ͷ Transformation Λಉ࣌ʹద༻͢Δ͜ͱ΋Մ
   GlideApp.with(context)
   .load(url)
   .transforms(
   CenterCrop(),
   RoundedCorners(
   resources.getDimensionPixelSize(R.dimen.something_radius)
   )
   )
   .into(imageView)
   

   View Slide

7. Glide Transformations
   #SJHIUOFTT'JMUFS
   #MVS
   

   View Slide

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 ͱҧ͍ɺσϑΥϧτͰ͸ϑΣʔυͳ͠ͳͷͰ஫ҙ
   

   View Slide

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
   ͸ඞͣඞཁ
   Α͘࢖͏ΦϓγϣϯΛఆٛͯ͠࠶ར༻
   

   View Slide

10. GlideApp.with(context)
    .load(url)
    .roundedCornersCrop(context)
    .into(imageView)
    (MJEF0QUJPOͰఆٛͨ͠Φϓγϣϯͷར༻
    annotation processor Ͱϝιου͕ੜ͑ͯΔ
    

    View Slide

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)
    

    View Slide

12. • Transition ΍ αϜωΠϧɾϦεφʔͷઃఆͳͲ͸ Glide Option Ͱఆ
    ٛͰ͖ͳ͍
    • Glide Type ͱͯ͠ఆٛͰ͖Δ੍͕໿͕͋Δ
    • Ұ౓ͷը૾ಡΈࠐΈͰࢦఆͰ͖Δ Glide Type ͸1ͭͷΈ
    • Ҿ਺Λ౉͢͜ͱ͕Ͱ͖ͳ͍
    • ϦιʔεΞΫηεͷҝͷ Context ΍ઃఆ஋౳͸౉ͨ͘͠ͳΔ
    

    View Slide

13. Kotlin Extension Functions
    Λ͔ͭ͏
    

    View Slide

14. // ϑΣʔυ
    fun GlideRequest.withCrossFade(duration: Int = 300) =
    transition(DrawableTransitionOptions.withCrossFade(duration))
    // Ξχϝʔγϣϯ
    fun GlideRequest.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)
    

    View Slide

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
    

    View Slide

16. Thank you !
    @hkusu_
    

    View Slide

17. ิ଍εϥΠυ
    

    View Slide

18. GlideApp.with(context)
    .load(url)
    .circleCrop()
    .into(imageView)
    

    View Slide

19. GlideApp.with(context)
    .load(url)
    .transform(
    RoundedCorners(
    resources.getDimensionPixelSize(R.dimen.something_radius)
    )
    )
    .into(imageView)
    ̐ͭͷ֯ʹର͢Δؙ֯ͷద༻Λݸผʹ੍ޚ(ྫ:ӈ্ͷΈؙ֯)͢Δ৔߹
    ͸ Glide Transformations ͷ RoundedCornersTransformation Λར༻
    

    View Slide

20. ϓϨʔεϗϧμͱϑΣʔυΛಉ࣌ʹద༻͢Δ
    ͱϓϨʔεϗϧμ͕ফ͑ͳ͍໰୊
    .transition(DrawableTransitionOptions.withCrossFade())
    .transition(
    DrawableTransitionOptions()
    .crossFade(
    DrawableCrossFadeFactory
    .Builder()
    .setCrossFadeEnabled(true)
    .build()
    )
    )
    ରࡦ
    

    View Slide

21. @GlideModule
    class GlideModule : AppGlideModule() {
    override fun applyOptions(context: Context, builder: GlideBuilder) {
    builder.setDefaultTransitionOptions(
    Drawable::class.java,
    DrawableTransitionOptions()
    .crossFade(
    DrawableCrossFadeFactory
    .Builder()
    .setCrossFadeEnabled(true)
    .build()
    )
    )
    }
    }
    શը૾ϦΫΤετʹϑΣʔυΛద༻͔ͭରࡦίʔυΛಋೖ
    ϓϨʔεϗϧμͱϑΣʔυΛಉ࣌ʹద༻͢Δ
    ͱϓϨʔεϗϧμ͕ফ͑ͳ͍໰୊
    

    View Slide