UIImageView 문서 해석하기

apple 공식문서 해석입니다 (2022.04.06)

초짜라 틀리거나 오역한 부분이 많을 수 있습니다

 

UIImageView

 

인터페이스에 하나 또는 연속된 애니메이션 이미지를 표현하는데 사용하는 클래스

 

 

 

선언부

 

@MainActor class UIImageView : UIView

 

 

개요

 

이미지를 효율적으로 표현하기 위해 UIImage 오브젝트를 사용할 수 있습니다

예를들어 UIImageView 클래스로 JPEG, PNG같은 표준이미지파일을 표시하고 할 수 있습니다

코드를 직접짜거나 스토리보드파일에서 이미지뷰를 구성하는 이미지를 수정할 수 있으며 실행중에도 변경이 가능합니다

이미지를 움직이게 하려면 현재 클래스의 메서드로 애니메이션을 시작/중지시킬 수 있습니다

 

 

 

이미지 크기는 어떻게 조절되는가

 

이미지뷰가 표현되는 것은 contentMode 프로퍼티와 이미지 자체의 설정(구성)으로 결정됩니다

사용할 이미지는 그 크기와 이미지뷰의 치수가 정확히 일치하는 것이 가장 좋지만 이미지뷰의 크기에 딱 맞추게 하거나 일부에만 맞게 조절할 수 있습니다. 이미지뷰의 크기가 변경되면 이미지의 크기도 자동으로 조정됩니다

 

cap insets을 지정하지 않은 이미지의 경우, 이미지뷰의 contentMode 프로퍼티에 의해해서만 결정됩니다

UIView .ContentMode.scaleAspectFit 과 scaleAspectFill 모드는 이미지의 가로세로비율을 유지하며 이미지뷰에 딱 맞추거나 넘치게 채웁니다

scaletoFill은 이미지 비율을 무시한채 이미지뷰에 딱 맞추게 되어 이미지가 왜곡될 수 있습니다

나머지 contentMode는 이미지 크기를 바꾸지 않고 적절한 위치에 이미지를 배치하는 방식입니다

 

cap insets을 지정한 resiazeable이미지의 경우, 최종적으로 나타나는 이미지에 영향을 줍니다

특히, cap insets는 이미지의 어느 부분을 어느방향으로 조절할지 정의합니다

UIImage의 resizeableImage(withCapInsets:resizingMode:)메서드를 활용해 크기조절이 가능한 이미지를 생성할 수 있습니다

이 타입의 이미지를 사용할 땐 일반적으로 UIView.ContentMode.scaleToFill로 설정해 이미지가 적절한 위치에서 늘어나고 이미지뷰의 경계를 채우도록 합니다

 

 

 

이미지의 최종 투명도 결정하기

 

이미지는 이미지뷰의 background와 합성된 후 나머지 창에 합성됩니다

이미지의 모든 투명도를 통해 이미지뷰의 background가 표시됩니다

마찬가지로 이미지의 backbround의 추가 투명도는 이미지뷰의 투명도와 UIImage객체의 투명도에 따라 다릅니다

이미지자체의 투명도와 이미지뷰의 투명도 모두 있는 경우, 이미지 뷰는 alpha blending을 이용해 두 투명도를 결합합니다

- 이미지는 이미지뷰의 background와 합성됩니다

- isOpaque 프로퍼티가 true일 때, 이미지의 픽셀은 이미지뷰의 backgroud color 위에 합성됩니다

- isOpaque 프로퍼티가 false일 때, 각픽셀의 alpha값은 이미지뷰의 alpha값과 곱한 결과값이 실제 투명도 값이 됩니다

만약 이미지에 alpha채널이 없다면 각픽셀의 alpha값은 1.0으로 가정합니다

 

-중요-

불투명하지 않은 이미지의 알파채널과 이미지뷰의 알파채널을 합성하는것은 높은 계산비용이 발생됩니다

Core Animation의 shadows를 사용한다면 성능에 더 높은 영향을 끼칩니다

그림자의 모양은 뷰의 내용물을 기반으로 동적으로 계산되기 때문입니다

알파채널을 가진 이미지(혹은 이미지뷰)를 의도적으로 사용한게 아니라면 isOpaque 프로퍼티의 값을 true로 두어 성능을 향상시켜야 합니다. 최적화에 대한 더 많은 팁은 00을 참고

 

 

 

연속된 이미지 움직이기

 

이미지뷰는 연속된 이미지를 저장할 수 있고 전체 또는 일부만 동작하게 할 수 있습니다.

UIImage 배열에 이미지를 지정하고 animationImages 프로퍼티에 할당합니다

할당되면, 이 클래스의 메서드, 클래스를 통해 애니메이션의 타이밍, 시작, 정치시킬 수 있습니다

 

-정보-

AnimatedImage(with:duration:)메서드를 사용해 연속된 각 이미지로 독립된? UIImage객체를 구성할 수 있습니다

그렇게 하면 animationImages 프로퍼티에 개별 이미지를 할당한것과 같은 결과가 나타납니다

 

연속된 이미지를 표현하려면 다음의 팁을 고려할것 :

- 시퀀스에 존재하는 모든 이미지의 크기는 같아야 함 

 크기조절이 필요할 때, 이미지뷰는 시퀀스의 각 이미지를 개별적으로 조정합니다. 만약 이미지들의 사이즈가 다를경우 원하지 않은 스케일링 결과가 나타날 수 있습니다

 

- 시퀀스에 존재하는 모든 이미지는 동일한 scale factor 이어야 함

각 이미지의 scale 프로퍼티는 같은 값을 포함하는지 확인하십시오?

 

 

터치 이벤트에 응답하기

 

이미지뷰는 기본적으로 유저이벤트를 무시합니다. 일반적으로 인터페이스 속 컨텐츠를 비주얼적으로 표현할때 많이 사용하기 때문입니다. 만약 이미지뷰로 유저와 상호작용 싶다면 isUserInteractionEnabled 프로퍼티를 true로 수정해야 합니다. 그러고 난 뒤, 제스처인식기를 붙이는 등 다양한 이벤트를 핸들링할 수 있습니다

 

 

 

성능향상을 위한 팁

 

이미지크기를 조절하고 alpha값을 blending 하는 높은 상대적으로 연산비용이 비싸 앱의 성능에 많은 영향을 끼칠 수 있습니다. 이미지 뷰 코드의 성능을 최대화 화기위해서 아래의 팁을 고려하십시오.:

 

- 자주 사용하는 이미지는 크기가 조정된 버전을 캐시

자주 축소시켜야 하는 큰 이미지가 자주 표시될 것으로 예상되는 경우, 축소한 이미지를 미리 만들어 캐시에 저장하는 것이 좋습니다. 각 이미지 크기를 조정할 필요가 줄어듭니다. 

 

- 이미지뷰의 크기에 가까운 이미지 사용

큰 이미지를 이미지뷰에 할당하는것 대신, 이미지뷰의 크기와 일치하는 버전을 만들어보시오,

또는 이미지 크기를 조정하는 것 대신, UIImage.ResizingMode.tilte 옵션을 사용해 크기조절이 가능한 이미지 object를 만들 수 있습니다.

 

-가능한 이미지를 불투명하게 만들기

의도적으로 투명도가 있는 이미지를 사용하는 경우, isOpaque 프로퍼티 값이 true로 

 

소제목1

본문1

 

 

 

문서

 

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

Apple Developer Documentation