NetworkImage

Image에 적용할 이미지를 network를 통해 받는 Image이다.

1. 세팅

안드로이드 jetpack compose 문서에 보면 network를 통해 이미지를 가져올때 Coil 또는 Glide를 활용하여 사용하면 좋다고 나와있다.

이 포스트에서는 Coil를 활용할 것이다.

먼저 Coil 깃헙을 통해서 의존성을 추가해주자

	//1. coil 의존성 추가
    implementation("io.coil-kt:coil:2.5.0")
    //compose에서 사용하기위해서는 compose도 추가해야함
    implementation("io.coil-kt:coil-compose:2.5.0")

network도 사용하기 때문에 manifest에 INTERNET 권한도 추가해줘야한다.

	<!--    2.인터넷을 사용하기에 퍼미션 추가-->
    <uses-permission android:name="android.permission.INTERNET"/>

2. rememberImagePainter를 이용해 Image의 painter를 설정해보자

coil 라이브러리가 잘 설치 되었다면 rememberImagePainter를 사용할 수 있을 것이다. 지금은 deprecated 되어있지만 한번 사용해보자.

이미지는 Lorem Picsum에서 무료 랜덤 이미지 url을 가져왔다.

	//data에 있는 내용을 저장했다가 다시 composable이 재호출될때 기억했다가 알려준다
    val painter = rememberImagePainter(data = "https://picsum.photos/200/300")
    Image(painter = painter, contentDescription = "랜덤한 사진")

data 부분에 이미지 url을 넣어주기만 하면 된다.

정말 간단하다.

3. AsyncImage를 활용해보자

구글문서에는 coil같은경우 AsyncImage를 활용하여 networkImage를 구현하였다.

이 방법이 더 많이 활용 될 것 같다.

Column{
        AsyncImage(model = "https://picsum.photos/200/300", contentDescription = "랜덤한 사진")
        AsyncImage(model = "https://picsum.photos/200/300", contentDescription = "랜덤한 사진")
    }

model부분에 imageUrl를 넣어주면된다.

정말 간단하다!

네트워크를 통해 이미지를 불러오는 것은 Coil을 통해서 정말 간단하게 구현할 수 있다.

다음 포스트는 networkImage를 활용하여 간단한 명함을 만들어보고자 한다.

jetpack compose 연습 깃헙 링크
https://github.com/unso99/jetpack_compose_practice