Icon vs. Image

(내가) 자주 실수하는 ``Icon``과 ``Image``! 어떻게 다른지 비교해 보자.

Icon

주로 단색 아이콘을 보여줄 때 사용한다. Material 아이콘 또는 벡터 drawable 등을 사용할 수 있으며, 아이콘에 적절한 색깔을 tint로 입혀 사용한다. 색깔을 입히고 싶지 않다면 ``Color.Unspecified``를 사용하면 된다.

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

Unspecified, Red, Blue

``contentDescription`` 매개변수를 통해 아이콘의 의미를 설명할 수 있다. 접근성을 보장하기 위해 가급적 설명을 추가하는 것이 좋다.

 

클릭 가능한 아이콘을 나타내려면 ``IconButton``을 사용하면 된다.

Image

이미지를 있는 그대로 보여줄 때 사용한다. 이미지의 크기는 이미지 파일의 크기를 기본값으로 사용하지만, ``Modifier``나 다른 constraint에 의해 달라질 수 있다.

 

비트맵 이미지와 벡터 이미지 모두 ``painterResource()`` API로 불러올 수 있다. 커스텀이 필요한 경우에는 각각 ``ImageBitmap.imageResource()``와 ``ImageVector.vectorResource()`` API를 활용하면 된다.

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

``Icon``과 마찬가지로 ``contentDescription`` 매개변수를 통해 이미지의 내용을 설명할 수 있다. 

 

``colorFilter`` 매개변수를 사용하면 이미지의 톤을 다양하게 변조할 수 있다. 자세한 내용은 아래 링크를 참고하면 된다.

이미지 맞춤설정  |  Jetpack Compose  |  Android Developers

정리

• ``Icon``은 작은 단색 아이콘을 보여줄 때 사용한다. 상황에 따라 tint를 입힐 수 있다.
• ``Image``는 비트맵 또는 벡터 이미지를 보여줄 때 사용한다. 

헷갈리지 말 것!