[swift] 이미지 슬라이드쇼에서 이미지 더블 탭 제스처 처리하기

27 Nov 2023

swift

이미지 슬라이드쇼는 많은 iOS 앱에서 많이 사용되는 기능 중 하나입니다. 사용자가 이미지를 제스처로 탭하면 전체화면 모드로 전환되는 기능은 많은 앱에서 지원하고 있습니다. 여기서는 이미지 슬라이드쇼에서 이미지를 더블 탭 제스처로 제어하는 방법을 알아보겠습니다.

1. 이미지 슬라이드쇼 구성하기

먼저, 이미지 슬라이드쇼를 구성해야 합니다. 이를 위해 UICollectionView를 사용하고, UICollectionViewDelegate와 UICollectionViewDataSource 프로토콜을 구현해야 합니다. 이미지 슬라이드쇼에는 이미지의 목록이 필요하므로, 이미지 배열을 준비하세요.

import UIKit

class ImageSliderViewController: UIViewController {
    
    @IBOutlet weak var collectionView: UICollectionView!
    
    let images = [UIImage(named: "image1"), UIImage(named: "image2"), UIImage(named: "image3")]
    
    // 슬라이드쇼 구현 코드...
}

extension ImageSliderViewController: UICollectionViewDelegate {
    // 필요한 delegate 메소드 구현...
}

extension ImageSliderViewController: UICollectionViewDataSource {
    // 필요한 dataSource 메소드 구현...
}

2. 이미지 더블 탭 제스처 처리하기

이제 이미지 더블 탭 제스처를 처리해야 합니다. UITapGestureRecognizer를 사용하여 이미지 더블 탭 제스처를 감지하고, 해당 이벤트를 처리합니다. 더블 탭 이벤트가 발생하면, 이미지 뷰를 전체화면 모드로 전환하거나 해제합니다.

extension ImageSliderViewController: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width
        let height = collectionView.bounds.height
        return CGSize(width: width, height: height)
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // 이미지 더블 탭 제스처 처리
        let doubleTap = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTap))
        doubleTap.numberOfTapsRequired = 2
        collectionView.addGestureRecognizer(doubleTap)
    }
    
    @objc func handleDoubleTap(sender: UITapGestureRecognizer) {
        if sender.state == .ended {
            let point = sender.location(in: collectionView)
            if let indexPath = collectionView.indexPathForItem(at: point) {
                // 이미지 전체화면 모드로 전환 또는 해제
                // your code here...
            }
        }
    }
}

3. 이미지 전체화면 모드 전환 또는 해제하기

마지막으로, 이미지를 전체화면 모드로 전환 또는 해제해야 합니다. 이를 위해 UIImageView를 사용하고, 전체화면 모드로 전환하면서 애니메이션 효과를 추가하는 것이 일반적입니다. 예를 들어, UIView.animate를 사용하여 이미지 뷰의 프레임을 변경하고, 전체화면 모드로 전환합니다.

extension ImageSliderViewController {
    
    @objc func handleDoubleTap(sender: UITapGestureRecognizer) {
        if sender.state == .ended {
            let point = sender.location(in: collectionView)
            if let indexPath = collectionView.indexPathForItem(at: point) {
                if let cell = collectionView.cellForItem(at: indexPath) as? ImageCell {
                    let imageView = UIImageView(image: cell.imageView.image)
                    imageView.contentMode = .scaleAspectFit
                    imageView.frame = cell.imageView.frame
                    imageView.isUserInteractionEnabled = true
                    let tap = UITapGestureRecognizer(target: self, action: #selector(handleSingleTap))
                    imageView.addGestureRecognizer(tap)
                    collectionView.addSubview(imageView)

                    UIView.animate(withDuration: 0.3, animations: {
                        imageView.frame = collectionView.bounds
                    })
                }
            }
        }
    }
    
    @objc func handleSingleTap(sender: UITapGestureRecognizer) {
        if sender.state == .ended {
            if let imageView = sender.view as? UIImageView {
                UIView.animate(withDuration: 0.3, animations: {
                    imageView.frame = imageView.superview?.convert(self.collectionView.cellForItem(at: IndexPath(item: 0, section: 0))?.frame ?? .zero, to: self.view)
                }, completion: { _ in
                    imageView.removeFromSuperview()
                })
            }
        }
    }
}

여기서는 이미지 더블 탭 제스처를 감지하고 이미지 뷰를 전체화면 모드로 전환하고 다시 해제하는 방법에 대해 알아보았습니다. 이제 ImageSliderViewController를 사용하여 이미지 슬라이드쇼를 구성하고 이미지를 더블 탭하여 전체화면 모드로 전환할 수 있습니다. 필요에 따라 코드를 수정하고 애니메이션 및 다른 동작을 추가하여 원하는 기능을 구현할 수 있습니다.

1. 이미지 슬라이드쇼 구성하기

2. 이미지 더블 탭 제스처 처리하기

3. 이미지 전체화면 모드 전환 또는 해제하기

참고 문서