[swift] 이미지 슬라이드쇼에서 이미지 스와이프 방향 반전하기

27 Nov 2023

swift

이미지 슬라이드쇼는 많은 iOS 앱에서 사용되는 일반적인 기능입니다. 사용자가 이미지를 스와이프하면 다음 이미지가 표시되는 것이 일반적인 방식입니다. 그러나 때로는 이미지 스와이프의 방향을 반전시켜야 할 때가 있습니다. 이 글에서는 Swift를 사용하여 이미지 스와이프 방향을 반전하는 방법을 알아보겠습니다.

이미지 슬라이드쇼 구성

먼저, 이미지 슬라이드쇼를 구현하기 위해 UICollectionView를 사용하여 이미지 리스트를 표시하는 뷰를 생성합니다. UICollectionViewDataSource와 UICollectionViewDelegate 프로토콜을 구현하여 이미지 데이터를 관리하고, 슬라이드쇼 동작을 처리합니다.

import UIKit

class ImageSlideshowViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    let images = [UIImage(named: "image1"), UIImage(named: "image2"), UIImage(named: "image3")]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        // 스와이프 방향 반전
        let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeGesture))
        swipeGesture.direction = .left
        collectionView.addGestureRecognizer(swipeGesture)
    }
    
    @objc func handleSwipeGesture() {
        let flowLayout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        flowLayout.scrollDirection = (flowLayout.scrollDirection == .left) ? .right : .left
        collectionView.reloadData()
    }
}

extension ImageSlideshowViewController: UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell
        cell.imageView.image = images[indexPath.item]
        return cell
    }
}

extension ImageSlideshowViewController: UICollectionViewDelegate {
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // 이미지 클릭 시 동작 구현
    }
}

위의 코드에서 스와이프 제스처를 처리하는 handleSwipeGesture 메서드에서 슬라이드 방향을 반전하고, collectionView.reloadData()를 호출하여 이미지를 다시 로드하도록 구현되어 있습니다.

이미지 슬라이드쇼 뷰 커스터마이징

위의 예제에서는 UICollectionView를 사용하여 이미지 슬라이드쇼를 구현하였습니다. 이미지 크기, 셀 간격, 각 셀의 디자인 등 슬라이드쇼 뷰를 원하는대로 커스터마이징할 수 있습니다. UICollectionViewDelegateFlowLayout 프로토콜을 사용하여 레이아웃을 구성할 수 있습니다.

extension ImageSlideshowViewController: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: collectionView.frame.height)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

위의 코드에서는 사용자가 스와이프 할 때 이미지가 화면 전체에 보여지도록 셀 크기를 조정하고, 각 셀 사이의 간격을 0으로 설정하도록 구현되어 있습니다. 이러한 방식으로 UICollectionViewDelegateFlowLayout을 사용하여 뷰를 원하는대로 커스터마이징할 수 있습니다.

이제 위의 코드를 기반으로 이미지 슬라이드쇼를 구현하고, 스와이프 방향을 반전시킬 수 있습니다. 동작을 확인하기 위해 예제 이미지를 준비하고, UICollectionView와 UICollectionViewCell을 적절히 추가하여 구성하면 됩니다.

참고 문서