Upgrade to Pro — share decks privately, control downloads, hide ads and more …

よしなに頑張る画像ロードの話 / image load mettya tsurai

よしなに頑張る画像ロードの話 / image load mettya tsurai

2019/06/18に開催されたPotatotips #62にて発表したスライドです

Yoshihiro WADA

June 18, 2019
Tweet

More Decks by Yoshihiro WADA

Other Decks in Programming

Transcript

  1. Yoshihiro Wada a.k.a. @e10dokup
    Potatotips #62 - 2019/06/18

    View full-size slide

  2. Yoshihiro Wada a.k.a. @e10dokup
    CyberAgant Inc. / Ameba
    Ameba

    View full-size slide

  3. bumptech/glide square/picasso Image Loading Library
    bumptech/glide 4.9.0
    ConstraintLayout

    View full-size slide

  4. GlideApp.with(this)
    .load(/* Image URL */)
    .placeholder(/* Placeholder Drawable */)
    .error(/* Error Drawable */)
    .into(/* Target ImageView */)

    View full-size slide

  5. ConstraintLayout
    XML 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" />

    View full-size slide

  6. centerCrop
    GlideApp.with(this)
    .load(/* Image URL */)
    .placeholder(/* Placeholder Drawable */)
    .error(/* Error Drawable */)
    .centerCrop()
    .into(/* Target ImageView */)

    View full-size slide

  7. XML
    BindingAdapter
    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}” />

    View full-size slide

  8. BindingAdapter
    BindingAdapter
    @BindingAdapter(“url")
    internal fun ImageView.loadImage(url: String?) {
    if (url == null) {
    setImageDrawable(null)
    return
    }
    GlideApp
    .with(this)
    .load(url)
    .centerCrop()
    .into(this)
    }

    View full-size slide

  9. DimensionRatio

    View full-size slide

  10. API URL
    BindingAdapter DimensionRatio
    3
    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}” />

    View full-size slide

  11. 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}”
    }

    View full-size slide

  12. glide RequestListener Drawable
    requestLayout() onMeasure()
    3.5

    View full-size slide

  13. 3.5
    override fun onResourceReady(
    resource: Drawable?,
    model: Any?,
    target: Target?,
    dataSource: DataSource?,
    isFirstResource: Boolean
    ): Boolean {
    resource ?: return false
    val width = resource.intrinsicWidth.toFloat()
    val height = resource.intrinsicHeight.toFloat()
    aspectRatio = width / height
    requestLayout()
    return false
    }

    View full-size slide

  14. 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)
    }

    View full-size slide



  15. *NBHF7JFX


    *NBHF7JFX


    *NBHF7JFX

    View full-size slide

  16. Load Bitmap
    Glide CenterCrop() Transformation
    Transformation
    4:2 2 

    ->
    ->
    Transformation

    View full-size slide

  17. • override fun updateDiskCacheKey(messageDigest: MessageDigest)
    equals() / hashCode()
    • override fun transform(

    pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int

    ): Bitmap
    toTransform Bitmap
    BitmapTransformation

    View full-size slide

  18. 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
    }
    }

    View full-size slide

  19. 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
    )
    }

    View full-size slide