[swift] 이미지 슬라이드쇼에 캡션 추가하기

27 Nov 2023

swift

이미지 슬라이드쇼에 캡션을 추가하는 것은 사용자에게 더 많은 정보를 전달하고 시각적인 효과를 향상시킬 수 있는 좋은 방법입니다. Swift 언어를 사용하여 이미지 슬라이드쇼에 캡션을 추가해보겠습니다.

슬라이딩 이미지뷰 만들기

먼저, 슬라이딩 이미지뷰를 만들어야 합니다. 슬라이딩 이미지뷰를 만들기 위해 이미지를 보여주기 위한 UIImageView와 이미지를 슬라이드하기 위한 UIScrollView를 사용합니다.

import UIKit

class SlideShowViewController: UIViewController, UIScrollViewDelegate {
    
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    
    var imageViews: [UIImageView] = []
    var captions: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.delegate = self
        pageControl.numberOfPages = imageViews.count
        
        for (index, imageView) in imageViews.enumerated() {
            let xPosition = view.frame.width * CGFloat(index)
            imageView.frame = CGRect(x: xPosition, y: 0, width: view.frame.width, height: view.frame.height)
            scrollView.addSubview(imageView)
        }
        
        scrollView.contentSize = CGSize(width: view.frame.width * CGFloat(imageViews.count), height: view.frame.height)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x/view.frame.width)
        pageControl.currentPage = Int(pageIndex)
    }
    
}

캡션 레이블 추가하기

이제 슬라이딩 이미지뷰에 캡션 레이블을 추가해보겠습니다. 각 이미지마다 해당하는 캡션을 보여주기 위해 캡션 배열을 사용합니다.

import UIKit

class SlideShowViewController: UIViewController, UIScrollViewDelegate {
    
    // ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ...
        
        for (index, imageView) in imageViews.enumerated() {
            let xPosition = scrollView.frame.width * CGFloat(index)
            imageView.frame = CGRect(x: xPosition, y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
            
            let captionLabel = UILabel(frame: CGRect(x: 0, y: scrollView.frame.height - 50, width: scrollView.frame.width, height: 50))
            captionLabel.text = captions[index]
            captionLabel.textColor = .white
            captionLabel.backgroundColor = .black
            captionLabel.alpha = 0.7
            captionLabel.textAlignment = .center
            imageView.addSubview(captionLabel)
            
            scrollView.addSubview(imageView)
        }
        
        // ...
    }
    
    // ...
    
}

위의 코드를 통해 이미지 슬라이드쇼에 캡션을 추가할 수 있습니다. 캡션 레이블의 위치와 스타일을 조정하여 디자인을 개선하고, 이미지와 캡션의 배열을 동적으로 로드하는 등의 개선점을 추가로 구현해 볼 수도 있습니다.

이 예제는 UIScrollView를 사용한 이미지 슬라이드쇼에 캡션을 추가하는 방법을 보여줍니다. 각 이미지와 해당하는 캡션에 대한 데이터를 활용하여 사용자가 더 흥미로워하고 유용한 컨텐츠를 제공할 수 있습니다.

참고 자료: