[swift] Swift Koloda를 사용하여 카드 스와이프 기능 구현하기

16 Nov 2023

swift

개요

이번 프로젝트에서는 Swift 언어로 개발된 Koloda 라이브러리를 사용하여 카드 스와이프 기능을 구현하는 방법을 알아보겠습니다. Koloda는 카드 뷰를 생성하고 사용자가 카드를 스와이프하는 기능을 제공하는 매우 유용한 라이브러리입니다.

단계별 구현

1. Koloda 라이브러리 설치

먼저 CocoaPods를 사용하여 Koloda 라이브러리를 프로젝트에 설치합니다. Podfile에 다음과 같이 라이브러리를 추가합니다.

pod 'Koloda`

그런 다음 터미널에서 pod install 명령을 실행하여 라이브러리를 설치합니다.

2. Koloda 카드 뷰 만들기

Koloda 라이브러리를 사용하여 카드 뷰를 생성합니다. 카드 뷰에 대한 UI는 자유롭게 구성할 수 있습니다. 일반적으로 이미지 뷰와 텍스트 뷰로 구성된 셀을 사용합니다.

import UIKit
import Koloda

class CardView: UIView, KolodaViewDataSource {
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var label: UILabel!
    
    // 카드 수 반환
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return cardData.count
    }
    
    // 카드 뷰 설정
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        let card = Bundle.main.loadNibNamed("CardView", owner: self, options: nil)?[0] as? CardView
        card?.imageView.image = cardData[index].image
        card?.label.text = cardData[index].text
        return card ?? UIView()
    }
}

3. 카드 데이터 구성하기

카드 뷰에 표시할 데이터를 구성합니다. 이 예시에서는 Card라는 모델 클래스를 사용하여 이미지와 텍스트 데이터를 저장합니다.

struct Card {
    let image: UIImage
    let text: String
}

let cardData: [Card] = [
    Card(image: UIImage(named: "card1")!, text: "Card 1"),
    Card(image: UIImage(named: "card2")!, text: "Card 2"),
    Card(image: UIImage(named: "card3")!, text: "Card 3")
]

4. Koloda 뷰 컨트롤러 생성하기

카드 뷰와 Koloda 데이터 소스를 관리하는 Koloda 뷰 컨트롤러를 생성합니다. Storyboard에서 Koloda 뷰 컨트롤러를 추가하고 연결합니다.

import UIKit
import Koloda

class ViewController: UIViewController {

    @IBOutlet weak var kolodaView: KolodaView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        kolodaView.dataSource = cardView
    }

    // ...
}

5. 사용자 인터랙션 처리하기

사용자가 카드를 스와이프할 때 발생하는 이벤트를 처리합니다. Koloda 라이브러리에서 제공하는 델리게이트 메서드를 사용하여 사용자의 스와이프 동작을 감지하고 적절한 처리를 수행합니다.

extension ViewController: KolodaViewDelegate {
    
    // 카드가 완전히 제거되었을 때 호출됨
    func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
        // 새로운 카드 추가 작업 등을 수행할 수 있음
    }
    
    // 카드를 왼쪽으로 스와이프했을 때 호출됨
    func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
        if direction == .left {
            // 왼쪽으로 스와이프한 경우의 처리
        } else if direction == .right {
            // 오른쪽으로 스와이프한 경우의 처리
        }
    }
}

요약

Swift Koloda 라이브러리를 사용하면 간단하게 카드 스와이프 기능을 구현할 수 있습니다. 위의 단계를 따라가면 쉽게 원하는 UI와 사용자 인터랙션을 가진 카드 뷰를 만들 수 있습니다.

이 외에도 Koloda 라이브러리는 다양한 설정과 사용자 상호 작용을 지원하므로 필요에 따라 추가적인 기능을 구현할 수 있습니다.

더 자세한 내용은 Koloda GitHub 저장소에서 확인할 수 있습니다.