[swift] Swift Koloda를 사용하여 카드 스와이프 시 동영상 재생하기

이번 튜토리얼에서는 Swift Koloda 라이브러리를 사용하여 카드 스와이프 시 동영상을 재생하는 방법에 대해 알아보겠습니다.

1. Swift Koloda란?

Swift Koloda는 카드 뷰와 스와이프 동작을 구현하는 라이브러리입니다. 이 라이브러리는 많은 앱에서 사용되는 Tinder와 같은 카드 스와이프 인터페이스를 구현하는 데 도움이 됩니다.

2. 프로젝트 설정

먼저, Swift Koloda를 사용하기 위해 프로젝트에 CocoaPods을 설치해야 합니다. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 실행하세요:

$ pod init

이후, Podfile을 열어 다음과 같이 수정하세요:

platform :ios, '13.0'
use_frameworks!

target 'YourProjectName' do
  pod 'Koloda'
end

저장 후, 터미널에서 pod install 명령어를 실행하여 CocoaPods을 설치합니다.

3. KolodaView 설정

KolodaView를 사용하기 위해 먼저 해당 뷰를 Interface Builder에서 추가해야 합니다. 뷰 컨트롤러를 열고, 원하는 위치에 KolodaView를 추가하세요.

그런 다음, KolodaView를 뷰 컨트롤러와 연결하기 위해 아울렛을 설정합니다. 다음은 KolodaView의 아울렛 예시입니다:

@IBOutlet weak var kolodaView: KolodaView!

4. 데이터 소스 구현

KolodaView를 초기화하고 데이터를 표시하기 위해 데이터 소스를 구현해야 합니다. 데이터 소스는 KolodaViewDataSource 프로토콜을 채택하여 구현됩니다.

class ViewController: UIViewController, KolodaViewDataSource {
    // ...
    
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        // 카드의 개수를 반환합니다.
        return videoUrls.count
    }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        // 카드에 표시할 뷰를 반환합니다.
        let videoUrl = videoUrls[index]
        let videoView = VideoView(url: videoUrl)
        
        return videoView
    }
}

5. 동영상 재생

동영상 재생을 위해 VideoView 클래스를 만들고 AVPlayer를 사용하여 동영상을 재생합니다.

import AVKit
import AVFoundation

class VideoView: UIView {
    private var player: AVPlayer!
    private var playerLayer: AVPlayerLayer!
    private var url: URL
    
    init(url: URL) {
        self.url = url
        super.init(frame: .zero)
        
        // AVPlayer 초기화 및 재생 설정
        player = AVPlayer(url: url)
        playerLayer = AVPlayerLayer(player: player)
        playerLayer.frame = bounds
        layer.addSublayer(playerLayer)
        player.play()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

6. 카드 스와이프 처리

마지막으로, 사용자의 스와이프 동작에 따라 동영상을 재생하고 멈추는 로직을 추가해야 합니다. KolodaViewDelegate 프로토콜을 채택하여 다음 메서드를 구현합니다:

class ViewController: UIViewController, KolodaViewDelegate {
    // ...
    
    func kolodaDidSwipeCard(_ koloda: KolodaView, at index: Int, in direction: SwipeResultDirection) {
        let videoView = koloda.viewForCard(at: index) as? VideoView
        
        if direction == .right {
            // 오른쪽으로 스와이프한 경우 동영상 재생
            videoView?.player.play()
        } else {
            // 다른 방향으로 스와이프한 경우 동영상 멈춤
            videoView?.player.pause()
        }
    }
}

이제 KolodaView에 동영상이 포함된 카드가 표시되고, 사용자가 카드를 스와이프할 때 동영상이 재생되거나 멈출 것입니다.

본 튜토리얼은 Swift Koloda의 기본 사용법과 동영상 재생 기능을 다루었습니다. 자세한 내용은 Swift Koloda의 공식 문서를 참조하시기 바랍니다.

참고 자료