[swift] 이미지 슬라이드쇼에서 이미지 상하 이동 제한하기

27 Nov 2023

swift

이미지 슬라이드쇼는 사용자에게 멋진 시각적인 효과를 제공하는 인기있는 기능 중 하나입니다. 하지만 때로는 이미지가 너무 많이 상하로 이동하여 사용자에게 불편을 줄 수 있습니다. 이러한 경우 이미지의 상하 이동을 제한하는 방법을 알아보겠습니다.

1. UIScrollView를 사용하여 이미지 슬라이드쇼 만들기

이미지 슬라이드쇼를 만들기 위해 UIScrollView를 사용할 수 있습니다. UIScrollView는 스크롤 가능한 뷰를 제공하며, 이미지를 자연스럽게 슬라이딩할 수 있도록 합니다.

import UIKit

class ImageSlideShowViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    var imageViews = [UIImageView]()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 이미지 뷰 생성 및 스크롤 뷰에 추가
        for i in 0...4 {
            let image = UIImage(named: "image\(i)")
            let imageView = UIImageView(image: image)
            
            // 이미지 뷰 위치 설정
            imageView.frame.origin = CGPoint(x: 0, y: CGFloat(i) * scrollView.frame.size.height)
            
            // 스크롤 뷰에 이미지 뷰 추가
            scrollView.addSubview(imageView)
            imageViews.append(imageView)
        }
        
        // 스크롤 뷰 콘텐츠 사이즈 설정
        scrollView.contentSize = CGSize(width: scrollView.frame.size.width, height: scrollView.frame.size.height * CGFloat(imageViews.count))
    }
}

이 코드는 UIScrollView를 사용하여 이미지 슬라이드쇼를 만듭니다. 이미지 뷰를 생성하고 스크롤 뷰에 추가하며, 스크롤 뷰의 콘텐츠 사이즈를 설정하는 부분입니다.

2. 이미지 상하 이동 제한하기

이미지 슬라이드쇼에서 이미지의 상하 이동을 제한하기 위해 UIScrollViewDelegate를 사용할 수 있습니다. UIScrollViewDelegate는 스크롤 뷰의 동작을 관리하는 데 도움이 되는 여러 메서드를 제공합니다. 상하 이동 제한을 위해서는 scrollViewDidScroll(_:) 메서드를 사용할 수 있습니다.

extension ImageSlideShowViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let maxOffsetY = CGFloat(imageViews.count - 1) * scrollView.frame.size.height
        
        if scrollView.contentOffset.y < 0 {
            scrollView.contentOffset.y = 0
        } else if scrollView.contentOffset.y > maxOffsetY {
            scrollView.contentOffset.y = maxOffsetY
        }
    }
}

위의 코드는 scrollViewDidScroll(_:) 메서드를 사용하여 이미지의 상하 이동을 제한하는 부분입니다. 스크롤 뷰의 contentOffset.y 값이 0보다 작으면 0으로, maxOffsetY보다 크면 maxOffsetY로 설정하여 이미지의 상하 이동을 제한합니다.

3. 이미지 슬라이드쇼에 UIScrollViewDelegate 할당하기

이제 마지막으로 이미지 슬라이드쇼에 UIScrollViewDelegate를 할당해야 합니다. 이를 위해 viewDidLoad() 메서드에서 scrollView.delegate를 설정하면 됩니다.

override func viewDidLoad() {
    super.viewDidLoad()
    
    scrollView.delegate = self
    
    // 이미지 슬라이드쇼 설정 코드 생략
}

scrollView.delegate를 self로 설정하여 현재 뷰 컨트롤러가 UIScrollViewDelegate를 준수한다는 것을 알려줍니다.

이제 이미지 슬라이드쇼에서 이미지의 상하 이동이 제한될 것입니다. 사용자는 슬라이딩할 때 이미지가 너무 많이 이동하지 않아 더 나은 사용자 경험을 얻을 수 있게 됩니다.

참고 자료:

UIScrollView 클래스 문서: https://developer.apple.com/documentation/uikit/uiscrollview
UIScrollViewDelegate 프로토콜 문서: https://developer.apple.com/documentation/uikit/uiscrollviewdelegate