iOS/Swift

UIImageView의 contentMode에 대한 정리

RaeBaek 2023. 9. 2. 16:12

먼저 UIImageView의 Apple 공식문서를 확인해봅시다.

A view that displays a single image or a sequence of animated images in your interface.
인터페이스에 단일 이미지 또는 일련의 애니메이션 이미지를 ‘표시하는 뷰’입니다.

  • ‘단일 이미지 또는 애니메이션 이미지를 표시하는 뷰’라고 정의하고 있습니다.

ContentMode

Options to specify how a view adjusts its content when its size changes.
크기가 변경될 때 보기가 내용을 조정하는 방법을 지정하는 선택사항입니다.

  • ‘보기가 내용을 조정하는 방법’을 지정하는 것이랍니다.
  • ContentMode는 열거형으로 구성되어있군요!

 

  • 그렇다면 코드와 함께 보겠습니다.

  • myImage에 Instance Property(인스턴스 프로퍼티)로 선언되어 있는 contentMode에 접근해보겠습니다.

A flag used to determine how a view lays out its content when its bounds change.
경계가 변경될 때 보기가 ‘내용을 배치하는 방법’을 결정하는 데 사용되는 플래그이다.

  • 내용을 배치하는 방법을 결정하는 것 같습니다.
  • 참고로 contentMode 앞에 적혀있는 ‘P’는 ‘Property’를 뜻합니다.
  • 추가로 세, 네번째의 ‘M’은 ‘Method’를 뜻합니다.
  • 그렇다면 contentMode는 어떻게 구성되어 있을까요?
    • 참고로 기본적으로 UIImageView는 UIView를 상속받고 있습니다.
      • 그렇기 때문에 이 글의 제목인 UIImageView의 contentMode 말 보다는 UIView의 contentMode 접근이 맞다고 볼 수 있습니다!
      • 그래서 extension UIView 부분에 정의되어있는 ContentMode에도 접근이 가능합니다.
    • ContentMode는 enum (열거형)으로 선언되어 있습니다.
    • ContentMode 내부에는 13가지의 case로 나누어져 있습니다.
    • 그 중에서 UIImageView에서 가장 많이 사용되는 case는 0, 1, 2 case입니다.
    • 나머지 case들도 있지만 위의 3가지를 가장 많이 사용하기 때문에 3가지에 차이를 알아보겠습니다.

 

근데 ScaleToFill 앞에 K는 뭐지?

  • 위에서 설명드렸던 ‘P’와 ‘M’과 비슷하게 scaleToFill과 나머지 값들은 ‘K’로 표현되고 있는데요..
  • 아무리 생각해도 K로 시작하는 단어나 키워드, 표현들이 생각나지 않아서 찾아본 결과! 열거형의 case를 ‘C’ 대신 ‘K’로 표현하는 것 같습니다.
  • 정확한 이유는 모르겠으나 Swift에서는 이미 Class 를 ‘C’로 사용하고 있어 case는 C과 비슷한 K로 표현하고 있는건지 아닌가 싶습니다! (혹시 정확한 이유를 알고 계시다면 댓글에 알려주시면 감사하겠습니다! ㅎㅎ)

다시 ScaleToFill

The option to scale the content to fit the size of itself by changing the aspect ratio of the content if necessary.
필요한 경우 콘텐츠의 가로 세로 비율을 변경하여 콘텐츠 크기에 맞게 콘텐츠 크기를 조정하는 옵션이다.

  • 보기좋게 code와 storyboard를 같이 펼쳐두고 설명해보겠습니다.
  • .scaleToFill

  • scaleToFill은 원본 이미지의 크기가 어떻든 설명과 같이 내가 지정한 ImageView의 크기에 맞게 가로 세로 비율을 조정하고 있습니다.
  • 단순히 현재 케이스만 봐서는 이미지의 변화형태가 안 와닿을 수 있으니 다음 케이스를 보겠습니다.

 

ScaleAspectFit

The option to scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
가로 세로 비율을 유지하여 보기 크기에 맞게 내용을 확장하는 옵션입니다. 뷰 경계의 나머지 영역은 투명합니다.

  • .scaleAspectFit

  • scaleAspectFit은 원본 이미지의 비율을 유지한채로 이미지의 모든 내용이 내가 설정한 ImageView에 담기기때문에 이미지로 표현되지 않는 부분은 투명하게 표현됩니다.
    • 쉽게 설명하면 사용자가 설정한 ImageView 크기에 이미지가 표현되는 것보다 이미지의 모든 내용을 보여주는 것이 더 중요하다고 볼 수 있습니다.
  • 어느정도 차이가 느껴지시나요?
  • 그렇다면 마지막 세번째 케이스를 알아보겠습니다!

 

ScaleAspectFill

The option to scale the content to fill the size of the view. Some portion of the content may be clipped to fill the view’s bounds.
보기 크기를 채우도록 내용을 확장하는 옵션입니다. 보기의 경계를 채우기 위해 내용의 일부가 잘릴 수 있습니다.

  • .scaleAspectFill

  • scaleAspectFill은 이미지 원본의 내용보다 사용자가 설정한 ImageView의 크기에 맞게 채우는 것이 더 중요하여 원본 이미지 내용이 잘리게 됩니다.

 

3가지 케이스를 확인해보시면서 차이를 느끼시고 이해하시면 좋을 것 같습니다! ㅎㅎ오늘은 UIImageView를 사용할 때 많이 접하게되고 사용하게되는 contentMode에 대해 알아보았습니다.

 

감사합니다!

 

참고

https://developer.apple.com/documentation/uikit/uiview/1622619-contentmode/

https://m.blog.naver.com/kch8246/221028987869