[Jetpack Compose] Image 의 ContentScale

Unsplash, Pine Watt.

 

Jetpack Compose Image

안드로이드 앱 개발 시 이미지 표시를 위해 사용되는 Composable 입니다. 기존 XML 의 ImageView 와 같은 역할을 하며, Painter 를 기본적으로 지원하고 Bitmap 까지 지원합니다.

 

---

 

해당 Composable 의 파라미터 중 contentScale 은 이미지를 Composable 규격 내에서 어떻게 표시할 것인가를 결정합니다. XML 의 ImageView 속성 중 android:sacleType 속성과 역할이 같습니다.

다음은 각 속성값에 따른 이미지 표시를 정리했습니다.

 

보다 정확한 비교를 위해 5*5 의 체커보드 이미지를 사용했습니다.

 

---

1. Fit

 

최초로 Image Composable 을 구현하면 적용되어 있는 기본값이 Fit 입니다.

 

 

정사각형에서의 Fit 속성은 이미지를 Height, Width 에 맞춰 표시합니다.

 

 

직사각형의 경우 조금 특이하게, Image Composable 의 Height 와 Width 중 작은 값에 맞추어 이미지 비율에 대한 변화는 없도록 유지합니다.

 

2. None

 

None 은 아예 없애는 방법인데, Image Composable 의 크기에 관계없이

원본 이미지의 Pixel 값을 그대로 사용합니다.

현대 기기에서의 Pixel 은 DP 에 비하면 크기가 매우 작으므로, 한참 작게 나옵니다.

 

 

원본 Pixel 값을 사용하기 때문에, 직사각형의 경우 Image Composable 의 Height 또는 Width 값이 원본 이미지의 Pixel 보다 낮은 경우, 잘려서 나옵니다.

 

3. Crop

 

이미지의 중앙을 Image Composable 중앙에 맞추고 소스의 종횡비를 유지합니다.

필요시 이미지를 자릅니다. (Crop)

원본 이미지와 Composable 모두 정사각형이기 때문에 자르지 않습니다.

 

 

원본 이미지는 정사각형이지만 Composable 은 직사각형인 경우, 이미지를 잘라내야 합니다.

종횡비를 유지할 수 없기 때문입니다. 기준인 중앙으로부터 Composable 외부로 벗어나는 부분을 잘라냅니다.

 

4. Inside

 

Image Composable 의 Width, Height 내에 꼭 이미지가 들어오도록 하는 방식입니다.

원본 이미지가 Image Composable 의 바운드 내에 들어올 때는 별도의 스케일링이 진행되지 않습니다.

 

 

하지만 Image Composable 의 바운드 내에 들어오지 않는 경우, 종횡비를 유지하면서 Image Composable 내에 들어오도록 수정합니다.

 

5. FillBounds

 

종횡비를 유지하지 않으면서, Image Composble Width, Height 에 맞춰 스케일링 합니다.

 

 

종횡비를 유지하지 않고, 잘라내지도 않습니다.

 

6. FillWidth

 

종횡비를 유지하면서 스케일링하지만, Composable 밖으로 벗어나는 부분은 Crop 합니다.

스케일링시, Width 에 맞춥니다.

 

 

Width 는 Image Composable 의 Width 값에 맞게 수정되지만,

종횡비가 유지되면서 Bounds 를 벗어나는 부분에 대해선 Crop 이 진행되므로

위, 아래가 잘려나갑니다.

 

7. FillHeight

 

FillWidth 와 기본적으로 같습니다만, Height 에 맞춰 스케일링 됩니다.

 

 

Height 에 맞춰 스케일링되었기 때문에, Width 는 Image Composable 을 채울 수 없으므로 양 옆에 여백이 생기게 됩니다.

 

 

세로가 긴 Image Composable 의 경우입니다.

Height 에 맞춰 스케일링되었지만 종횡비를 유지하지 않기 때문에 양 옆이 잘려나갑니다.

 

---

 

Image Composable 의 ContentScale 은 속성들의 네이밍이 직관적이긴 하지만, 막상 사용해보면 생각했던 것과 다르게 적용되는 모습도 종종 있곤해서, 한 번 쯤 정리하면 좋겠다는 생각이었습니다.