[swift] Swift Koloda를 사용하여 카드 랜덤 배치하기

16 Nov 2023

swift

iOS 애플리케이션을 개발할 때 카드 뷰를 사용하는 경우가 종종 있습니다. Swift Koloda는 이러한 카드 뷰 레이아웃을 쉽게 구현할 수 있는 오픈 소스 라이브러리입니다. 이번 글에서는 Swift Koloda를 사용하여 카드를 랜덤하게 배치하는 방법에 대해 알아보겠습니다.

Koloda 라이브러리 설치

Koloda를 사용하기 위해 먼저 CocoaPods를 설치해야 합니다. Podfile에 다음을 추가하고 터미널에서 pod install을 실행하세요.

pod 'Koloda'

설치가 완료되면 프로젝트에서 Koloda 관련 클래스와 델리게이트를 사용할 수 있습니다.

카드 데이터 구성

맨 처음에는 카드의 데이터를 구성해야 합니다. 카드는 보통 모델 객체로 구성되며, 다양한 속성을 가질 수 있습니다. 예를 들어, 카드의 이미지, 제목, 내용 등을 포함할 수 있습니다.

struct Card {
    let image: UIImage
    let title: String
    let content: String
}

Koloda 뷰 컨트롤러 생성

카드를 랜덤하게 배치하기 위해 Koloda 뷰 컨트롤러를 생성해야 합니다. 이 뷰 컨트롤러를 통해 카드들을 관리하고 사용자의 제스처를 감지할 수 있습니다.

import UIKit
import Koloda

class ViewController: UIViewController, KolodaViewDataSource {
    
    @IBOutlet weak var kolodaView: KolodaView!
    
    var cards: [Card] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 카드 데이터 초기화
        cards = generateCards() // 카드 데이터를 생성하는 메소드 호출
        
        kolodaView.dataSource = self
        
        kolodaView.reloadData()
    }
    
    // 카드 데이터 생성 메소드
    func generateCards() -> [Card] {
        // 카드 데이터를 랜덤하게 생성하여 반환하는 로직
    }
    
    // Koloda 델리게이트 메소드 구현
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return cards.count
    }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        // 카드 뷰를 생성하고 반환하는 로직
    }
    
    //...
    
}

랜덤한 카드 데이터 생성

랜덤하게 카드 데이터를 생성하려면 generateCards() 메소드를 구현해야 합니다. 원하는 개수만큼의 카드를 생성하고, 이미지와 제목, 내용을 랜덤하게 설정할 수 있습니다.

func generateCards() -> [Card] {
    var cards: [Card] = []
    
    for index in 1...10 {
        let imageName = "card\(index)"
        if let image = UIImage(named: imageName) {
            let card = Card(image: image, title: "Card \(index)", content: "This is card number \(index)")
            cards.append(card)
        }
    }
    
    return cards
}

카드 뷰 생성

viewForCardAt() 메소드에서 각 카드에 대한 뷰를 생성하고 반환해야 합니다. 여기서는 간단히 UIImageView를 사용하여 이미지를 표시하고, 제목과 내용은 UILabel로 표시합니다.

func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
    let card = cards[index]
    
    let containerView = UIView()
    containerView.backgroundColor = .white
    containerView.layer.cornerRadius = 10
    
    let imageView = UIImageView(image: card.image)
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    imageView.frame = containerView.bounds
    containerView.addSubview(imageView)
    
    let titleLabel = UILabel(frame: CGRect(x: 20, y: 20, width: containerView.bounds.width - 40, height: 30))
    titleLabel.text = card.title
    titleLabel.font = UIFont.boldSystemFont(ofSize: 20)
    containerView.addSubview(titleLabel)
    
    let contentLabel = UILabel(frame: CGRect(x: 20, y: 70, width: containerView.bounds.width - 40, height: 60))
    contentLabel.text = card.content
    contentLabel.numberOfLines = 0
    containerView.addSubview(contentLabel)
    
    return containerView
}

결과 확인

이제 앱을 실행하여 카드들이 랜덤하게 배치되는지 확인해보세요. Koloda를 사용하면 간단하게 카드 뷰를 구현할 수 있으며, 커스터마이징할 수 있는 다양한 기능도 제공됩니다.

이렇게 Swift Koloda를 사용하여 카드를 랜덤하게 배치하는 방법을 알아보았습니다. Koloda의 다양한 기능을 활용하여 멋진 카드 뷰 레이아웃을 구현해보세요.