[swift] 이미지 슬라이드쇼에서 이미지 크기 조절하기

27 Nov 2023

swift

이미지 슬라이드쇼는 많은 iOS 앱에서 화면을 유용하게 활용하는 기능입니다. 하지만 이미지의 크기가 다양하다면, 슬라이드쇼의 일관된 디자인을 유지하기 어려울 수 있습니다. 이런 경우 이미지 크기를 조절하여 일관성 있는 슬라이드쇼를 만들 수 있습니다. 이번 글에서는 Swift에서 이미지 크기를 조절하는 방법에 대해 알아보겠습니다.

이미지 슬라이드쇼 화면 설정

먼저, 슬라이드쇼에 사용할 이미지가 있는 화면을 설정해야 합니다. 이 예제에서는 UIImageView를 사용하여 이미지를 표시합니다.

import UIKit

class SlideShowViewController: UIViewController {
    
    // 이미지를 표시할 UIImageView
    let imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        imageView.contentMode = .scaleAspectFit
        imageView.center = view.center
        view.addSubview(imageView)
        
        // 이미지 슬라이드쇼 시작
        startSlideShow()
    }
    
    // 슬라이드쇼 시작 메서드
    func startSlideShow() {
        // 이미지 URL 배열
        let imageUrls = [URL(string: "https://example.com/image1.jpg"),
                         URL(string: "https://example.com/image2.jpg"),
                         URL(string: "https://example.com/image3.jpg")]
        
        // 이미지를 비동기적으로 다운로드하고 표시
        DispatchQueue.global().async {
            for url in imageUrls {
                if let data = try? Data(contentsOf: url),
                   let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self.imageView.image = image
                    }
                    // 일정 시간마다 이미지 변경
                    Thread.sleep(forTimeInterval: 2)
                }
            }
        }
    }
}

위의 코드에서 imageView.frame을 통해 이미지뷰의 크기를 설정할 수 있습니다. 현재 예제에서는 가로 200, 세로 200의 크기로 이미지뷰를 설정하였습니다. 그리고 imageView.contentMode를 .scaleAspectFit으로 설정하여 이미지를 가로나 세로에 맞게 조절하여 표시합니다.

이미지 크기 조절하기

이미지 크기를 조절하기 위해서는 UIImageView나 UIImage 객체의 frame 속성을 사용할 수 있습니다.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    adjustImageSize()
}

func adjustImageSize() {
    guard let image = imageView.image else {
        return
    }
    
    let maxWidth: CGFloat = 300
    let maxHeight: CGFloat = 300
    
    var newSize = image.size
    
    if newSize.width > maxWidth || newSize.height > maxHeight {
        let aspectRatio = newSize.width / newSize.height
        
        if newSize.width > maxWidth {
            newSize.width = maxWidth
            newSize.height = newSize.width / aspectRatio
        }
        
        if newSize.height > maxHeight {
            newSize.height = maxHeight
            newSize.width = newSize.height * aspectRatio
        }
    }
    
    imageView.frame.size = newSize
    imageView.center = view.center
}

adjustImageSize() 메서드에서는 현재 이미지뷰에 표시되는 이미지의 크기를 조절하는 로직을 구현했습니다.

먼저 guard 문을 사용하여 이미지가 존재하는 경우에만 크기 조절을 진행합니다. maxWidth와 maxHeight를 설정하여 이미지의 최대 크기를 제한합니다.

이후 이미지가 최대 크기보다 큰 경우에만 이미지 크기를 조절합니다. 최대 크기보다 작은 이미지는 그대로 유지됩니다.

imageView.frame.size를 통해 이미지뷰의 크기를 수정하고, imageView.center를 통해 이미지뷰를 중앙에 위치시킵니다.

결론

위의 예제를 통해 이미지 슬라이드쇼에서 이미지의 크기 조절하는 방법을 알아보았습니다. 이미지의 크기를 조절하여 슬라이드쇼의 디자인을 일관되게 유지할 수 있습니다. Swift에서 이미지를 조절하는 방법에 대해 잘 활용하면, 앱의 사용자 경험을 향상시킬 수 있습니다.

참고자료:

Apple Developer Documentation