[iOS UI] ImageView의 Content Mode 한 번에 정리하기 : Aspect Fit, Aspect Fill, Scale To Fill, Redraw, Center, Top, Bottom, Left, Right, Top Left, Top Right, Bottom Left, Bottom Right

Image View의 Content Mode 종류

IOS는 Image View에서 이미지가 어떻게 보일 것인지에 대한 다양한 모드를 지원한다.

Aspect Fit : 이미지의 비율을 유지한체로 이미지의 가로 세로 중 긴쪽을 화면의 가로 또는 세로에 맞추는 모드
Aspect Fill : 이미지의 비율을 유지한체로 이미지의 가로 세로 중 짧은쪽을 화면의 가로 또는 세로에 맞추는 모드
Scale To Fill : 이미지뷰의 크기를 꽉 채우기 위해 비율을 늘리는 모드. 만약 Geometry가 바뀌면 원래 이미지를 그대로 사용.
Redraw : 이미지뷰의 크기를 꽉 채우기 위해 비율을 늘리는 모드. 만약 Geometry가 바뀌면 이미지를 다시 랜더링.
Center : Image의 크기는 그대로 ImageView의 중앙에 배치된다.
Top : Image의 크기는 그대로 ImageView의 수직 방향 상단, 수평방향 중앙에 배치된다.
Bottom : Image의 크기는 그대로 ImageView의 수직 방향 하단, 수평방향 중앙에 배치된다.
Left : Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 중앙에 배치된다.
Right : Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 중앙에 배치된다.
Top Left : Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 상단에 배치된다.
Top Right : Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 상단에 배치된다.
Bottom Left : Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 하단에 배치된다.
Bottom Right : Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 하단에 배치된다.

테스트 환경

1. 그림1의 이미지로 실제 예제를 확인한다.

2. UIImageView는 화면을 꽉 채우도록 설정한다.

Aspect Fit

이미지의 비율을 유지한체로 이미지의 가로 세로 중 긴쪽을 화면의 가로 또는 세로에 맞추는 모드

Aspect Fill

이미지의 비율을 유지한체로 이미지의 가로 세로 중 짧은쪽을 화면의 가로 또는 세로에 맞추는 모드

Scale To Fill

이미지뷰의 크기를 꽉 채우기 위해 비율을 늘리는 모드. 만약 Geometry가 바뀌면 원래 이미지를 그대로 사용.

Redraw

이미지뷰의 크기를 꽉 채우기 위해 비율을 늘리는 모드. 만약 Geometry가 바뀌면 원래 이미지를 다시 랜더링.

Center

Image의 크기는 그대로 ImageView의 중앙에 배치된다.

Top

Image의 크기는 그대로 ImageView의 수직 방향 상단, 수평방향 중앙에 배치된다.

Bottom

Image의 크기는 그대로 ImageView의 수직 방향 하단, 수평방향 중앙에 배치된다.

Left

Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 중앙에 배치된다.

Right

Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 중앙에 배치된다.

Top Left

Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 상단에 배치된다.

Top Right

Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 상단에 배치된다.

Bottom Left

Image의 크기는 그대로 ImageView의 수평 방향 왼쪽, 수직 방향 하단에 배치된다.

Bottom Right

Image의 크기는 그대로 ImageView의 수평 방향 오른쪽, 수직 방향 하단에 배치된다.