이번 글에서 소개해드릴 라이브러리는 Koloda입니다.
Tinder View와 같은 기능을 제공하는 라이브러리입니다. 저도 흥미가 있어 찾아보면서 사용해 보았는데 생각 외로 구현이 잘 되어 있어 사용하는데도 큰 어려움은 없었습니다.
이번 글에서는 간단하게 만들어보고자 여러가지 아이템을 설정한 후 아이템을 선택할 시 배경의 색상을 변경해주는 정도의 App을 한번 만들어보겠습니다.
1. 도입
우선적으로 저는 이 라이브러리 도입을 Carthage를 통해 도입하였습니다. CocoaPods 같은 경우는 도입을 간단히 진행할 수 있지만 Carthage에서는 Koloda뿐만이 아니라 같이 다운로드되는 pop도 같이 도입하여야 합니다.
2. 디자인
디자인은 우선 카드를 설정하는 View하나 그리고 카드가 전부 소모되었을 때 되돌리는 reload버튼 마지막으로 이전 카드로 되돌리는 back버튼 이렇게 간단히 3개만 설정하였습니다.
만든 view에 Koloda를 지정해주는 방법은 여러가지가 있습니다.
1. Custom Class에서 지정해주어 IBOutlet으로 사용하는 방법
2. ViewController안에서 임의의 KolodaView를 생성하여 addSubview를 사용하는 방법
이번 글에서는 간단히 1번의 과정으로 진행하여 보겠습니다.
추가한 View에 Custom Class에 KolodaView를 설정해주시고 Module에 Koloda를 설정해주시면 됩니다.
여기서 Module을 설정해주지 않으시면 아래와 같은 오류가 발생합니다.
[Storyboard] Unknown class KolodaView in Interface Builder file.
3. 코드 작성
베이스 작성을 해보겠습니다. Koloda가 사용하기 편한 이유 중에 하나가 TableView나 CollectionView와 사용법이 비슷하다는 점입니다. 때문에 처음에 어떻게 지정해줘야 할지 무엇이 어떠한 기능을 가지고 있는지 예상이 쉽게 됩니다.
import UIKit
import Koloda // 당연히 라이브러리를 사용하기 위해서는 import를 합니다.
class ViewController: UIViewController {
@IBOutlet weak var kolodaView: KolodaView! // 방금 전에 설정한 Custom Class 뷰의 IBOutlet입니다.
@IBOutlet weak var reloadButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
self.initView()
}
private func initView() {
// delegate, dataSource 를 설정해 줍니다.
self.kolodaView.delegate = self
self.kolodaView.dataSource = self
self.kolodaView.backgroundColor = .clear
self.reloadButton.alpha = 0.0
}
@IBAction func didTappedReloadButton(_ sender: UIButton) {
self.reloadButton.alpha = 0.0
self.kolodaView.resetCurrentCardIndex() // 카드를 리셋시켜주는 함수입니다.
}
@IBAction func didTappedBackButton(_ sender: UIButton) {
if self.kolodaView.isRunOutOfCards { // 카드가 전부 소진되었는지 체크할 수 있는 기능입니다.
self.reloadButton.alpha = 0.0
}
self.kolodaView.revertAction() // 전 단계로 돌리는 기능을 합니다.
}
}
extension ViewController: KolodaViewDelegate, KolodaViewDataSource {
// 카드가 전부 소진되었을 때 리로드 버튼을 표시할 수 있게 하였습니다.
func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
UIView.animate(withDuration: 1.0, delay: 0.0, options: [.curveEaseIn], animations: {
self.reloadButton.alpha = 1.0
}, completion: nil)
}
func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
// 각 인덱스의 뷰를 설정해줍니다. tableView의 cell설정이라고 보시면 됩니다.
let view = UIView()
view.backgroundColor = self.returnRainbowColor(index)
return view
}
func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
// 총인덱스의 수를 설정해줍니다.
return 7
}
func koloda(_ koloda: KolodaView, didSelectCardAt index: Int) {
// 카드를 선택하였을 때 해당 색상으로 전체 뷰의 배경을 지정해줍니다.
self.view.backgroundColor = self.returnRainbowColor(index)
}
}
extension UIViewController {
fileprivate func returnRainbowColor(_ index: Int) -> UIColor {
switch index {
case 0: return .red
case 1: return .orange
case 2: return .yellow
case 3: return .green
case 4: return .blue
case 5: return UIColor(red: 0, green: 0, blue: 128/255, alpha: 1.0)
case 6: return .purple
default: return .clear
}
}
}
4. 실행
한 번 실행해보면 무지개 색상으로 이루어진 Tinder View를 확인하실 수 있습니다.
5. 마무리
이번 글을 통하여 Koloda에 대하여 소개해드렸습니다.
아래에 링크를 남겨드리니 관심 있으신 분이나 활용해보고 싶으신 분이 있으면 사용해보시길 권장합니다.
URL에 설명도 자세히 적혀있기 때문에 사용하시는데 큰 어려움은 없으실 것 같습니다.
궁금한 사항이나 지적사항이 있으신 분은 댓글 부탁드립니다.
많은 도움이 되었으면 좋겠습니다.
감사합니다.
https://github.com/Yalantis/Koloda
Yalantis/Koloda
KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS. - Yalantis/Koloda
github.com
환경
Xcode 11.3.1
Swift 5
'Swift > 라이브러리' 카테고리의 다른 글
| [Swift] Then 을 사용해보자! (0) | 2022.01.12 |
|---|---|
| [Swift] SnapKit을 사용해보자! (0) | 2020.05.11 |