[iOS/Swift] Image Slide show - Label Page Indicator, Full screen view 구현하기

🖼 ImageSlideshow

ImageSlideshow 설치, 뷰 생성하기, 이미지 등록하는 법은 이전 포스팅을 참고해주세요. 해당 포스팅에서는 Label Page Indicator 적용하는 법, 이미지 클릭시 전체 화면으로 전환하는 법에 대해 다뤄보겠습니다.

[iOS/Swift] Image Slide show + Firebase Storage 로 슬라이드 이미지뷰 구현하기 - 1

---

3. Custom Label  Page Indicator 적용하기

 

기본으로 제공되는 Label Page Indicator 를 이용할 경우, 기존 코드에서 다음 한 줄을 추가하면 됩니다.

slideshow.pageIndicator = LabelPageIndicator()

 

Github 문서도, 정대리님 유투브도 Label Page Indicator 를 뚝딱 적용하셨는데요. 저는 이미지 사이즈가 작아서 그런지 width 조절이 정상적으로 되지 않아 1/... 처럼 잘려서 나타났습니다. 🥲 Label 을 SubView 로 적용하는 방법도 해봤는데, 스크롤시 매끄럽지 않더라고요. 고민하다가 extension 을 통해 LabelPageIndicator 의 폰트사이즈와 width 를 커스텀하게 지정해줬습니다.

 

You can also use your own page indicator by adopting the PageIndicatorView protocol.

import Foundation
import ImageSlideshow

extension LabelPageIndicator {
    
    public func setCustomLabel() {
        self.textColor = .white
        let systemFont = UIFont.systemFont(ofSize: 12.0)
        self.attributedText = NSAttributedString(string: self.text ?? "",
                                                 attributes: [NSAttributedString.Key.font : systemFont])
    }
    
    public override func sizeToFit() {
        let maximumString = String(repeating: "16", count: numberOfPages) as NSString
        self.frame.size = maximumString.size(withAttributes: [.font: font as Any])
        setCustomLabel()
    }
}

 

이번에는 TableView Cell 에서 ImageSlideshow 를 이용했고, Cell 에서 LabelPageIndicator 설정을 해주었습니다. Cell 의 기본 UI 와 관련된 동작이라 생각해서 Cell Class 에서 적용을 했습니다.

 class ReviewCell: UITableViewCell {
   //...
   override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code ...
        reviewImageSlide.setCornerRadius()
        let labelPageIndicator = LabelPageIndicator()
        reviewImageSlide.pageIndicator = labelPageIndicator
        reviewImageSlide.pageIndicatorPosition = .init(horizontal: .right(padding: 10),
                                                    vertical: .customBottom(padding: 10))
    }
}

 

이미지는 Cell 마다 동적으로 변하기 때문에 TableViewDatasource 내에서 적용했습니다.

// MARK: TableView - Datasource
extension ReviewTableViewController: UITableViewDataSource {
    // ...
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
		// dequeueReusableCell ... 
        let imageInputs = FirebaseStorage.getImageInputs(images: images)
        cell.reviewImageSlide.setImageInputs(imageInputs)
        cell.reviewImageSlide.contentScaleMode = .scaleAspectFill
    }
}

 

여기까지 잘 작동되면 다음과 같이 오른쪽 하단에 Label Page Indicator 가 나타난 것을 확인할 수 있습니다! 해당 사진은 개발중인 어플과 관련이 없습니다.

Custom Label Page Indicator

 

4. Full Screen view 전환하기 + Label Page Indicator 적용하기

개발하는 정대리님 유투브를 참고한 내용입니다.

ImageSlideshow 라이브러리는 이미지만 나타나는 전체화면을 제공하고 Pinch Zoom 을 통해 확대가 가능합니다. 직접 개발해야하는 부분은 이미지를 터치했을 때 전체화면이 나타나도록 하는 부분입니다. 

 

이미지를 터치하는 것이니까 UITapGestureRecognizer 를 이용하면 되겠지요?! Tap Gesture 또한 UI 설정에 관련된것이라 생각해서 Cell 내부에서 설정했습니다. 이미지를 탭 했을때, didTapImageSlide 액션함수가 호출되고, 해당 함수는 showFullScreen 함수를 호출합니다.

 

showFullScreen 은 Closure 로 설정했는데요, 보여줘야할 이미지가 Cell 마다 달라지기 때문에 Closure 로 설정했습니다. 이후 ReviewTableViewDatasource 에서 수행할 코드를 Closure 에 넘겨주는 식으로 작성합니다.

 class ReviewCell: UITableViewCell {
    //...
    typealias EmptyClosure = (() -> ())
    var showFullScreen: EmptyClosure = {}
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(didTapImageSlide(_:)))
        reviewImageSlide.addGestureRecognizer(tapGesture)
        // ...
    }
    
    @objc func didTapImageSlide(_ sender: UITapGestureRecognizer) {
        showFullScreen()
    }
}

 

그리고 전체화면으로 변경되었을 때, 기존의 LabelPageIndicator 는 너무 작기때문에 큰 사이즈의 Label 을 정의해줬습니다. 아래 tableView 코드에서 TopAnchor, centerXAnchor 를 통해 상단 가운데에 위치시켰습니다.

class ReviewCell: UITableViewCell {
    //...
    let fullScreenLabelIndicator: UILabel = {
        let label = UILabel()
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 16)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
}

 

ReviewTableViewDatasource 프로토콜 함수인 tableView(_, cellForRowAt) 함수에서 위의 Closure 를 지정해줍시다. 해당 코드에서는 현재 페이지에 대한 Label 만 지정해주고 있어요. 페이지가 변할때마다 Label 을 변경해주기 위해서 ImageSlideshowDelegate 프로토콜을 채택하고 함수를 재정의합니다.

// MARK: TableView - Datasource
extension ReviewTableViewController: UITableViewDataSource {
    // ...
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    	// dequeueReusableCell ... 
        
        cell.showFullScreen = { [unowned self] in
            let fullScreenController = cell.reviewImageSlide.presentFullScreenController(from: self, completion: nil)
            fullScreenController.slideshow.pageIndicator = LabelPageIndicator()
            fullScreenController.view.addSubview(fullScreenLabelIndicator)
            fullScreenLabelIndicator.topAnchor.constraint(equalTo: fullScreenController.view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
            fullScreenLabelIndicator.centerXAnchor.constraint(equalTo: fullScreenController.view.centerXAnchor).isActive = true
            let currentPageString = String(cell.reviewImageSlide.currentPage + 1)
            let maxPageString = String(cell.reviewImageSlide.images.count)
            fullScreenLabelIndicator.text = currentPageString + "/" + maxPageString
            fullScreenController.slideshow.delegate = self
        }
    }
}

// MARK: - ImageSlideshowDelegate
extension ReviewTableViewController: ImageSlideshowDelegate {

    // 이미지 페이지가 변경되었을때
    func imageSlideshow(_ imageSlideshow: ImageSlideshow, didChangeCurrentPageTo page: Int) {
        let maxPageString = String(imageSlideshow.images.count)
        fullScreenLabelIndicator.text = String(page + 1) + "/" + maxPageString
    }
}

 

여기까지 확인해보시면 터치시 전체화면으로 전환되고, 상단에 Label Page Indicator 가 나타난 것을 확인하실 수 있습니다! 🤩 해당 사진은 개발중인 어플과 관련이 없습니다.

Full Screen View + Labe Page Indicator

---

참고 링크

• ImageSlideshow Github 문서
• 개발하는 정대리님 유투브
• Firebase Storage https 관련 스택오버플로우 질문