[Compose] Coil을 사용하여 원형 프로필 이미지 구성하기

- 이전에 Image 컴포저블을 활용하여 중첩된 원형 프로필 이미지를 구현했었다.

 

- 하지만 프로필 이미지가 기본 drawable이 아니고, File이나 네트워크로부터 수신받아야 하는 경우가 있다.

 

- 이 경우에 Coil의 AsyncImage를 활용하여 보여주도록 처리했다.

//A composable that executes an ImageRequest asynchronously and renders the result.
@Composable
fun AsyncImage(
    model: Any?,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    transform: (State) -> State = DefaultTransform,
    onState: ((State) -> Unit)? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality,
) = AsyncImage(
    model = model,
    contentDescription = contentDescription,
    imageLoader = LocalImageLoader.current,
    modifier = modifier,
    transform = transform,
    onState = onState,
    alignment = alignment,
    contentScale = contentScale,
    alpha = alpha,
    colorFilter = colorFilter,
    filterQuality = filterQuality
)

- Coil을 사용한 이유로서는 코틀린 기반의 가볍고 빠르며, Coroutine 기반 + 확장성이 우수함 등의 장점들을 가지고 있어 사용해 봤다.

 

- Glide 보다 라이브러리 자체가 가볍기도 하다.

 

- 아래 내용을 gradle에 추가하는 것을 잊지 말자

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

 

- 그리고 AsyncImage로 컴포넌트 하위에 아래와 같이 구성했다.

AsyncImage(
    model = ImageRequest.Builder(context)
        .data(
            //파일, drawable, url 등등
        )
        .memoryCachePolicy(CachePolicy.DISABLED)
        .diskCachePolicy(CachePolicy.DISABLED)
        .transformations(CircleCropTransformation())
        .build(),
    contentDescription = "Profile",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(size.dp)
        .clip(CircleShape)
        .padding(3.5.dp)
)

- model의 data를 통해 각종 형태의 이미지를 넣을 수 있는데, 아래가 기본 지원 항목이다.

String (mapped to a Uri)
Uri ("android. resource", "content", "file", "http", and "https" schemes only)
HttpUrl
File
DrawableRes
Drawable
Bitmap
ByteArray
ByteBuffer

 

- 디스크와 메모리에 대한 캐시 기능은 늦은 갱신 문제를 고려하여 아예 사용 안 하도록 지정했다.

.memoryCachePolicy(CachePolicy.DISABLED)
.diskCachePolicy(CachePolicy.DISABLED)

 

- modifier와 transformations 설정을 통해 원형으로 이미지가 표시되도록 설정했다.

.transformations(CircleCropTransformation())

.clip(CircleShape)

 

- context의 경우, current activity나 fragment의 정확한 처리를 대비하여 외부로부터 context를 받도록 했다.

@Composable
fun Avatar(
    context: Context,
    size: AvatarSize,
    isPlanRing: Boolean
) {

 

- Coil이 Webp나 GIF도 문제없이 지원해 주기 때문에 아마 계속 사용하지 않을까 싶다.