Colin's Blog
[swift] 이미지 슬라이드쇼에서 이미지 캡션 뛰어넘기 효과 추가하기

이미지 슬라이드쇼를 만들 때, 이미지 위에 캡션을 추가하고 캡션을 동적으로 변경하려는 경우가 있습니다. 이때, 이미지 캡션의 뛰어넘기 효과를 추가하여 사용자가 캡션을 자유롭게 스킵하도록 만들 수 있습니다. 이번 글에서는 Swift 언어를 사용하여 이미지 슬라이드쇼에 이미지 캡션을 추가하고 뛰어넘기 효과를 구현하는 방법을 알아보겠습니다.

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

먼저, 이미지 슬라이드쇼를 구성하기 위해 UIScrollView를 사용합니다. UIScrollView는 사용자가 화면을 스크롤하여 다양한 컨텐츠를 볼 수 있도록 도와주는 컴포넌트입니다.

import UIKit

class ImageSlideshowViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    var imageViews: [UIImageView] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 이미지 슬라이드쇼에 표시할 이미지들을 배열로 저장합니다.
        let imageNames = ["image1", "image2", "image3"]
        
        // 이미지 슬라이드쇼의 컨텐츠 사이즈를 설정합니다.
        scrollView.contentSize = CGSize(width: CGFloat(imageNames.count) * view.frame.width, height: view.frame.height)
        
        // 이미지 슬라이드쇼의 스크롤 방향을 가로로 설정합니다.
        scrollView.alwaysBounceHorizontal = true
        scrollView.alwaysBounceVertical = false
        scrollView.isPagingEnabled = true
        
        for (index, imageName) in imageNames.enumerated() {
            // 이미지 뷰를 생성하고 이미지를 설정합니다.
            let imageView = UIImageView(image: UIImage(named: imageName))
            
            // 이미지 뷰의 프레임을 설정합니다.
            imageView.frame = CGRect(x: CGFloat(index) * view.frame.width, y: 0, width: view.frame.width, height: view.frame.height)
            
            // 이미지 뷰를 스크롤 뷰에 추가합니다.
            scrollView.addSubview(imageView)
            
            // 이미지 뷰를 배열에 저장합니다.
            imageViews.append(imageView)
        }
    }
    
}

위의 코드는 UIScrollView를 사용하여 이미지 슬라이드쇼를 구성하는 예시입니다. UIScrollView의 contentSize를 설정하여 슬라이드쇼의 컨텐츠 사이즈를 조절하고, 이미지를 담을 UIImageView를 생성하여 스크롤 뷰에 추가합니다. 여기까지 구현하면 이미지 슬라이드쇼가 원하는 대로 보일 것입니다.

이미지 캡션 뛰어넘기 효과 추가하기

이미지 슬라이드쇼에 이미지 캡션을 추가하고 뛰어넘기 효과를 구현해보겠습니다. 이를 위해 다음과 같은 단계를 따릅니다.

  1. UIScrollViewDelegate를 구현하여 스크롤 이벤트를 감지합니다.
  2. UIPageControl을 추가하여 현재 페이지를 표시합니다.
  3. UILabel을 추가하여 이미지 캡션을 표시합니다.
  4. 사용자가 이미지 캡션을 뛰어넘기 위해 제스처를 추가합니다.
import UIKit

class ImageSlideshowViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    @IBOutlet weak var captionLabel: UILabel!
    var imageViews: [UIImageView] = []
    var captions: [String] = ["Caption 1", "Caption 2", "Caption 3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.delegate = self
        
        let imageNames = ["image1", "image2", "image3"]
        
        scrollView.contentSize = CGSize(width: CGFloat(imageNames.count) * view.frame.width, height: view.frame.height)
        
        scrollView.alwaysBounceHorizontal = true
        scrollView.alwaysBounceVertical = false
        scrollView.isPagingEnabled = true
        
        for (index, imageName) in imageNames.enumerated() {
            let imageView = UIImageView(image: UIImage(named: imageName))
            imageView.frame = CGRect(x: CGFloat(index) * view.frame.width, y: 0, width: view.frame.width, height: view.frame.height)
           
            let caption = captions[index]
            
            imageView.accessibilityLabel = caption
            scrollView.addSubview(imageView)
            
            imageViews.append(imageView)
        }
        
        pageControl.numberOfPages = imageNames.count
        pageControl.currentPage = 0
        captionLabel.text = captions[0]
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(skipCaption))
        captionLabel.isUserInteractionEnabled = true
        captionLabel.addGestureRecognizer(tapGesture)
    }
    
    // MARK: - UIScrollViewDelegate
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x / scrollView.frame.width)
        pageControl.currentPage = Int(pageIndex)
        
        if Int(pageIndex) < captions.count {
            captionLabel.text = captions[Int(pageIndex)]
        } else {
            captionLabel.text = ""
        }
    }
    
    // MARK: - Gesture Recognizer
    
    @objc func skipCaption() {
        let pageIndex = round(scrollView.contentOffset.x / scrollView.frame.width)
        
        if Int(pageIndex) < captions.count {
            scrollView.setContentOffset(CGPoint(x: CGFloat(Int(pageIndex) + 1) * scrollView.frame.width, y: 0), animated: true)
        }
    }
    
}

위의 코드에서 UIScrollViewDelegate를 구현하여 스크롤 이벤트를 감지하고, 스크롤 될 때마다 현재 페이지를 UIPageControl에 표시합니다. 또한, 현재 페이지에 해당하는 캡션을 UILabel에 표시합니다. 마지막으로, 사용자가 캡션을 뛰어넘기 위해 텍스트에 제스처를 추가하여 이미지를 스킵할 수 있도록 합니다.

이것으로 이미지 슬라이드쇼에 이미지 캡션을 추가하고 뛰어넘기 효과를 구현하는 방법을 알아보았습니다. 이제 이 코드를 사용하여 원하는 이미지 슬라이드쇼를 만들어보세요!

참고 자료:

© 2018 Colin. All rights reserved.