Image & Network Image

오늘은 jetpack compose 에서 내부 저장소에 있는 이미지를 불러오는 방법과 외부 서버로부터 이미지를 불러오는 방법에 대해 다뤄볼려고 합니다. 🙂

 

Image (정적 이미지)

Image 같은 경우에는 안드로이드 프로젝트 내 폴더(drawable) 에 있는 이미지를 불러올 때 사용합니다.

총 3가지 방법으로 이미지를 불러올 수 있습니다.

painter

가장 많이 사용하는 방법입니다. drawable 폴더 내에 있는 이미지를 불러올 때 사용합니다. 코드는 다음과 같이 작성합니다.

Image(
    painter = painterResource(id = R.drawable.image),
    contentDescription = "이미지에 대한 설명"
    // contentDescription = null
)

 

contentDescription 같은 경우에는 Image 외에 다른 컴포저블이 해당 이미지를 설명한다면 작성하지 않아도 되고(주석처리 코드), 만약에 설명하지 않는다면 작성하는게 좋습니다.

imageVector

안드로이드 자체에서 제공하는 이미지 아이콘이 필요할 때 사용하는 방식입니다. 코드는 다음과 같이 작성합니다.

Image(
    imageVector = Icons.Filled.Settings,
    contentDescription = "세팅"
)

 

Icons.Filled. 를 치면 나오는 여러가지 위젯을 사용할 수 있습니다. 

 

bitmap 같은 경우에는 전에 설명한 방법보다 조금 더 까다롭습니다. 왜냐하면 이미지 비트맵을 설정하기 위해서는 컴포저블 내에서만 진행하기 어렵습니다. context 가 있는 액티비티 등의 뷰 컴포넌트에서 비트맵을 가져온 후 컴포저블 내에 주입시켜야 합니다. 관련된 내용은 추후에 추가하겠습니다. 🥲

---

Network Image (동적 이미지)

고정된 UI 가 아니라 외부 API 등을 가져와서 쓰는 경우에는, 이미지가 동적으로 변합니다. 이때는 아래의 방법을 사용합니다.

 

먼저 이미지와 관련된 라이브러리인 coil 라이브러리 의존성을 추가하고 메니페스트에 인터넷 사용 허가도 설정합니다.

// build.gradle (module)
implementation 'io.coil-kt:coil:2.2.2' // coil 의존성
implementation 'io.coil-kt:coil-compose:2.2.2' // coil 을 compose 와 같이 쓰기 위한 의존성

// manifest
<uses-permission android:name="android.permission.INTERNET"/>

 

두가지 방법을 이용할 수 있습니다.

rememberImagePainter (deprecated)

해당 방식은 deprecated 되었지만 Compose 한국어 문서에서 설명하기 때문에 소개해보고자 합니다. 코드는 다음과 같이 작성합니다.

val painter = rememberImagePainter(data = "https://~~~")
Image(
    painter = painter,
    contentDescription = "네트워크 이미지에 대한 설명"
)

 

이미지 url 을 painter 로 변환시켜서 기존 Image 컴포저블의 매개변수로 넣어주면 됩니다.

AsyncImage

이미지 라이브러리인 코일 문서에서 설명하는 방식입니다. 코드는 아래와 같습니다.

AsyncImage(
    model = "https://~~~",
    contentDescription = "이미지에 대한 설명"
)

 

이미지 url 에 대한 변환 과정없이 AsyncImage 라는 컴포저블의 매개변수로 넣어주면 됩니다.

 

참고로 네트워크 이미지 같은 경우에는 프리뷰로 확인할 수 없어서 에뮬레이터나 안드로이드 기기로 실행시켜야 확인이 가능합니다😭

 

해당 글이 도움이 되었다면 하트 한번씩 부탁드립니다! 🙂