Glide 4 with Kotlin

Glide 4 with Kotlin

D8281434c0409ba2051cd3f7590e4c2f?s=128

Hiroyuki Kusu

April 19, 2018
Tweet

Transcript

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

  2. None
  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) #BTJD6TBHF (MJEF"QQ͸BOOPUBUJPOQSPDFTTPSͰੜ͑Δ
  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) (MJEF0QUJPOͰఆٛͨ͠Φϓγϣϯͷར༻ 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() ) ) } } શը૾ϦΫΤετʹϑΣʔυΛద༻͔ͭରࡦίʔυΛಋೖ ϓϨʔεϗϧμͱϑΣʔυΛಉ࣌ʹద༻͢Δ ͱϓϨʔεϗϧμ͕ফ͑ͳ͍໰୊