[swift] Swift Koloda를 사용하여 카드 스와이프 후 지도 표시하기

16 Nov 2023

swift

이번 튜토리얼에서는 Swift Koloda 라이브러리를 사용하여 카드 스와이프 후 지도를 표시하는 방법에 대해 알아보겠습니다.

1. Swift Koloda 설치하기

먼저, Swift Koloda를 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 CocoaPods를 이용해 설치할 수 있습니다.

pod 'Koloda'

설치가 완료되면, import Koloda를 추가해 주세요.

2. 카드 뷰 생성하기

Koloda는 카드 형식의 뷰를 제공합니다. 우선, 지도와 추가 정보를 표시할 카드 뷰를 생성해 보겠습니다.

class CardView: UIView {
    
    @IBOutlet weak var mapView: MKMapView!
    @IBOutlet weak var infoLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        // 카드 뷰 초기화 설정
        self.layer.cornerRadius = 10
        self.layer.masksToBounds = true
    }
    
    // 카드에 데이터를 바인딩하는 메서드
    func bindData(data: CardData) {
        // 지도 센터를 설정합니다.
        let center = CLLocationCoordinate2D(latitude: data.latitude, longitude: data.longitude)
        let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
        let region = MKCoordinateRegion(center: center, span: span)
        self.mapView.setRegion(region, animated: true)
        
        // 추가 정보를 표시합니다.
        self.infoLabel.text = data.info
    }
}

위 코드에서 CardData는 카드에 표시할 데이터의 모델을 나타냅니다. 이 데이터 모델에는 위도, 경도 및 추가 정보와 같은 필수 속성들이 있을 것입니다.

카드 뷰는 mapView와 infoLabel을 가지며, bindData(data:) 메서드를 통해 데이터를 받아와 표시합니다.

3. Koloda 뷰 설정하기

이제 Koloda 뷰를 설정해 보겠습니다. Koloda 뷰 컨트롤러를 생성하고, 데이터를 로드하여 카드 뷰에 데이터를 바인딩하는 코드를 작성합니다.

class ViewController: UIViewController, KolodaViewDataSource, KolodaViewDelegate {
    
    @IBOutlet weak var kolodaView: KolodaView!
    
    var cardData: [CardData] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Koloda 뷰에 데이터 소스와 델리게이트를 설정합니다.
        kolodaView.dataSource = self
        kolodaView.delegate = self
        
        // 데이터를 로드합니다.
        loadCardData()
    }
    
    // 카드 뷰의 개수를 반환하는 메서드
    func kolodaNumberOfCards(_ koloda:KolodaView) -> Int {
        return cardData.count
    }
    
    // 카드 뷰를 반환하는 메서드
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        let cardView = Bundle.main.loadNibNamed("CardView", owner: self, options: nil)?.first as! CardView
        
        // 데이터 바인딩
        cardView.bindData(data: cardData[index])
        
        return cardView
    }
    
    // 카드를 스와이프 했을 때의 액션을 처리하는 메서드
    func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
        if direction == .right {
            showMap()
        }
    }
    
    // 데이터 로드 메서드
    func loadCardData() {
        // 카드 데이터를 로드하는 로직을 작성합니다.
        // ...
    }
    
    // 지도 표시 메서드
    func showMap() {
        // 선택한 카드의 지도를 표시하는 로직을 작성합니다.
        // ...
    }
}

위 코드에서 kolodaNumberOfCards(_:) 메서드는 카드 뷰의 개수를 반환하고, koloda(_:viewForCardAt:) 메서드는 각 카드 뷰를 반환합니다. koloda(_:didSwipeCardAt:in:) 메서드는 카드를 스와이프 했을 때의 액션을 처리합니다.

데이터 로드 및 지도 표시 메서드는 별도의 로직으로 구현하셔야 합니다.

마무리

위 방법을 사용하여 Swift Koloda를 활용하여 카드 스와이프 후 지도를 표시하는 기능을 구현할 수 있습니다. Koloda 라이브러리는 많은 커스터마이징 옵션을 제공하므로, 필요에 따라 다양한 스타일로 카드 뷰를 구성할 수 있습니다.

더 자세한 내용은 Swift Koloda GitHub에서 확인해 보세요.