Content Mode
이미지뷰를 잡고 우측 네번째 위치한 Attribute버튼을 클릭하면 View에 딸린 Content Mode란 것이 있다.
이게 무엇인고 하니
Options to specify how a view adjusts its content when its size changes.
컨텐츠의 사이즈가.. 바뀜에 따라.. 어떻게 뷰가 조절될지.. 정의하는 옵션..? ㅎㅎ
사진에서도 볼 수 있듯 ContentMode 에는 많은 옵션들이 있는데 주로 많이 쓰고 헷갈리는 것들이 aspectFit, aspectFill, scaleToFill 이렇게 세가지인듯하니 정리를 해보자.
scaleAspectFit
그렇다. 우리가 스토리보드에서 Aspect Fit으로 알고 있는 것의 풀 네임이다. 그래서 코드로 칠때는 사실 이렇게 설정한다.
imageView.contentMode = .scaleAspectFit이는 비율을 유지하면서 뷰의 사이즈에 맞게 이미지를 늘리는 옵션인데 , 이미지가 뷰를 꽉채우지 못해서 남는 부분은 투명처리 된다.
각각 다른 비율의 이미지 네장으로 예시를 들어보겠다.
그렇다. 우리의 아이폰에서 보는 일반적인 사진의 모드이다.
scaleAspectFill
이번에는 우리가 스토리보드에서 Aspect Fill으로 알고 있는 것의 풀 네임이다. 이것도 코드로 칠때는 사실 이렇게 설정한다.
imageView.contentMode = .scaleAspectFill이는 비율을 유지하면서 뷰의 사이즈에 맞게 이미지를 꽉 채우는 옵션이다. 그래서 이미지의 어떤 부분은 잘려 보일수도 있다.
아까와 같은 사진을 scaleAspectFill 모드로 설정해보자
비율이 유지된 채로 화면이 꽉 찼다. 하지만 일부 사진(1, 2, 4)은 가로가, 일부 사진(3)은 세로가 잘리는 것을 확인할 수 있다.
scaleToFill
스토리보드와 이름이 같은 scaleToFill 이다.
imageView.contentMode = .scaleToFill이는 전체 이미지가 다 나올 수 있도록 필요하다면 비율을 깨트리면서 뷰의 사이즈에 맞게 이미지를 꽉 채우는 옵션이다.
아까와 같은 사진을 scaleToFill 모드로 설정해보자
가로세로 모두 안나온 부분이 없긴 하지만 심하게 비율이 어그러진 부분도 있다. (이미지 4같은 경우에 사람이 홀쭉해졌다.)
확인 해보기
이 사진으로 앞에 나온 세가지 모드를 적용해 보겠다. 조금 더 구분하기 쉽도록 가장자리에 하트를 추가해놓았다.
구분할 수 있겠는가?
순서대로
AspectFill(비율 유지 O, 화면 꽉 채움 O, 이미지 잘림 O)
AspectFit(비율 유지 O, 화면 꽉 채움 X, 이미지 잘림 X)
ScaleToFill(비율 유지 X, 화면 꽉 채움 O, 이미지 잘림 X)
이다.
참고자료
https://developer.apple.com/documentation/uikit/uiview/contentmode
