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

🖼 ImageSlideshow

Customizable Swift image slideshow with circular scrolling, timer and full screen viewer

Image Slide show 라이브러리는 여러 이미지를 옆으로 슬라이드하는 UI 를 구현해주는 라이브러리입니다! 인스타그램의 이미지가 나타나는 것을 구현할 수 있습니다.

 

다음의 기능들을 제공하고 있습니다.

• 이미지 슬라이드시 원형 구분자(circular indicator) 이용 
• 이미지 슬라이드시 Label Indicator (ex 1/5) 제공
• 이미지 슬라이드가 가능한 Full screen view 제공
• 시간을 설정해 자동으로 이미지 슬라이드가 가능하도록 제공

zvonicek/ImageSlideshow

 

---

🔧 Installation

외부 라이브러리를 사용하기 위해서는 프로젝트에 포함을 먼저 시켜줘야겠죠?! 저는 CocoaPods 을 이용했기 때문에, [ pod init > Podfile 수정 > pod install ] 이후 생성된 Project.xcworkspace 파일을 이용해 개발했습니다. Podfile 에 아래 코드를 한 줄 추가해주시면 됩니다.

pod 'ImageSlideshow', '~> 1.9.0'

 

🔨 How to use

1. ImageSlideShow 클래스의 View 생성하기

ImageSlideshow 라이브러리를 이용하기 위해서 먼저, ImageSlideshow 클래스의 View 를 생성해주어야 합니다. Storyboar 를 이용한다면 UIView 를 추가하고, Custom Class 를 ImageSlideshow 로 지정해주시면 됩니다.

 

스토리보드에 커스텀 클래스 설정하기

 

2. ImageSlideShow 에 이미지 설정하기

이후, ImageSlideshow 에 이미지를 설정해야 합니다. UIImage 를 이용한다면 바로 사용할 수 있지만, AlamofireImage, SDWebImage, Kingfisher 와 같은 외부 라이브러리를 사용할 경우 별도의 라이브러리 추가 설치가 필요합니다. Github 문서에서 설치해야할 라이브러리를 확인하실 수 있어요.

 

진행중인 프로젝트는 Firebase Storage 에서 이미지를 관리하고 있기 때문에 Firebase UI 에 포함된 SDWebImage 를 이용했습니다. 해당 라이브러리 이용하는 Github 문서에 예제가 없어서 걱정했지만, 다른 라이브러리와 비슷합니다. ImageInputs.append(SDWebImageSource(url: url)) 코드만 참고하시면 돼요! 

혹시 Firebase Storage 와 Image Slide show 를 함께 이용하시는 분께 도움이 될까해서 코드 함께 첨부합니다. 🙂

import ImageSlideshow

struct FirebaseStorage {

    static let baseURL = "https://firebasestorage.googleapis.com/v0/b/bucket-name/o/"
    static let query = "?alt=media"
    
    static func getImageInputs(images: [Image]) -> [SDWebImageSource] {
        var imageInputs: [SDWebImageSource] = []
        for image in images {
            let path = image.pictureUrl.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed)!
            let url = URL(string: baseURL + path + query)!
            imageInputs.append(SDWebImageSource(url: url))
        }
        return imageInputs
    }
}

위의 함수를 ImageSlideshow 가 있는 ViewController 에서 이용해주시면 됩니다! 코드에서 이용한 ImageSlideshow 의 인자들은 다음과 같습니다.

 

• func setImageInputs(_ inputs: [InputSource]) :: 이미지 설정
• var contentScaleMode :: 이미지 스케일 설정 (UIView.ContentMode 와 동일합니다)
• var pageIndicatorPosition :: 페이지 구분자가 나타나는 위치 설정

class CustomViewController {
  // ...
  private func updateImageSlide(_ shopImages: [Image]) {
    // Firebase Storage 이미지 연동
    let imageInputs = FirebaseStorage.getImageInputs(images: shopImages)
    shopImageSlide.setImageInputs(imageInputs)
    shopImageSlide.contentScaleMode = .scaleAspectFill
    shopImageSlide.pageIndicatorPosition = .init(horizontal: .center, vertical: .bottom)
  }
}

정상적으로 구현시 다음과 같은 화면을 만나실 수 있습니다. 🤩 구현중인 앱의 일부이고, 사진은 브릿지엣지 카페에서 제공받았습니다.

 

Image Slide show 적용화면

 

다음 포스팅에서 Label Indicator, Full screen view 적용하기를 다뤄보겠습니다.

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

---

참고 링크

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