[swift] Swift Koloda를 사용하여 카드 슬라이드 시 다른 카드들의 위치 영향 받기

16 Nov 2023

swift

Koloda는 Swift로 작성된 라이브러리로, 카드 슬라이딩 인터페이스를 쉽게 구현할 수 있습니다. 이 라이브러리를 사용하여 카드를 슬라이딩할 때, 다른 카드들의 위치에도 영향을 주고 싶다면 어떻게 해야 할까요? 이번 글에서는 Swift Koloda를 사용하여 카드 슬라이드 시 다른 카드들의 위치에 영향을 주는 방법을 알아보겠습니다.

Koloda 초기화하기

먼저 Koloda를 사용하기 위해 프로젝트에 추가해야 합니다. Swift Package Manager를 사용한다면 Package.swift 파일에 다음 패키지를 추가하고, CocoaPods를 사용한다면 Podfile에 다음 라인을 추가합니다.

.package(url: "https://github.com/Yalantis/Koloda.git", from: "6.2.2")

또는

pod 'Koloda', '~> 6.2.2'

Koloda를 추가한 후에는 KolodaView를 초기화하여 사용할 수 있습니다. 다음과 같이 KolodaView를 생성하고 delegate와 dataSource를 설정하세요.

import Koloda

class ViewController: UIViewController, KolodaViewDelegate, KolodaViewDataSource {
    @IBOutlet weak var kolodaView: KolodaView!

    override func viewDidLoad() {
        super.viewDidLoad()
        kolodaView.delegate = self
        kolodaView.dataSource = self
    }
    
    // ...
}

이제 KolodaView의 delegate와 dataSource를 설정했으니, 다음으로 카드 슬라이드를 구현해보겠습니다.

카드 슬라이드 구현하기

KolodaViewDelegate와 KolodaViewDataSource를 구현하여 카드 슬라이드를 구현할 수 있습니다. delegate와 dataSource 메서드를 활용하여 원하는 동작을 추가할 수 있습니다. 다음은 간단한 예시입니다.

func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
    let cardView = UIView()
    // 카드 뷰에 내용을 추가
    
    return cardView
}

func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
    // 카드가 스와이프된 후에 호출되는 메서드
    // 다른 카드들의 위치에 영향을 주는 작업을 수행할 수 있습니다.
}

위의 예시에서 koloda(_:viewForCardAt:) 메서드는 카드 뷰를 만들어 반환하는 메서드입니다. 원하는 형태의 카드를 구성한 후, 해당 카드 뷰를 반환하면 KolodaView에서 사용됩니다.

koloda(_:didSwipeCardAt:in:) 메서드는 카드가 스와이프된 후 호출되는 메서드입니다. 이 메서드에서 다른 카드들의 위치에 영향을 주는 작업을 수행할 수 있습니다.

카드 위치 조정하기

다른 카드들의 위치에 영향을 주기 위해서는 koloda(_:didSwipeCardAt:in:) 메서드에서 카드들의 위치를 조정해야 합니다. KolodaView는 카드 스와이프 후 자동으로 카드들을 정렬하지 않으므로, 직접 위치를 조정해야 합니다.

다음은 카드 스와이프 후에 다른 카드들을 위치 조정하는 예시입니다.

func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
    for i in index+1..<kolodaView.countOfVisibleCards {
        let card = kolodaView.viewForCard(at: i)
        // 카드 위치 조정
        let newXPosition = card.frame.origin.x - 20 // 다음 카드를 왼쪽으로 이동시킴
        card.frame.origin.x = newXPosition
    }
}

위의 예시에서는 스와이프된 카드 다음의 카드들을 왼쪽으로 20만큼 이동시키도록 구현하였습니다.

원하는 위치 조정 방식에 따라 다양한 로직을 구현할 수 있으니, 필요에 맞게 수정하여 사용하시기 바랍니다.

결론

이번 글에서는 Swift Koloda를 사용하여 카드 슬라이드 시 다른 카드들의 위치에 영향을 주는 방법을 알아보았습니다. Koloda를 이용하면 쉽게 카드 슬라이드 인터페이스를 구현할 수 있으며, 다른 카드들의 위치를 원하는 대로 조정할 수 있습니다. 적절한 위치 조정 로직을 구현하여 카드 슬라이드를 더욱 흥미롭게 만들어보세요!

References

Koloda GitHub Repository