[Swift] Content Mode ( Scale To Fill / Aspect Fit / Aspect Fill )

안녕하세요🐶

빈지식 채우기의 비니🙋🏻‍♂️ 입니다.

 

오늘은 원본 이미지 크기 및 비율에 따라 어떻게 보여지는지에 대해 알아보도록 하겠습니다.

바로 가시죠!

---

1. 개요

우리는 UIImageView에 이미지를 넣을 때 어떤 비율로 넣을 지 고민할때가 많습니다.

이럴 때 View 의 ContentMode 를 사용하는데 자세한 속성을 한번 알아보도록 하겠습니다.

Fit : 이미지가 ImageView 에 꽉 차지 않고 비율에 따라 다르게 보여짐
Fill : 이미지가 Imageview 에 비율과 상관없이 꽉참

 

사용 될 원본 이미지는 아래와 같습니다.

---

2. Scale To Fill

Scale To Fill 의 결과

// iv 는 UIImageView 입니다.
iv.contentMode = .scaleToFill

• 원본 비율에 따라 그려지지 않고, UIImageView 안에 꽉 차게 크기와 비율이 맞춰집니다.
  • 이미지가 잘리지는 않지만 이미지 비율이 변경됩니다.

---

3. Aspect Fit

Aspect Fit 의 결과

// iv 는 UIImageView 입니다.
iv.contentMode = .scaleAspectFit

• 원본 비율에만 기준으로 사용되어 UIImageView 에 이미지가 채워집니다.
  • UIImageView 에 꽉 안차는 경우가 발생 ( 상단 빨간색 부분 )

---

4. Aspect Fill

Aspect Fill 의 결과

// iv 는 UIImageView 입니다.
iv.contentMode = .scaleAspectFill

• 원본 비율에 맞추고 UIImageView 에 빈 공간 없이 채워집니다.
  • 일부 이미지가 잘라질 수 있습니다.

---

5. 전체 결과

ContentMode 전체 결과

---

감사합니다.

---

참고

• https://developer.apple.com/documentation/swiftui/view/scaledtofill()
• https://developer.apple.com/documentation/tvml/aspectfill
• https://developer.apple.com/documentation/uikit/uiview/contentmode/scaleaspectfit