Android Compose GlideImage 이미지 미리 캐싱하기 (preload)

Android 에서 Glide를 사용하다보면 이미지를 미리 캐싱해야되는 경우가 생각보다 많습니다.

 

Compose에서는 Glide로 어떻게 이미지 캐싱하는지 알아보겠습니다.

 

기존 Glide 이미지 미리 캐싱방법

Glide.with(this)
        .load(imageFileName)
        .preload();

 

기존 Glide에서는 preload() 를 이용해 미리 이미지를 캐싱합니다.

 

GlideImage 캐싱방법

GlideImage(
    imageModel = {
        "이미지url"
    },
    success = { state,painter ->
        imageBitmap = painter
        viewEnable.value = true
    }
)

 

GlideImage 에서는 따로 preload() 기능이 있지는 않고

success 를 통해 이미지가 캐싱 되었는지 확인이 가능합니다.

 

이걸 응용한 코드를 보여드리겠습니다.

 

val bottomPopupVisible = remember { mutableStateOf(true) }

BottomPopup(
    modifier = Modifier
        .align(Alignment.BottomCenter)
        .fillMaxWidth(),
    isEnable = bottomPopupVisible,
    onDismiss = { bottomPopupVisible.value = false}

)

 

@Composable
fun BottomPopup(modifier: Modifier, isEnable: MutableState<Boolean>, onDismiss: () -> Unit){
    val viewEnable = remember { mutableStateOf(false) }
    var imageBitmap by remember { mutableStateOf<Painter?>(null) }


    if(isEnable.value){
        GlideImage(
            imageModel = {
                "이미지파일"
            },
            success = { state,painter ->
                imageBitmap = painter
                viewEnable.value = true
            }
        )
    }


    AnimatedVisibility(
        visible = viewEnable.value ,
        modifier = modifier,
        enter = slideInVertically(initialOffsetY = {
            +it
        }),
        exit = slideOutVertically(targetOffsetY = {
            +it
        })
    ) {
        Column() {
            Card(
                shape = RoundedCornerShape(topEnd = 20.dp , topStart = 20.dp)
            ) {
                imageBitmap?.let {
                    Image(
                        painter = it,
                        contentDescription = "dsa",
                        modifier = Modifier
                            .fillMaxWidth()
                            .heightIn(max = 200.dp),
                        contentScale = ContentScale.Crop
                    )
                }

                Row (modifier = Modifier.fillMaxWidth()){
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .background(Color.White)
                            .clickable {
                                viewEnable.value = false
                                onDismiss()
                            },
                        horizontalAlignment = Alignment.CenterHorizontally,

                        ) {
                        Text(
                            text = "버튼1" ,
                            modifier = Modifier.padding(top = 20.dp , bottom = 20.dp)
                        )
                    }
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .background(Color.White),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(text = "버튼2" , modifier = Modifier.padding(top = 20.dp , bottom = 20.dp))
                    }
                }
            }

        }
    }


}

 

저번에 포스팅한 코드에서 응용한 버전입니다.

https://guguhome.tistory.com/34

Android Compose AnimatedVisibility 애니메이션 활용

 

캐싱적용

 

이미지 캐싱을 처리했을때의 모습입니다.

 

이미지 캐싱처리가 완료가 되야지만 애니메이션으로 하단팝업을 노출하는 로직입니다.

 

만약 이미지 캐싱처리를 하지 않는다면 어떻게될까요?

 

캐싱미적용

 

미적용일때 하단 바텀 view 가 올라 올때 적용했을때의 비해 부자연스럽게 올라옵니다.

만약 이미지 크기가 커진다면 더더욱 부자연스럽게 올라올겁니다.

 

이처럼 이미지를 미리 캐싱 처리하는거에 대한 중요성과 어떻게 Compose에서 적용하는지 알아봤습니다.

 

감사합니다.