Colin's Blog
[swift] Swift Koloda를 사용하여 카드에 사용자 지정 데이터 연결하기

Swift Koloda는 iOS 앱에서 카드 스타일의 인터페이스를 만들 수 있는 오픈 소스 라이브러리입니다. 이 라이브러리를 사용하면 좌우 스와이프 동작을 통해 카드를 제어할 수 있습니다.

이번 가이드에서는 Swift Koloda를 사용하여 카드에 사용자 지정 데이터를 연결하는 방법에 대해 알아보겠습니다.

1. Koloda 라이브러리 가져오기

먼저, 프로젝트에 Swift Koloda 라이브러리를 가져와야 합니다. 라이브러리를 가져오기 위해 Cocoapods를 사용하겠습니다.

Podfile에 다음과 같이 라이브러리를 추가합니다.

pod 'Koloda'

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

$ pod install

2. 데이터 모델 설정

카드에 연결할 사용자 지정 데이터 모델을 만들어야 합니다. 예를 들어, 사용자의 이름과 사진을 포함하는 User라는 데이터 모델을 만들어 보겠습니다.

struct User {
    let name: String
    let photo: UIImage
}

3. Koloda 뷰 컨트롤러 생성

Swift Koloda를 사용하기 위해 뷰 컨트롤러를 생성해야 합니다. 먼저, 뷰 컨트롤러를 상속받는 클래스를 만들어 줍니다.

import Koloda

class CardViewController: UIViewController {
    @IBOutlet weak var kolodaView: KolodaView!
    
    // 데이터 소스
    var users: [User] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 데이터 초기화
        users = [
            User(name: "John", photo: UIImage(named: "john_photo")!),
            User(name: "Alice", photo: UIImage(named: "alice_photo")!)
        ]
        
        // Koloda 뷰와 데이터 소스 연결
        kolodaView.dataSource = self
        
        // 카드 스와이프 동작 설정
        kolodaView.allowedDirections = .left + .right
        kolodaView.delegate = self
    }
}

extension CardViewController: KolodaViewDelegate {}

extension CardViewController: KolodaViewDataSource {
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return users.count
    }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        // 카드 뷰 생성 및 데이터 바인딩
        let cardView = UIView()
        
        let user = users[index]
        
        let nameLabel = UILabel(frame: CGRect(x: 0, y: 0, width: cardView.bounds.width, height: 50))
        nameLabel.text = user.name
        nameLabel.textAlignment = .center
        nameLabel.font = UIFont.systemFont(ofSize: 20, weight: .bold)
        cardView.addSubview(nameLabel)
        
        let photoImageView = UIImageView(frame: CGRect(x: 0, y: 60, width: cardView.bounds.width, height: cardView.bounds.height - 60))
        photoImageView.image = user.photo
        photoImageView.contentMode = .scaleAspectFit
        cardView.addSubview(photoImageView)
        
        return cardView
    }
}

데이터 소스를 설정하고 viewForCardAt 메서드에서 카드 뷰를 생성하고 데이터를 바인딩합니다. 위의 예제에서는 User 데이터 모델의 이름과 사진을 카드에 표시하도록 하였습니다.

4. Storyboard에서 Koloda View 설정

마지막으로, Storyboard에서 Koloda 뷰를 설정해야 합니다. 뷰 컨트롤러에 Koloda 뷰를 추가하고 IBOutlet을 설정해 줍니다.

참고 자료

이제 Swift Koloda를 사용하여 카드에 사용자 지정 데이터를 연결하는 방법에 대해 알아보았습니다. 이를 활용하여 원하는 형태의 카드 인터페이스를 구축할 수 있습니다.

© 2018 Colin. All rights reserved.