Glide 글라이드 (이미지)

글라이드를 쓰는 이유?

---

안드로이드는 글라이드라는 라이브러리가 존재한다.

크기가 제각각 다른 이미지를 원하는 크기에 맞추어 뷰에 걸기 위해서는 라이브러리를 이용하는 것이 일반적이다.

JPEG, PNG는 물론 GIF 까지 가저올 수 있다.

 

 

사용 방법

---

기본 적인 방법

Glide.with(fragment)
    .load(url)
    .into(imageView);

 

fragment 부분 : 해당 프레그먼트 혹은 엑티비티의 Context를 넣어주면 된다. (Activity라면 this@액티비티명, Fragment라면 requireActivity 혹은 requireContext를 써주자)

 

load 부분 : url 이나, drawable을 넣어준다.

 

into 부분 : 해당 이미지를 걸 imageView를 넣어준다.

 

 

 

내가 쓰는 방법

---

코틀린은 기본적으로 확장 함수를 지원한다.

또한 데이터 바인딩을 이용하여 XML에 걸어줄 수도 있고, 글로벌 애플리케이션을 이용하여 전역적으로 사용할 수도 있다.

 

확장함수

fun ImageView.loadImage(source: Any) {
    Glide.with(this.context)
        .load(source)
        .into(this)
}

 

 

데이터 바인딩

package com.example.umc_stepper.utils

import android.app.Application
import android.content.Context
import android.widget.ImageView
import com.bumptech.glide.Glide
import com.bumptech.glide.load.resource.bitmap.CenterCrop
import com.bumptech.glide.load.resource.bitmap.CircleCrop
import com.bumptech.glide.load.resource.bitmap.RoundedCorners
import com.bumptech.glide.request.RequestOptions
import com.google.firebase.FirebaseApp
import dagger.hilt.android.HiltAndroidApp

@HiltAndroidApp
class GlobalApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        instance = this
    }

    companion object {
        lateinit var instance: GlobalApplication
            private set

	// 이미지를 맞추어 로드
        fun loadImage(imageView: ImageView, source: Any) {
            Glide.with(instance)
                .load(source)
                .into(imageView)
        }
        
        
        // 프로필 이미지 (동그란 이미지) 지정
        fun loadProfileImage(imageView: ImageView, source: Any) {
            Glide.with(instance)
                .load(source)
                .apply(RequestOptions.bitmapTransform(CircleCrop()))
                .into(imageView)
        }


	// 이미지를 맞게 조정하여 로드
        fun loadCropImage(imageView: ImageView, source: Any) {
            Glide.with(instance)
                .load(source)
                .centerCrop()
                .into(imageView)
        }


	// 네 개의 변이 Rounded로 처리되어있는 사각형
        fun loadCropRoundedSquareImage(context: Context, imageView: ImageView, source: Any, rounded : Int) {
            val density = context.resources.displayMetrics.density
            val roundedCorners = RoundedCorners((rounded * density).toInt())

            Glide.with(context)
                .load(source)
                .apply(RequestOptions().transform(CenterCrop(), roundedCorners))
                .into(imageView)
        }
    }
}

 

사용은 아래처럼 하면 된다. (어댑터에서 사용)

override fun bind(binding: ItemUploadPictureBinding, item: UploadImageCard) {
        GlobalApplication.loadCropRoundedSquareImage(binding.root.context,binding.itemUploadPictureIv,item.imgUrl,18
        )
        binding.itemUploadPictureCancelIb.setOnClickListener {
            removeInterface.onRemove(item.id)
        }
    }

 

보통 네트워크 통신으로 가저온 이미지나, 갤러리에서 불러온 이미지를 띄울 때 많이 사용한다.

 

 

XML에서 쓰는 방법

---

package com.example.app

import android.widget.ImageView
import androidx.databinding.BindingAdapter
import com.bumptech.glide.Glide
import com.bumptech.glide.request.RequestOptions

@BindingAdapter("imageUrl")
fun loadImage(view: ImageView, url: String?) {
    Glide.with(view.context)
        .load(url)
        .apply(RequestOptions().placeholder(R.drawable.placeholder).error(R.drawable.error_image))
        .into(view)
}

 

바인딩 어댑터를 이용하여 XML에서도 사용할 수 있다.

 

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <data>
        <variable
            name="imageUrl"
            type="String" />
    </data>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:imageUrl="@{imageUrl}"  <!-- BindingAdapter에서 정의한 imageUrl 사용 -->
        android:scaleType="centerCrop"
        android:layout_margin="16dp"/>
</layout>

 

url 을 넣어주면 된다. 

단, 데이터 바인딩을 사용해야 하고, XML에도 데이터 바인딩을 지정해주어야 한다.