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

No content

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

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

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Ͱੜ͑Δ

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

Glide Transformations #SJHIUOFTT'JMUFS #MVS

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

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

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

@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)

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

Kotlin Extension Functions Λ͔ͭ͏

// ϑΣʔυ 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)

ࢀߟϦϯΫ 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

Thank you ! @hkusu_

ิ଍εϥΠυ

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

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

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

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