[Android] Compose 컴포넌트 - Image

Image

Image를 사용하면 화면에 그래픽을 표시할 수 있습니다.

다음 세 가지 옵션을 통해 Image를 사용할 수 있습니다.

• painter: Painter : 이미지 리소스를 그리는 데 사용되며, 주로 painterResource 함수를 통해 리소스를 로드합니다.
• bitmap: ImageBitmap : 비트맵 이미지를 나타내며, 주로 loadImageBitmap 함수를 통해 리소스를 로드하고 asImageBitmap()을 사용하여 변환합니다.
• imageVector: ImageVector : 벡터 이미지를 나타내며, 주로 Material Icons에서 가져오거나 사용자 정의 벡터 이미지를 정의합니다.

androidx.compose.foundation  |  Android Developers

이미지 작업  |  Jetpack Compose  |  Android Developers

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

• painter : 그릴 이미지 리소스
• contentDescription : 이미지의 내용을 설명하는 텍스트 설정
• modifier : 이미지에 적용할 modifier 설정
• alignment : 이미지의 정렬 방식 설정
• contentScale : 이미지의 크기 및 비율 설정
  
  • ContentScale.FillHeight : 이미지의 비율을 유지하면서 이미지 컨테이너의 높이를 채우도록 크기를 조정합니다.
  • ContentScale.FillWidth : 이미지의 비율을 유지하면서 이미지 컨테이너의 너비를 채우도록 크기를 조정합니다.
  • ContentScale.FillBounds : 이미지가 이미지 컨테이너 전체를 채우도록 크기를 조정합니다. (비율 유지 X)
  • ContentScale.Crop : 이미지의 비율을 유지하면서 이미지 컨테이너를 채우도록 크기를 조정하고 자릅니다. (이미지 일부가 잘려서 표시될 수 있음)
  • ContentScale.Fit : 이미지의 비율을 유지하면서 이미지 컨테이너를 채우도록 크기를 조정합니다. (이미지 컨테이너 일부가 빈 공간으로 표시될 수 있음)
  • ContentScale.Inside : 이미지가 이미지 컨테이너보다 클 경우에는 ContentScale.Fit처럼 크기가 조정되고, 작을 경우에는 ContentScale.None처럼 크기가 조정되지 않습니다.
  • ContentScale.None : 이미지에 크기 조정을 적용하지 않습니다.
• alpha : 이미지의 불투명도 설정 (0.0f이 완전히 투명하고, 1.0f(기본값)은 완전히 불투명한 상태)
• colorFilter : 이미지에 적용할 색상 필터 설정 (색조 변경 또는 효과 부여)

ContentScale
이미지
ContentScale.FillHeight
ContentScale.FillWidth
ContentScale.FillBounds
ContentScale.Crop
ContentScale.Fit
ContentScale.Inside	소스 이미지가 경계보다 큼	소스 이미지가 경계보다 큼
	소스 이미지가 경계보다 작음	소스 이미지가 경계보다 작음
ContentScale.None	소스 이미지가 경계보다 큼	소스 이미지가 경계보다 큼
	소스 이미지가 경계보다 작음	소스 이미지가 경계보다 작음

 

 

인터넷에서 Image 로드

Coil

Coil의 AsyncImage()를 통해 이미지를 생성할 수 있습니다.

model 속성에 String, Uri, HttpUrl, File, DrawableRes, Drawable, Bitmap 타입을 사용하여 이미지를 로드할 수 있습니다.

GitHub - coil-kt/coil: Image loading for Android and Compose Multiplatform.

// build.gradle에 Coil 라이브러리 추가
implementation("io.coil-kt:coil:2.6.0")
implementation("io.coil-kt:coil-compose:2.6.0")

@Composable
fun AsyncImage(
    model: Any?,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    placeholder: Painter? = null,
    error: Painter? = null,
    fallback: Painter? = error,
    onLoading: ((State.Loading) -> Unit)? = null,
    onSuccess: ((State.Success) -> Unit)? = null,
    onError: ((State.Error) -> Unit)? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality,
)

• placeholder : 이미지가 로드되는 동안 표시할 이미지
• error : 이미지 요청이 실패할 경우 표시할 이미지
• fallback : 요청의 ImageRequest.data가 null일 때 표시할 이미지
• OnLoading : 이미지 요청이 로드되기 시작하면 호출됨
  
• onSuccess : 이미지 요청이 성공적으로 완료되면 호출됨
  
• onError : 이미지 요청이 실패되면 호출됨

 

Glide

Glide의 GlideImage()를 통해 이미지를 생성할 수 있습니다.

model 속성에 String, Uri, HttpUrl, File, DrawableRes, Drawable, Bitmap 타입을 사용하여 이미지를 로드할 수 있습니다.

Glide v4 : Compose

// build.gradle에 Glide 라이브러리 추가
implementation "com.github.bumptech.glide:compose:1.0.0-beta01"

@Composable
fun GlideImage(
    model: Any?, 
    contentDescription: String?, 
    modifier: Modifier = Modifier, 
    alignment: Alignment = Alignment.Center, 
    contentScale: ContentScale = ContentScale.Fit, 
    alpha: Float = DefaultAlpha, 
    colorFilter: ColorFilter? = null, 
    requestBuilderTransform: RequestBuilderTransform<Drawable> = { it }
)