[Compose UI] Image (이미지 다루기)

 

Image 함수 시그니처

@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 - 이 이미지가 나타내는 것을 설명하기 위해 접근성 서비스에서 사용하는 텍스트. 이 이미지가 장식용으로 사용되지 않는 한 항상 제공되어야 하며 사용자가 취할 수 있는 의미 있는 행동을 나타내지 않는다. 이 텍스트는 androidx.compose.ui.res.stringResource 또는 이와 유사한 것을 사용하여 Localization해야 한다.
• modifier - 레이아웃 알고리즘을 조정하거나 데코레이션 콘텐츠를 그리는 데 사용되는 수정자(예: 배경)
• alignment - 너비(width)와 높이(height)로 정의된 지정된 범위에 Painter를 배치하는 데 사용되는 선택적 정렬 매개변수
• contentScale - 경계가 Painter의 고유 크기와 다른 경우 사용할 가로, 세로스케일링을 결정하는 데 사용되는 선택적 스케일 매개변수
• alpha - 화면에 렌더링될 때 Painter에 적용되는 선택적 불투명도는 기본적으로 Painter를 완전히 불투명하게 렌더링
• colorFilter - 화면에 렌더링될 때 Painter에 적용할 선택적 colorFilter

 

예제를 이용한 확인

contentScale

contentScale은 추가하려는 이미지가 Layout과 맞지 않는 경우 Scale을 맞출 수 있도록 사용하는 매개변수이다.

• Crop - 이미지의 너비와 높이가 대상의 해당 치수와 같거나 더 크도록 소스를 균일하게 조정합니다(소스의 종횡비 유지).
• Fit - 이미지 소스의 두 치수(너비 및 높이)가 대상의 해당 치수 이하가 되도록 소스를 균일하게 조정합니다(소스의 종횡비 유지).
• FillBounds - 대상 범위를 채우기 위해 수평 및 수직으로 불균일하게 크기를 조정합니다.
• FillHeight - 범위가 대상 높이와 일치하도록 너비, 높이 비율을 유지하면서 소스의 크기를 조정합니다.
• FillWidth - 범위가 대상 너비와 일치하도록 너비, 높이 비율을 유지하면서 소스의 크기를 조정합니다.
• Inside - 소스가 대상보다 큰 경우 종횡비가 대상 경계 내에 있도록 소스의 크기를 조정합니다.
• None - 소스에 배율을 적용하지 않습니다.

아래 이미지는 하나의 예시로 Crop scale을 적용한 예시이다. 처음 이미지는 Layout 비율과 맞지 않아 좌우 여백이 있으나, Crop을 적용함으로써 이미지 소스가 레이아웃에 맞도록 Crop 된 것을 확인할 수 있다. 이 때 이미지의 너비, 높이의 비율은 처음 적용된 값과 동일하게 유지된다.

contentScale = ContentScale.None	contentScale = ContentScale.Crop