[swift] Swift Koloda를 사용하여 카드 덱 구현하기

16 Nov 2023

swift

Koloda는 Swift로 작성된 카드 뷰 컴포넌트입니다. Koloda를 사용하면 Tinder와 같은 앱에서 사용되는 카드 스와이프 기능을 쉽게 구현할 수 있습니다.

이 튜토리얼에서는 Swift Koloda를 사용하여 간단한 카드 덱을 구현하는 방법을 알아보겠습니다.

단계 1: Koloda 설치

먼저 프로젝트에 Koloda를 설치해야 합니다. Koloda를 설치하려면 Podfile에 다음 줄을 추가합니다:

pod 'Koloda'

그런 다음 터미널에서 pod install 명령어를 실행하여 Koloda를 설치합니다.

단계 2: Storyboard에서 Koloda 추가하기

Storyboard에서 View Controller를 추가한 후, 이 View Controller에 Koloda View를 추가합니다. Koloda View는 카드가 표시되는 영역입니다.

Koloda View를 선택한 후, Attributes Inspector에서 카드 스와이프에 대한 설정을 변경할 수 있습니다. 예를 들어, 스와이프할 때 카드가 사라지는 애니메이션을 추가할 수 있습니다.

단계 3: 데이터 모델 생성

선택적으로, 카드에 표시될 데이터 모델을 생성할 수 있습니다. 예를 들어, 사용자 이름과 이미지를 포함하는 CardModel을 만들어 보겠습니다.

struct CardModel {
    let name: String
    let image: UIImage
}

단계 4: View Controller에 Koloda DataSource와 Delegate 구현하기

View Controller 클래스에서 Koloda DataSource와 Delegate를 구현해야 합니다. 이렇게 하면 카드 덱에 표시할 데이터를 제공하고, 카드 스와이프 동작에 대한 이벤트를 처리할 수 있습니다.

class ViewController: UIViewController, KolodaViewDataSource, KolodaViewDelegate {
    var cards: [CardModel] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 카드 데이터 초기화
        cards = [
            CardModel(name: "John", image: UIImage(named: "john")!),
            CardModel(name: "Lisa", image: UIImage(named: "lisa")!),
            CardModel(name: "Mike", image: UIImage(named: "mike")!),
        ]
        
        // Koloda DataSource와 Delegate 지정
        kolodaView.dataSource = self
        kolodaView.delegate = self
    }
    
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return cards.count
    }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        let cardView = UIView()
        let card = cards[index]
        
        // 카드에 데이터 표시
        let imageView = UIImageView(frame: cardView.bounds)
        imageView.image = card.image
        cardView.addSubview(imageView)
        
        let nameLabel = UILabel()
        nameLabel.text = card.name
        nameLabel.textAlignment = .center
        nameLabel.frame = CGRect(x: 0, y: 10, width: cardView.bounds.width, height: 30)
        cardView.addSubview(nameLabel)
        
        return cardView
    }
    
    // 카드 스와이프 동작 처리
    func kolodaDidSwipeCard(_ koloda: KolodaView, at index: Int, in direction: SwipeResultDirection) {
        if direction == .right {
            // 좋아요 액션 처리
            print("Liked card at index \(index)")
        } else if direction == .left {
            // 싫어요 액션 처리
            print("Disliked card at index \(index)")
        }
    }
    
    // 카드 스와이프 완료 후 처리
    func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
        // 카드 덱이 모두 소진되었을 때 처리할 내용
    }
}

결론

Swift Koloda를 사용하여 카드 덱을 구현할 수 있습니다. Koloda를 사용하면 앱에서 카드 스와이프 기능을 쉽게 구현할 수 있으며, 데이터 모델 및 이벤트 처리도 간단하게 할 수 있습니다.