[swift]ImageView ContentMode에 따른 이미지 표시

iOS 앱 개발 시 ImageView에 적용 가능한 ContentMode의 속성에 따른 이미지 표시 방법을 정리 해봤다. 한글로 늘리기, 자르기 정도로만 알고있어서 영어 단어만 봐서는 정확하게 어떻게 표시하는건지 감이 잘 안잡힌다.

참고로 UIImageView가 가지고 있는 속성은 아니고 UIView의 속성인 듯 하다. 근데 일반 뷰에서도 쓸 일이 있긴한가..?? 아직 아이폰앱 개발 뉴비라서 잘 모르겠다. 

쉽게 외우는 나만의 방식은 제일 밑에서 소개하겠다.

상하로 길고 크기가 큰 원본 이미지를 해당 이미지보다 크기가 작은 정사각형의 UIImageView 컨트롤에 표시하는 방식으로 진행했다. 일단 아래 이미지가 샘플 이미지다. 블로그에 첨부한다고 리사이즈를 해서 작은데 테스할 때 사용한 이미지는 당연히 원본 크기다.

노래가 궁금하신 분은 https://www.youtube.com/watch?v=RIWRyggt-QY 여기서 감상 가능!

별다른 설명 없이 그냥 각 속성 별 이미지만 나열하겠다.

1. Scale To Fill

2. Aspect Fit

3. Aspect Fill

4. Redraw

이건 설명이 좀 필요하겠다. 결과 이미지만 본다면 Scale To Fill과 완전히 동일하지만, 내부적으로 동작하는 방식이 다르다고 한다. 꼭 필요한 상황이 아니면 사용하는 것을 피하라고 하는데, 꼭 필요한 상황이라함은 커스텀 뷰와 관련된 것 같다. 자세한 내용은 여기를 참고하면 도움이 될 것 같다. 사용을 피하라고 하는 이유는 내부적으로 drawRect()를 반복해서 호출하기 때문에 비용이 많이 든다고..

5. Center

6. Top

7. Bottom

8.Left

9. Right

위에 나열한 ContentMode외에 4개의 모드가 더 있다. [Top Left], [Top Right], [Bottom Left], [Bottom Right]. 이렇게 네가지인데, 정확히 예상하는 그대로 동작한다.

크기를 변경시키는 Mode는 총 세 개다. (Redraw 제외하고..)

쉽게 외우는 방법. Scale은 가로x세로 비율을 유지하지 않는다. Aspect는 비율을 유지한다. 그리고 Fill은 단어 뜻 그대로 여백을 남기지 않고 모두 "채운다". 그래서 Aspect Fill은 비율을 유지하면서 여백 없이 채워야 하니깐 원본 이미지가 잘려나간다. Scale은 비율을 유지하지 않아도 되기 때문에 가로나 세로를 늘려서(또는 줄여서) 표시하는거고. Fit은 영역안에 이미지를 "맞춘다". 그래서 Aspect와 결합하면, 비율을 유지하면서 틀안에 맞춰야 되니깐 여백이 생긴다..

난 이렇게 외우니깐 좀 쉽게 외워지던데.. 도움이 될라나 모르겠네.