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

27 Nov 2023

swift

이미지 슬라이드쇼를 구현할 때, 이미지를 좌우로 무한히 이동시킬 수 있지만, 때로는 이미지의 좌우 이동을 제한하고 싶을 수도 있습니다. 예를 들어, 세 번째 이미지에서는 오른쪽으로만 이동할 수 있고, 첫 번째 이미지에서는 왼쪽으로만 이동할 수 있도록 한다거나, 일정 범위를 넘어가면 슬라이드쇼를 멈추도록 설정하는 등의 제한을 추가할 수 있습니다. 이번 글에서는 이미지 슬라이드쇼에서 이미지의 좌우 이동을 제한하는 방법에 대해 알아보겠습니다.

UIScrollView 사용하기:
- UIScrollView를 사용하여 이미지 슬라이드쇼를 구현합니다.
- UIScrollViewDelegate를 채택하여 UIScrollView의 동작을 제어합니다.
- scrollViewDidScroll() 메서드를 사용하여 현재 스크롤된 위치를 파악합니다.
- 스크롤 범위에 따라 이미지의 좌우 이동을 제한합니다.

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    
    @IBOutlet weak var scrollView: UIScrollView!
    // 이미지들을 담을 UIImageView 배열
    var imageViews: [UIImageView] = []
    // 현재 선택된 이미지의 인덱스
    var currentIndex: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UIImageView 배열에 이미지들 추가
        imageViews.append(UIImageView(image: UIImage(named: "image1")))
        imageViews.append(UIImageView(image: UIImage(named: "image2")))
        imageViews.append(UIImageView(image: UIImage(named: "image3")))
        
        // UIScrollView 설정
        scrollView.delegate = self
        scrollView.isPagingEnabled = true // 페이지 단위로 스크롤 가능하도록 설정
        scrollView.contentSize = CGSize(width: scrollView.frame.width * CGFloat(imageViews.count), height: scrollView.frame.height)
        
        // 이미지들을 UIScrollView에 추가
        for (index, imageView) in imageViews.enumerated() {
            imageView.frame = CGRect(x: scrollView.frame.width * CGFloat(index), y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
            scrollView.addSubview(imageView)
        }
        
        // 시작 이미지 설정
        scrollView.contentOffset = CGPoint(x: scrollView.frame.width * CGFloat(currentIndex), y: 0)
    }
    
    // 스크롤 뷰의 스크롤 이벤트 처리
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let x = scrollView.contentOffset.x
        currentIndex = Int(x / scrollView.frame.width)
        
        // 이미지 이동 제한
        if currentIndex >= imageViews.count - 1 {
            // 오른쪽으로 이동 제한
            scrollView.contentOffset = CGPoint(x: scrollView.frame.width * CGFloat(imageViews.count - 1), y: 0)
        } else if currentIndex <= 0 {
            // 왼쪽으로 이동 제한
            scrollView.contentOffset = CGPoint(x: 0, y: 0)
        }
    }
}

위의 코드에서 주요한 부분은 scrollViewDidScroll() 메서드입니다. 이 메서드는 UIScrollView의 스크롤 이벤트가 발생할 때마다 호출되며, 스크롤된 위치를 파악한 후 이미지의 좌우 이동을 제한하는 로직을 구현합니다. 현재 스크롤된 위치를 나타내는 x 값에 따라 이미지의 인덱스를 결정한 후, 이동을 제한하도록 설정합니다. 스크롤이 제한된 후에는 scrollView.contentOffset를 사용하여 스크롤된 위치를 조정합니다.

이와 같이 UIScrollView와 UIScrollViewDelegate를 사용하여 이미지 슬라이드쇼에서 이미지의 좌우 이동을 제한할 수 있습니다. 필요에 따라 스크롤 범위를 조정하거나 스크롤 이동을 제한하는 로직을 추가로 구현할 수도 있습니다. 문제 해결을 위해 상황에 맞게 코드를 수정하여 사용해보세요.

참고 자료