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
460
よしなに頑張る画像ロードの話 / 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
700
Firebase App Distributionのテストアプリ配信を試しやすくする
e10dokup
0
490
アプリに署名する 〜GitHub ActionsでのCIも見据えて〜
e10dokup
0
1k
Profileable buildでより正確なパフォーマンスを掴む
e10dokup
0
670
[DroidKaigi 2021] メディアアクセス古今東西 / Now and Future of Media Access
e10dokup
0
3.2k
今更「dp」を考える / Let's think about "dp" now
e10dokup
0
5.3k
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
250
WorkManager Stableに向けての所感
e10dokup
2
420
Other Decks in Programming
See All in Programming
Synchronizationを支える技術
s_shimotori
1
150
CSC509 Lecture 08
javiergs
PRO
0
110
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Server Driven Compose With Firebase
skydoves
0
400
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
31
1.5k
Scaling GitHub
holman
458
140k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Fireside Chat
paigeccino
32
3k
Code Review Best Practice
trishagee
64
17k
Speed Design
sergeychernyshev
24
570
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Language of Interfaces
destraynor
154
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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: