[iOS] Human Interface Guidelines - Views - Image Views 정리

안녕하세요 Hani입니다.

이번에는 HIG의 Views - Image Views를 알아볼 거예요. ☺️

 

 

 

Image View는 투명하거나 불투명한 배경 위에 단일 이미지나 gif 같은 연속적인 이미지들을 보여주는 뷰에요.

 

Image View의 안에서 이미지를 늘리거나 배율을 바꿀 수도, 특정 위치에 고정할 수도 있어용 

하지만 기본적으로 Interactive하지는 않습니다.

 

요런 Image View를 사용할 때 지켜야 할 점은 무엇일까욥 🧐

If possible, make sure all images in an animated sequence are consistently sized.

애니메이션이 있는 이미지들을 보여줄 때는 각 이미지들이 동일한 사이즈를 갖도록 해주는 편이 좋습니다.

 

 

왱??

 

 

연속적인 이미지들의 scaling이 요구될 때

UIImageView는 각 UIImage의 content scale factor를 이용하여 각각 개별적으로 scaling을 해요. 🧐

 

여기서 content scale factor는 1.0, 2.0 이런거에욥

이미지의 Point가 디바이스의 어느 Pixel에 매핑될 건지 결정하는 녀석입니당.

(content scale factor는 UIImage의 scale이라는 프로퍼티입니다.)

 

예를 들면 50x50 크기의 이미지가 scale factor 2.0이면

디바이스에서 100x100 픽셀로 나타나게 되는 거예요. 😎

 

그러니까 이미지가 디바이스에 매핑되는 요인은

이미지의 크기 + 이미지의 content scale factor 인거죵

 

 

애니메이션 이미지들 사이의 모든 사이즈와 scale이 일치하지 않으면

원하지 않는 scaling 결과를 낳게 될 수 있기 때문에

미리 사이즈와 scale을 동일하게 만들도록 하자는 겁니다 ☺️

 

---

References

https://developer.apple.com/design/human-interface-guidelines/ios/views/image-views/

https://developer.apple.com/documentation/uikit/uiimageview

https://developer.apple.com/documentation/uikit/uiimage/1624110-scale