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
510
よしなに頑張る画像ロードの話 / 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
AndroidデバイスにFTPサーバを建立する
e10dokup
0
440
Gradleの実行環境設定を見直す
e10dokup
0
1.1k
Firebase App Distributionのテストアプリ配信を試しやすくする
e10dokup
0
640
アプリに署名する 〜GitHub ActionsでのCIも見据えて〜
e10dokup
0
1.2k
Profileable buildでより正確なパフォーマンスを掴む
e10dokup
0
750
[DroidKaigi 2021] メディアアクセス古今東西 / Now and Future of Media Access
e10dokup
0
3.7k
今更「dp」を考える / Let's think about "dp" now
e10dokup
0
5.7k
1から学ぶAndroidアプリデバッグ - アプリの動作を追いかけよう / Learn Android application debugging from the scratch - track apps' behaviors
e10dokup
10
3.3k
Guide to background processingを読んでみる / Reading "Guide to background processing"
e10dokup
0
260
Other Decks in Programming
See All in Programming
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
730
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
380
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
390
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.8k
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
Flutterと Vibe Coding で個人開発!
hyshu
1
230
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
110
ワープロって実は計算機で
pepepper
1
270
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimizing for Happiness
mojombo
379
70k
How to Ace a Technical Interview
jacobian
278
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Code Review Best Practice
trishagee
69
19k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
614
210k
Into the Great Unknown - MozCon
thekraken
40
2k
Raft: Consensus for Rubyists
vanstee
140
7k
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: