UIImageView

Panther·2021년 9월 1일

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

"An object that displays a single image or a sequence of animated images in your interface."

인터페이스에서 단일 이미지 혹은 애니메이션 처리된 이미지의 연속을 표시하는 객체입니다.

Declaration

@MainActor class UIImageView : UIView

Overview

이미지 뷰는 UIImage 객체를 사용해서 구체화될 수 있는 모든 이미지를 효율적으로 그려줄 수 있도록 해줍니다. 예를 들어 JEPG, PNG 파일 같은 많은 표준 이미지 파일의 컨텐츠를 표시하기 위해 UIImageView 클래스를 사용할 수 있습니다. 코드 작성 혹은 스토리보드 파일로 이미지 뷰를 설정할 수 있으며, 런타임에 표시하고 있는 이미지를 변경할 수도 있습니다. 애니메이션 처리된 이미지의 경우 애니메이션을 시작, 중지하기 위해 이 클래스의 메소드를 사용할 수도 있고, 다른 애니메이션 파라미터를 구체화할 수도 있습니다.

Figure 1 Image view

Understanding How Images Are Scaled

이미지 뷰는 이미지를 어떻게 표시할 것인지 결정하기 위해 contentMode를 사용할 수 있고, 이미지 자체의 설정을 사용할 수 있습니다. 이미지 뷰의 차원에 정확하게 일치하는 차원을 갖는 이미지를 구체화하는 것이 최선이지만, 이미지 뷰는 전체 혹은 사용 가능한 공간의 부분을 채울 수 있도록 이미지를 스케일링할 수 있습니다. 이미지 뷰 자체의 크기를 변경하는 경우 필요에 따라 이미지를 자동으로 스케일링합니다.

캡 인셋이 없는 이미지의 경우 이미지의 표시는 이미지 뷰의 contentMode 속성에 의해 결정됩니다. UIView.ContentMode.scaleAspectFit과 UIView.ContentMode.scaleAspectFill 모드는 이미지의 기존 aspect ratio를 유지하면서 공간에 맞추도록 하거나 채우기 위해 이미지를 스케일링합니다. UIView.ContentMode.scaleToFill 값은 이미지가 왜곡되서 나타날 수도 있는 채로 이미지의 기존 aspect ration에 관계없이 이미지를 스케일링합니다. 다른 컨텐트 모드는 스케일링 없이 이미지 뷰의 bounds 내에서 이미지를 적절하게 위치시킬 수 있도록 합니다.

캡 인셋을 갖는 크기 조절 가능한 이미지의 경우 인셋은 이미지의 최종 모양에 영향을 미칩니다. 구체적으로 캡 인셋은 이미지의 어떤 부분이 스케일링될 수 있는지와 어떤 방향으로 조정되어야 하는지를 결정합니다. UIImage의 resizableImage(withCapInsets:resizingMode:) 메소드를 사용해 확장하는 크기 조절 가능한 이미지를 생성할 수 있습니다. 이 타입의 이미지를 사용할 때 이미지 뷰의 컨텐트 모드는 보통 UIView.ContentMode.scaleToFill을 설정해서 이미지가 적합한 위치로 확장할 수 있도록 하고 이미지 뷰의 bounds를 채울 수 있도록 합니다.

이미지 준비에 대한 팁은 Debugging Issues with Your Image View를 보시기 바랍니다. 캡 인셋을 갖는 크기 조절 가능한 이미지에 대한 정보는 UIImage를 보시기 바랍니다.

Debugging Issues with Your Image View는 이 글의 아래에 나옵니다.

UIImage
https://developer.apple.com/documentation/uikit/uiimage
https://velog.io/@panther222128/UIImage

Determining the Final Transparency of the Image

이미지는 이미지 뷰의 백그라운드에 합성되며, 이후 윈도우의 나머지 부분에 합성됩니다. 이미지에서 모든 투명도는 이미지 뷰의 백그라운드가 투과되어 보일 수 있도록 합니다. 유사하게 이미지의 백그라운드에 있는 투명도는 이미지 뷰의 투명도 및 UIImage 객체의 투명도에 따라 달라집니다. 이미지 뷰와 이미지 모두 투명도를 갖는 경우 이미지 뷰는 두 가지를 조합하기 위한 알파 블렌딩을 사용합니다.

이미지는 이미지 뷰의 백그라운드에 합성됩니다.
이미지 뷰의 isOpaque 속성이 true이면 이미지의 픽셀은 이미지 뷰의 백그라운드 색상의 상단에 합성되고, 이미지 뷰의 알파 속성은 무시됩니다.
이미지 뷰의 isOpaque 속성이 false이면, 각 픽셀의 알파 값은 이미지 뷰의 알파 값에 곱해지며, 최종 값은 해당 픽셀에 대한 실제 투명도 값으 됩니다. 이미지가 알파 채널을 갖지 않으면 각 픽셀의 알파 값은 1.0으로 가정합니다.

Important
이미지의 알파 채널과 opaque가 없는 이미지 뷰의 알파 채널을 합성하는 것은 연산에서 비용이 높습니다. 코어 애니메이션 그림자를 사용하는 경우 성능 영향을 더 커지며, 이는 그림자의 모양이 뷰의 컨텐츠에 기반하게 되고 동적으로 연산되어야 하기 때문입니다. 이미지의 알파 채널 혹은 이미지 뷰의 알파 채널을 사용하는 것이 의도적인 것이 아니라면 성능 향상을 위해 isOpague 속성을 true로 설정하시기 바랍니다. 추가적인 최적화 팁은 Tips for Improving Performance를 보시기 바랍니다.

Tips for Improving Performance는 이 글의 아래에 나옵니다.

Animating a Sequence of Images

이미지 뷰는 애니메이션 처리된 이미지 시쿼스를 저장할 수 있고, 해당 시퀀스 전체 혹은 부분을 재생할 수 있습니다. UIImage 객체의 배열로 이미지 시퀀스를 구체화할 수 있으며, 이 시퀀스를 animationImages 속성에 할당할 수 있습니다. 한 번 할덩되면 애니메이션 타이밍 설정과 애니메이션 시작 및 중지를 위해 이 클래스의 메소드 및 속성을 사용할 수 있습니다.

Note
animatedImage(with:duration:) 메소드를 사용해서 개별 이미지의 시퀀스로부터 단일 UIImage 객체를 구성할 수도 있습니다. 이렇게 하는 것은 animationImages 속성에 개별 이미지를 할당했었던 것과 같은 결과를 보여줍니다.

애니메이션 처리된 이미지의 시퀀스를 표시할 때 아래 팁을 고려하시기 바랍니다.

시퀀스에서 모든 이미지는 같은 이미지를 가져야 합니다. 스케일링이 필요한 경우 이미지 뷰는 시퀀스에서 각각의 이미지를 스케일링합니다. 이미지가 다른 크기를 갖는 경우 스케일링은 원하는 결과를 보여주지 않을 것입니다.
시퀀스에서 모든 이미지는 같은 컨텐트 스케일 요소를 가져야 합니다. 각 이미지의 스케일 속성이 같은 값을 포함하도록 해야 합니다.

Responding to Touch Events

이미지 뷰는 기본값으로 사용자 이벤트를 무시합니다. 인터페이스에서 시각적 컨텐트를 표시하기 위해 오직 이미지 뷰만을 사용하게 됩니다. 사용자 상호작용 역시 처리할 수 있는 이미지 뷰를 원한다면, isUserInteractionEnabled 속성 값을 true로 변경해야 합니다. 이후 제스쳐 리코그나이저를 추가하거나 터치 이벤트 혹은 다른 사용자 이벤트에 응답하기 위한 이벤트 처리 테크닉을 사용해야 합니다.

이벤트 처리에 대한 더 많은 정보는 Event Handling Guide for UIKit Apps를 보시기 바랍니다.

Event Handling Guide for UIKit Apps의 링크는 UIKit 링크로 연결됩니다.

Event Handling Guide for UIKit Apps
https://developer.apple.com/documentation/uikit/#//apple_ref/doc/uid/TP40009541
https://velog.io/@panther222128/UIKit

Tips for Improving Performance

이미지 스케일링과 알파 블렌딩은 앱의 성능에 영향을 미칠 수 있는 고비용 작업들입니다. 이미지 뷰 코드의 성능을 최대화하려면 아래 팁을 고려하시기 바랍니다.

자주 사용되는 이미지의 스케일링된 버전을 캐시하시기 바랍니다. 스케일이 작은 썸네일 뷰에 자주 표시되는 큰 이미지를 원하는 경우 미리 스케일이 작은 이미지를 생성하는 것과 썸네일 캐시로 저장하는 것을 고려하시기 바랍니다. 그렇게 하는 것은 각각의 이미지 뷰를 스케일링할 필요를 경감시켜줍니다.
크기가 이미지 뷰의 크기에 가까운 이미지를 사용하시기 바랍니다. 큰 이미지를 이미지 뷰에 할당하는 것보다 이미지 뷰의 현재 크기와 일치하는 스케일링된 버전을 생성하시기 바랍니다. UIImage.ResizingMode.tile 옵션을 사용해서 크기 조절이 가능한 이미지 객체를 생성할 수도 있습니다. 이는 이미지를 스케일링하는 것 대신 타일로 표현합니다.
이미지 뷰 opaque를 가능한 사용하시기 바랍니다. 의도적으로 투명도(예를 들어 UI 요소를 그리는 것)를 포함하는 이미지를 사용하는 것이 아니라면 이미지 뷰의 isOpaque 속성을 true로 설정하시기 바랍니다. 투명도를 확인하는 방법에 대한 정보는 Determining the Final Transparency of the Image를 보시기 바랍니다.

Determining the Final Transparency of the Image는 이 글의 아래 부분에 나옵니다.

Debugging Issues with Your Image View

이미지 뷰가 기대한 것을 표시하지 않는다면 문제 진단을 돕는 아래 팁을 사용하시기 바랍니다.

정확한 메소드를 사용해서 이미지를 로드해야 합니다. 에셋 카탈로그 혹은 앱 번들로부터 이미지를 로드하기 위해 UIImage의 init(named:in:compatibleWith:) 메소드를 사용해야 합니다. 앱 번들 밖의 이미지는 imageWithContentsOfFile: 메소드를 사용해야 합니다.
커스텀 드로잉에 이미지 뷰를 사용하지 않아야 합니다. UIImageView 클래스는 draw(_:) method 메소드를 사용해 컨텐트를 그리지 않습니다. 이미지 뷰는 이미지 제공에만 사양하시기 바랍니다. 커스텀 드로잉이 이미지에 관여하도록 하려면 UIView를 직접 서브클래싱하고 여기에 이미지를 그리시기 바랍니다.

Interface Builder Attributes

테이블 1은 인터페이스 빌더에서 이미지 뷰에 대해 설정하는 특성을 리스트로 보여주고 있습니다.

Table 1 Image view attributes

Attribute	Discussion
`Image`	표시를 위한 이미지입니다. Xcode 프로젝트에서 이미지를 구체화할 수 있으며, 이는 단일 이미지 및 이미지 에셋에 있는 이미지를 포함합니다. 이 특성을 코드 작성으로 설정하려면 `image` 혹은 `animationImages` 속성을 사용해야 합니다.
`Highlighted`	이미지가 강조될 때 표시하기 위한 이미지입니다. 이 특성을 코드 작성으로 설정하려면 `highlightedImage` 혹은 `highlightedAnimationImages` 속성을 사용해야 합니다.
`State`	이미지의 초기 상태입니다. 강조된 이미지 표시를 위해 이 특성을 사용하시기 바랍니다. 이 특성을 코드 작성으로 설정하려면 `isHighlighted` 속성을 사용해야 합니다.

Internationalization

이미지 뷰의 internalization은 뷰가 앱 번들로부터 로드된 정적 이미지만을 표시하는 경우 자동으로 작동합니다. 코드 작성으로 이미지를 로드하는 경우 적어도 정확한 이미지 로딩이 일부분 필요합니다.

앱 번들에 잇는 리소스의 경우 특성 인스펙터에서 이름을 구체화하거나 각 이미지의 로컬화된 버전을 가져오기 위해 UIImage에서 init(named:) 클래스 메소들르 호출해서 이미지를 로드할 수 있습니다.
앱 번들에 있는 이미지가 아닌 경우 코드는 아래 내용을 수행해야 합니다.
1. URL을 포함하는 로컬화된 스트링을 제공하는 방법처럼 앱에 로드하기 위한 이미지를 결정해야 합니다.
2. 정확한 이미지에 대한 URL 혹은 데이터를 적합한 UIImage 클래스 메소드에 전달해서 해당 이미지를 로드해야 하며, imageWithData: 혹은 imageWithContentsOfFile: 클래스 메소드가 있습니다.

Note
스크린 측정항목과 레이아웃은 언어 및 로케일에 따라 변경될 수 있으며, 특히 이미지의 internalization된 버전이 다른 차원을 갖는 경우 그렇습니다. 가능하다면 이미지 리소스의 internalization된 버전에서 차원이 다른 경우를 최소화해야 합니다.

더 많은 정보는 Internationalization and Localization Guide를 보시기 바랍니다.

Internationalization and Localization Guide
https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/Introduction/Introduction.html#//apple_ref/doc/uid/10000171i

Accessibility

이미지 뷰는 기본값으로 접근성이 있습니다. 이미지 뷰에 대한 기본값 접근성 특성은 이미지 및 사용자 상호작용 활성화입니다.

iOS 컨트롤을 접근 가능하게 만드는 것에 대한 더 많은 정보는 UIControl의 접근성 정보를 보시기 바랍니다. 인터페이스를 접근 가능하게 만드는 일반적인 정보는 Accessibility Programming Guide for iOS를 보시기 바랍니다.

UIControl
https://developer.apple.com/documentation/uikit/uicontrol
https://velog.io/@panther222128/UIControl

Accessibility Programming Guide for iOS
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008785

State Preservation

값을 이미지 뷰의 restorationIdentifier 속성에 할당하는 경우 표시되는 이미지의 프레임 보존을 시도합니다. 구체적으로 클래스는 뷰의 bounds, center, transform 속성을 보존하며, 기본 레이어의 anchorPoint 속성을 보존합니다. 복원 동안 이미지가 이전과 동일하게 나타날 수 있도록 이미지 뷰는 값들을 복원합니다. 상태 보존 및 복원 작동의 방법에 대한 정보는 App Programming Guide for iOS를 보시기 바랍니다.

App Programming Guide for iOS의 링크는 UIKit 링크로 연결됩니다.

App Programming Guide for iOS
https://developer.apple.com/documentation/uikit#//apple_ref/doc/uid/TP40007072
https://velog.io/@panther222128/UIKit

Topics

Configuring the Appearance of Symbol Images

Configuring and Displaying Symbol Images in Your UI

앱 택스트에 통합하는 스케일링 가능한 이미지를 생성하고, 해당 이미지의 모양을 동적으로 조정합니다.

https://developer.apple.com/documentation/uikit/uiimage/configuring_and_displaying_symbol_images_in_your_ui
https://velog.io/@panther222128/Configuring-and-Displaying-Symbol-Images-in-Your-UI