이미지 슬라이드쇼를 만들 때, 이미지가 화면에 꽉 차도록 표시하고 싶을 수 있습니다. 이번 글에서는 Swift 언어를 사용하여 이미지를 화면에 꽉 채우는 방법을 알아보겠습니다.
1. UIImageView의 Content Mode 설정
UIImageView의 Content Mode를 설정하여 이미지가 화면에 꽉 차는지 확인할 수 있습니다. 다음과 같이 UIImageView의 content mode를 .scaleAspectFill로 설정하면 이미지가 화면에 꽉 채워집니다.
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
위 코드에서 contentMode를 .scaleAspectFill로 설정하면 이미지가 비율을 유지하면서 가장 크게 화면을 채우도록 합니다. clipsToBounds를 true로 설정하면 이미지가 UIImageView의 경계를 넘어가지 않도록 자릅니다.
2. Autolayout 적용
Auto Layout을 이용해 이미지뷰를 화면에 꽉 채우도록 설정할 수 있습니다. 다음과 같이 이미지뷰를 슈퍼뷰와 모든 변환을 공유하도록 설정하고, 가로 및 세로 제약조건을 추가합니다.
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
3. 예외 처리
위 방법으로 이미지를 화면에 꽉 채웠을 때, 이미지의 가로세로 비율에 따라 잘리는 부분이 있을 수 있습니다. 이 경우, 이미지의 가로세로 비율을 유지한 채로 이미지뷰를 조정해야 합니다. 이를 위해 UIViewContentMode.scaleAspectFill과 함께 이미지뷰를 추가로 마스킹 처리 할 수도 있습니다.
let maskView = UIView()
maskView.backgroundColor = .black
maskView.translatesAutoresizingMaskIntoConstraints = false
imageView.addSubview(maskView)
maskView.leadingAnchor.constraint(equalTo: imageView.leadingAnchor).isActive = true
maskView.trailingAnchor.constraint(equalTo: imageView.trailingAnchor).isActive = true
maskView.topAnchor.constraint(equalTo: imageView.topAnchor).isActive = true
maskView.bottomAnchor.constraint(equalTo: imageView.bottomAnchor).isActive = true
imageView.mask = maskView
위 코드는 이미지뷰에 검은색 배경의 마스킹 뷰를 추가한 후, 마스크를 적용하는 방식입니다. 이를 통해 이미지 비율이 유지되면서 이미지뷰에 꽉 차도록 할 수 있습니다.
마무리
위의 방법들을 사용하면 이미지 슬라이드쇼에서 이미지를 화면에 꽉 채울 수 있습니다. UIImageView의 contentMode 속성과 Autolayout을 적절히 조합하여 이미지를 화면에 가득 채우도록 설정할 수 있습니다.
참고 자료: