[swift] 스위프트 이미지슬라이드쇼 소개

27 Nov 2023

swift

이미지 슬라이드쇼는 웹 사이트나 모바일 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자에게 여러 개의 이미지를 연속적으로 보여주면서 정보를 전달하거나 시각적인 효과를 주는 데 사용됩니다. 스위프트 언어를 사용하여 이미지 슬라이드쇼를 구현하는 방법을 알아보겠습니다.

이미지 슬라이드쇼 구현하기

이미지 슬라이드쇼를 구현하기 위해서는 UIScrollView와 UIImageView를 사용해야 합니다. 스크롤 뷰는 이미지를 슬라이드하는 데 사용하고, 이미지 뷰는 각 이미지를 표시하는 데 사용됩니다.

import UIKit

class ImageSlideshowViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    
    var images: [UIImage] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 슬라이드할 이미지 추가
        images.append(UIImage(named: "image1"))
        images.append(UIImage(named: "image2"))
        images.append(UIImage(named: "image3"))
        
        // 스크롤 뷰 설정
        scrollView.isPagingEnabled = true
        scrollView.contentSize = CGSize(width: scrollView.frame.width * CGFloat(images.count), height: scrollView.frame.height)
        
        for (index, image) in images.enumerated() {
            let imageView = UIImageView(image: image)
            imageView.frame = CGRect(x: scrollView.frame.width * CGFloat(index), y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
            scrollView.addSubview(imageView)
        }
    }
}

위의 코드는 스토리보드에서 scrollView와 연결된 아울렛 변수를 가지고 있습니다. viewDidLoad에서는 이미지를 추가하고 스크롤 뷰를 설정합니다. images 배열에는 슬라이드할 이미지들을 추가합니다. 그리고 UIScrollView의 isPagingEnabled 속성을 true로 설정하여 페이지별로 슬라이드할 수 있게하고, contentSize를 이미지 개수에 맞게 설정합니다. 마지막으로 for문을 사용하여 이미지를 UIImageView로 생성하고 스크롤 뷰에 추가합니다.

추가 기능 구현하기

이미지 슬라이드쇼에 각 이미지마다 다른 효과나 자동 슬라이드 기능을 추가할 수 있습니다. 예를 들어, 이미지를 자동으로 슬라이드하고 일시 정지할 수 있는 버튼을 추가해보겠습니다.

class ImageSlideshowViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var playPauseButton: UIButton!
    
    var images: [UIImage] = []
    var currentIndex = 0
    var timer: Timer?
    var isPlaying = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 슬라이드할 이미지 추가
        images.append(UIImage(named: "image1"))
        images.append(UIImage(named: "image2"))
        images.append(UIImage(named: "image3"))
        
        // 스크롤 뷰 설정
        scrollView.isPagingEnabled = true
        scrollView.contentSize = CGSize(width: scrollView.frame.width * CGFloat(images.count), height: scrollView.frame.height)
        
        for (index, image) in images.enumerated() {
            let imageView = UIImageView(image: image)
            imageView.frame = CGRect(x: scrollView.frame.width * CGFloat(index), y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
            scrollView.addSubview(imageView)
        }
        
        // 자동 슬라이드 타이머 설정
        timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(autoSlide), userInfo: nil, repeats: true)
        
        // 버튼 동작 설정
        playPauseButton.addTarget(self, action: #selector(playPauseButtonTapped), for: .touchUpInside)
    }
    
    @objc func autoSlide() {
        if currentIndex < images.count - 1 {
            currentIndex += 1
        } else {
            currentIndex = 0
        }
        
        let offsetX = scrollView.frame.width * CGFloat(currentIndex)
        scrollView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)
    }
    
    @objc func playPauseButtonTapped() {
        if isPlaying {
            timer?.invalidate()
            isPlaying = false
            playPauseButton.setTitle("재생", for: .normal)
        } else {
            timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(autoSlide), userInfo: nil, repeats: true)
            isPlaying = true
            playPauseButton.setTitle("일시 정지", for: .normal)
        }
    }
}

위의 코드에서는 currentIndex 변수를 사용하여 현재 보여지고 있는 이미지의 인덱스를 가지고 있습니다. autoSlide 함수는 타이머에 의해 일정 시간마다 호출되며, 현재 인덱스를 증가시키거나 처음으로 돌아갑니다. 그리고 UIScrollView의 setContentOffset 함수를 사용하여 화면을 슬라이드합니다.

playPauseButtonTapped 함수는 재생/일시 정지 버튼을 터치할 때 호출됩니다. 재생 중일 때는 타이머를 정지하고, 일시 정지 상태에서는 타이머를 다시 시작합니다. 버튼의 타이틀도 상태에 따라 변경됩니다.

이와 같은 방법으로 스위프트를 사용하여 이미지 슬라이드쇼를 구현할 수 있습니다.

이미지 슬라이드쇼 구현하기

추가 기능 구현하기

참고 자료