Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
よしなに頑張る画像ロードの話 / image load mettya tsurai
Search
Yoshihiro WADA
June 18, 2019
Programming
2
430
よしなに頑張る画像ロードの話 / image load mettya tsurai
2019/06/18に開催されたPotatotips #62にて発表したスライドです
Yoshihiro WADA
June 18, 2019
Tweet
Share
More Decks by Yoshihiro WADA
See All by Yoshihiro WADA
Gradleの実行環境設定を見直す
e10dokup
0
550
Firebase App Distributionのテストアプリ配信を試しやすくする
e10dokup
0
420
アプリに署名する 〜GitHub ActionsでのCIも見据えて〜
e10dokup
0
940
Profileable buildでより正確なパフォーマンスを掴む
e10dokup
0
660
[DroidKaigi 2021] メディアアクセス古今東西 / Now and Future of Media Access
e10dokup
0
2.9k
今更「dp」を考える / Let's think about "dp" now
e10dokup
0
5k
1から学ぶAndroidアプリデバッグ - アプリの動作を追いかけよう / Learn Android application debugging from the scratch - track apps' behaviors
e10dokup
10
3k
Guide to background processingを読んでみる / Reading "Guide to background processing"
e10dokup
0
230
WorkManager Stableに向けての所感
e10dokup
2
420
Other Decks in Programming
See All in Programming
유연한 Composable 설계
l2hyunwoo
0
380
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
CSC307 Lecture 10
javiergs
PRO
0
310
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 06
javiergs
PRO
0
360
Featured
See All Featured
The Mythical Team-Month
searls
217
43k
Typedesign – Prime Four
hannesfritz
37
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
How to name files
jennybc
67
96k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
KATA
mclloyd
20
13k
A designer walks into a library…
pauljervisheath
201
24k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Designing Experiences People Love
moore
136
23k
Thoughts on Productivity
jonyablonski
64
4.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Transcript
Yoshihiro Wada a.k.a. @e10dokup Potatotips #62 - 2019/06/18
Yoshihiro Wada a.k.a. @e10dokup CyberAgant Inc. / Ameba Ameba
None
1 URL 2 3 3.5
bumptech/glide square/picasso Image Loading Library bumptech/glide 4.9.0 ConstraintLayout
1 URL
GlideApp.with(this) .load(/* Image URL */) .placeholder(/* Placeholder Drawable */) .error(/*
Error Drawable */) .into(/* Target ImageView */)
2
ConstraintLayout XML ImageView <ImageView android:id=“@+id/image_view” android:layout_width="0dp" android:layout_height=“0dp” app:layout_constraintDimensionRatio="H,3:2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf=“parent" />
centerCrop GlideApp.with(this) .load(/* Image URL */) .placeholder(/* Placeholder Drawable */)
.error(/* Error Drawable */) .centerCrop() .into(/* Target ImageView */)
XML BindingAdapter <ImageView android:id=“@+id/image_view” android:layout_width="0dp" android:layout_height=“0dp” app:layout_constraintDimensionRatio="H,3:2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf=“parent”
app:url=“@{imageUrl}” />
BindingAdapter BindingAdapter @BindingAdapter(“url") internal fun ImageView.loadImage(url: String?) { if (url
== null) { setImageDrawable(null) return } GlideApp .with(this) .load(url) .centerCrop() .into(this) }
3
DimensionRatio
API URL BindingAdapter DimensionRatio 3 <ImageView android:id=“@+id/image_view” android:layout_width="0dp" android:layout_height=“0dp” app:width=“@{imageWidth}”
app:height=“@{imageHeight}” app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf=“parent” app:url=“@{imageUrl}” />
width/height dimensionRatio BindingAdapter layout_constraintDimensionRatio ConstraintLayout BindingAdapter 3 @BindingAdapter(“width”, “height”) internal
fun ImageView.setAspectRatio(width: Int, height: Int) { (layoutParams as ConstraintLayout.LayoutParams).dimensionRatio = “h,${width}:${height}” }
glide RequestListener Drawable requestLayout() onMeasure() 3.5
3.5 override fun onResourceReady( resource: Drawable?, model: Any?, target: Target<Drawable>?,
dataSource: DataSource?, isFirstResource: Boolean ): Boolean { resource ?: return false val width = resource.intrinsicWidth.toFloat() val height = resource.intrinsicHeight.toFloat() aspectRatio = width / height requestLayout() return false }
3.5 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { aspectRatio?.let {
// ݱঢ়ͷԣ෯Λऔಘ͠ɺ৽نʹΞεϖΫτൺΛөͨ͠αΠζʹΓସ͑Δ val width = MeasureSpec.getSize(widthMeasureSpec) val w = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY) val h = MeasureSpec .makeMeasureSpec((width / it).toInt(), MeasureSpec.EXACTLY) super.onMeasure(w, h) return } super.onMeasure(widthMeasureSpec, heightMeasureSpec) }
4
*NBHF7JFX *NBHF7JFX *NBHF7JFX
Load Bitmap Glide CenterCrop() Transformation Transformation 4:2 2 ->
-> Transformation
• override fun updateDiskCacheKey(messageDigest: MessageDigest) equals() / hashCode() • override
fun transform( pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int ): Bitmap toTransform Bitmap BitmapTransformation
override fun transform( pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight:
Int ): Bitmap { val width = toTransform.width val height = toTransform.height aspectRatio = width / height return when { aspectRatio >= 2 -> // 2:5 ΑΓԣ cropWidth(pool, toTransform, imageWidth, imageHeight) else -> // ͦΕҎ֎ͷͱ͖ɺͦͷ··BitmapΛฦ٫ toTransform } }
private fun transform( pool: BitmapPool, toTransform: Bitmap, width: Int, height:
Int ): Bitmap { val croppedWidth = (width * 0.5).toInt() return TransformationUtils.centerCrop( pool, toTransform, trimmedWidth, height ) }
None
:pray: