[안드로이드] ImageView 사용하기, coil 라이브러리(웹 URL로 이미지 로딩)

😶 ImageView

이미지를 표현할 수 있는 View 이다.

 

기본적으로 레이아웃 파일에서 다음과 같이 사용한다.

<ImageView
    android:id="@+id/dice_roll_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/dice_1"/>

 

Activity 에서 런타임 시 이미지를 변경할 수 있다.

imageView.setImageResource(R.drawable.example)

 

 

android:adjustViewBounds

이 속성 값이 true 이면 ImageView 에서 그리기 가능한 가로 세로 비율을 유지하도록 경계를 조정한다.

 

 

android:scaleType

이미지가 View 에 어떻게 차지할건지 정할 수 있는 속성으로 속성 값에 따라 이미지가 짤리거나 위치가 달라질 수 있다.

 

scaleType 속성 값	설명
center	View 크기에 따라 가운데 부분을 보여준다. (이미지가 짤릴 수 있음)
centerInside	이미지의 너비와 높이가 View 크기와 같거나 커지도록 크기를 재조정한다. (이미지가 짤릴 수 있음)
centerCrop	이미지의 너비와 높이가 View 크기와 같거나 작게 크기를 재조정한다.
fitCenter	이미지를 View 크기에 맞게 원래의 이미지 비율을 살리면서 재조정한 뒤 View 가운데에 위치한다.
firEnd	이미지를 View 크기에 맞게 원래의 이미지 비율을 살리면서 재조정한 뒤 View 끝에 위치한다.
fitStart	이미지를 View 크기에 맞게 원래의 이미지 비율을 살리면서 재조정한 뒤 View 처음에 위치한다.
fitXY	이미지를 View 크기에 맞게 크기를 조정한다.
matrix	image matrix 을 이용하여 크기를 조정한다.

 

 

😶 웹 URL에서 이미지 로딩하기(Coil 라이브러리)

웹 URL 에서 이미지를 로딩하는 것은 많은 과정을 거친다. 이미지를 다운로드하여 내부에 저장하고 압축 형식에 안드로이드가 사용할 수 있는 이미지로 디코딩해야한다. 이미지는 메모리 내 캐시, 스토리지 기반 캐시 또는 둘 다에 캐시되어야 한다. 

 

이 과정은 간단한 과정이 아니기 때문에 메인 스레드가 아닌 Background 스레드에서 실행되어야하며 네트워크 및 CPU 의 성능을 위해 한 번에 두 개 이상의 이미지를 다운로드하고 디코딩해야할 수도 있다.

 

Coil 이라는 커뮤니티에서 개발한 라이브러리를 사용하면 앞서 말한, 이미지를 다운로드 및 캐싱, 디코딩 등의 과정을 대신 수행해준다.

 

먼저 라이브러리를 추가해준다. (build.gradle:Module)

// Coil
implementation "io.coil-kt:coil:1.1.1"

 

Activity 에서 사용할 때 ImageView 에 load() 메서드를 통해 웹 사이트의 Uri 를 통해 이미지를 간단하게 로드할 수 있다.

import coil.load

with(binding.marsImage) {
    val url = "https://i.namu.wiki/i/BWNX9Wv_B6yLh-mm5yfvbpjB0OUA7FZGFT9YJy9xeTMV-w664xELb2ISaCTig6F5JiJhBeAMHjkW0V___N-62gcjCIC5JEQvBwPiRSi_J9ty5yFqwKwg4bRdCLU4IkYK6_QidQwqZdEVRRtRCl9JnQ.webp"
    val uri = url.toUri().buildUpon().scheme("https").build()
    load(uri) {
        placeholder(R.drawable.loading_animation)
        error(R.drawable.ic_broken_image)
    }
}

이미지를 가져오는 동안 placeholder() 로 사용자에게 보여줄 이미지나 애니메이션 등을 명시할 수 있다. 

또한, 이미지를 가져오는 것에 실패할 경우 error() 메서드에 명시된 이미지로 대체된다.