[swift] Swift Koloda를 사용하여 카드 터치 시 이미지 효과 적용하기

카드 뷰를 사용하여 사용자에게 다양한 이미지를 보여주고, 사용자가 카드를 터치할 때 효과를 적용하고 싶다면 Swift Koloda 라이브러리를 사용할 수 있습니다. Swift Koloda는 Tinder와 같은 스와이프 기반의 카드뷰 인터페이스를 구현할 수 있는 라이브러리입니다.

Koloda 설정하기

먼저, 프로젝트에 Swift Koloda 라이브러리를 추가해야 합니다. 프로젝트의 Podfile에 다음과 같이 추가합니다:

pod 'Koloda'

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

카드뷰 구성하기

다음으로, 카드뷰를 구성해야 합니다. 먼저, KolodaView를 추가하기 위해 Storyboard 또는 코드에서 View를 생성합니다. 그런 다음 KolodaView를 IBOutlet으로 연결합니다.

@IBOutlet weak var kolodaView: KolodaView!

카드 데이터 소스 설정하기

KolodaViewDelegate와 KolodaViewDataSource 프로토콜을 사용하여 카드 데이터 소스를 구현해야 합니다. 아래와 같이 카드 데이터 소스를 구성합니다.

class ViewController: UIViewController, KolodaViewDelegate, KolodaViewDataSource {

    var cardImages = [UIImage(named: "image1"), UIImage(named: "image2"), UIImage(named: "image3")]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        kolodaView.delegate = self
        kolodaView.dataSource = self
    }
    
    // MARK: KolodaViewDataSource
    
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return cardImages.count
    }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        let cardView = UIView()
        cardView.layer.cornerRadius = 10.0
        cardView.layer.masksToBounds = true
        
        let imageView = UIImageView(frame: cardView.bounds)
        imageView.image = cardImages[index]
        imageView.contentMode = .scaleAspectFill
        cardView.addSubview(imageView)
        
        return cardView
    }
}

위의 코드에서 cardImages 배열에 원하는 이미지를 추가합니다. 위의 예제에서는 3개의 이미지를 사용하고 있습니다.

카드 터치 시 효과 적용하기

카드를 터치할 때 효과를 적용하기 위해 KolodaViewDelegate의 kolodaDidSwipeCard 메서드를 사용합니다. 다음은 카드를 터치할 때 원하는 효과를 적용하는 예제입니다.

func kolodaDidSwipeCard(_ koloda: KolodaView, at index: Int, in direction: SwipeResultDirection) {
    if direction == .right {
        // 오른쪽으로 스와이프할 때의 효과
        UIView.animate(withDuration: 0.5) {
            koloda.subviews[index].transform = CGAffineTransform(rotationAngle: .pi / 4)
        }
    } else if direction == .left {
        // 왼쪽으로 스와이프할 때의 효과
        UIView.animate(withDuration: 0.5) {
            koloda.subviews[index].alpha = 0.5
        }
    }
}

위의 예제에서는 오른쪽으로 스와이프할 때는 카드를 45도로 회전시키고, 왼쪽으로 스와이프할 때는 카드의 투명도를 0.5로 설정합니다. 이는 원하는 효과로 변경할 수 있습니다.

결론

Swift Koloda를 사용하여 카드 터치 시 이미지 효과를 적용하는 방법을 알아보았습니다. Koloda를 사용하면 Tinder와 같은 인터페이스를 쉽게 구현할 수 있습니다. 자세한 내용은 Swift Koloda GitHub에서 확인할 수 있습니다.