Coil 라이브러리를 사용하여 Jetpack Compose에 Gif 이미지 넣기

 

 

 

 

 

android compose로 gif 이미지를 넣는 것은 처음이다. 먼저 관련 라이브러리를 찾았다.

스택 오버 플로우에서 찾아 본 바로 coil이라는 라이브러리를 사용하면 되는 것 같다.

implementation "io.coil-kt:coil-compose:2.1.0"
implementation "io.coil-kt:coil-gif:2.1.0"

 

 

위 라이브러리의 최신 버전을 찾아보니, 2024년 1월 기준 해당 라이브러리 공식 깃헙 문서에 다음과 같이 나와 있었다.

 

Jetpack Compose

Import the Jetpack Compose extension library:

implementation("io.coil-kt:coil-compose:2.5.0")

 

Gifs

Unlike Glide, GIFs are not supported by default. However, Coil has an extension library to support them.

To add GIF support, import the extension library:

implementation("io.coil-kt:coil-gif:2.5.0")

 

따라서 최신 버전인 2.5.0으로 build.gradle(app)에 추가해 준다.

 

그레이들 파일 변경 후 sync를 맞춰서 에러가 안 나는지 확인했다면,

공식 문서의 Quick Start 가이드를 훑어보자.

공식 문서에 나와있던 코드 예제와 스택 오버 플로우에 있는 예제가 일치했기 때문에, 

좀 더 활용하기 쉬운 형태의 코드를 선택해서 쓸 것이다.

아까 스택 오버 플로우에 있던 코드를 복붙에 쓰기 좋은 형태로 살짝 변경해서 활용해 보자.

나는 다음과 같은 뷰를 만들었다.

 

@Composable
fun GifImage(
    modifier: Modifier = Modifier,
    drawableId: Int,
) {
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components {
            if (SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()
    Image(
        painter = rememberAsyncImagePainter(
            ImageRequest.Builder(context).data(data = drawableId).apply(block = {
                size(Size.ORIGINAL)
            }).build(), imageLoader = imageLoader
        ),
        contentDescription = null,
        modifier = modifier.fillMaxWidth(),
    )
}

 

 

위 GifImage 컴포넌트의 사용 예시는 아래와 같다.

@Composable
fun GuideView360() {
    Column() {
        GifImage(drawableId = R.drawable.play_guide_360_video)
        AlignCenterText(text = "360도 VR 영상을 재생하기 위해")
        Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
            Text(text = "스마트폰을 ")
            Text(text = "반시계 방향으로", color= VroadwayColors.primaryVariant)
        }
        AlignCenterText(text = " 기울여 주세요")
        Spacer(modifier = Modifier.height(80.dp))
    }
}

 

 

 

 

결과 화면)

 

 

 

 

참고)

https://stackoverflow.com/questions/60229555/adding-gif-into-jetpack-compose

Adding gif into Jetpack Compose

https://github.com/coil-kt/coil

GitHub - coil-kt/coil: Image loading for Android and Compose Multiplatform.

https://github.com/coil-kt/coil/tree/main/coil-gif