[Kotlin / Compose] Image

Compose에서 Image를 사용하는 방법은 Image 컴포넌트를 사용하는 것이다. 이 컴포넌트는 특정 위치에 이미지를 표시하는 데 사용된다.

@Composable
fun Greeting() {
    Column {
        Image(
            painter = painterResource(id = R.drawable.wall),
            contentDescription = "엔텔로프 캐년"
        )

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

    }
}

painter 속성은 이미지를 로드하고 그리는 데 사용되는 Painter 객체를 지정한다.
painterResource(id = R.drawable.wall)는 리소스에서 이미지를 로드하여 Painter 객체를 생성하며 생성된 Painter 객체는 이미지를 화면에 표시하는 데 사용된다.
contentDescription는 이미지에 대한 설명으로 사용된다.

imageVector = Icons.Filled.Settings 부분은 Compose에서 제공되는 아이콘을 나타낸다.
Icons.Filled.Settings는 설정 아이콘을 나타내며 벡터 아이콘으로 Compose에서 제공하는 아이콘을 사용하기 위해 이렇게 지정된다.

✨ Coil 라이브러리를 이용해서 네트워크 이미지 다루기

app의 build.gradle에 의존성 추가하기

dependencies {
	...

    implementation("io.coil-kt:coil:2.3.0") // coil을 사용하기 위한 의존성 
    implementation("io.coil-kt:coil-compose:2.2.2") // coil을 compose와 같이 사용하기 위한 의존성 
}

Coil 라이브러리의 rememberImagePainter 함수는 이미지를 로드하는 데 사용된다.
이미지의 URL을 인수로 받아서 해당 URL에서 이미지를 비동기적으로 로드하고 표시할 Painter 객체를 생성한다.
이 Painter 객체는 Compose의 재렌더링 중에도 유지되어 같은 URL에서 이미지를 여러 번 로드할 때도 이미지가 새로 로드되지 않고 기존의 이미지가 표시되도록 한다.
정리하면 ☝🏻 URL에서 이미지를 비동기적으로 로드하고 표시하기 위해 Coil 라이브러리의 rememberImagePainter 함수를 사용하고, 이를 통해 생성된 Painter 객체를 Image 컴포넌트에 전달하여 이미지를 표시한다.

@Composable
fun CoilEx() {
    val painter = rememberImagePainter(data = "https://...")
    Image(painter = painter, contentDescription = "예제 이미지")
}

AsyncImage는 사용자가 제공한 모델에 따라 이미지를 비동기적으로 로드하여 표시하는 컴포넌트이며 URL에서 이미지를 로드하고 표시하는 비동기 작업을 처리한다.
AsyncImage 컴포넌트는 비동기 이미지 로딩 라이브러리와 함께 사용된다.

@Composable
fun CoilEx() {
    AsyncImage(model = "https://...", contentDescription = "예제 이미지")
}