iOS) VerticalCardSwiper 오픈라이브러리를 알아보자

최근에 현대카드 DIVE 라는 앱의 레이아웃을 보고 다음과 같은 layout 를 가지는 오픈 라이브러리가 없나 찾아보았다.

현대카드 DIVE [개발하는정대리] : https://www.youtube.com/watch?v=B8-cTdaUuRQ

VerticalCardSwiper 오픈 라이브러리를 사용해보자.

GitHub - JoniVR/VerticalCardSwiper: A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.

Introduce

이 프로젝트의 목표는 카드를 왼쪽/오른쪽으로 스와이프하는 Tinder 스타일과 결합하여 Shazam 의 Discover UI 를 재현하는 것이라고 한다. 이것은 UICollectionView 및 custom flowLayout 으로 빌드됩니다.

Installation

CocoaPods

pod 'VerticalCardSwiper'

Usage

우리가 사용할 주요한 클래스들이 무엇을 상속받는지 먼저 확인해보자

public class VerticalCardSwiper: UIView {

    /// The collectionView where all the magic happens.
    public var verticalCardSwiperView: VerticalCardSwiperView!
// ...

public class VerticalCardSwiperView: UICollectionView {
// ...

@objc open class CardCell: UICollectionViewCell {

우리는 뷰컨트롤러에서 VerticalCardSwiper 를 만들고 원하는 크기대로 설정을 할 것이다.

깃허브에서 제공하는 코드를 보자

• ViewController.swift

import VerticalCardSwiper

class ExampleViewController: UIViewController, VerticalCardSwiperDatasource {

    private var cardSwiper: VerticalCardSwiper!

    override func viewDidLoad() {
        super.viewDidLoad()

        cardSwiper = VerticalCardSwiper(frame: self.view.bounds)
        view.addSubview(cardSwiper)

        cardSwiper.datasource = self

        // register cardcell for storyboard use
        cardSwiper.register(nib: UINib(nibName: "ExampleCell", bundle: nil), forCellWithReuseIdentifier: "ExampleCell")
    }

    func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {

        if let cardCell = verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "ExampleCell", for: index) as? ExampleCardCell {
            return cardCell
        }
        return CardCell()
    }

    func numberOfCards(verticalCardSwiperView: VerticalCardSwiperView) -> Int {
        return 100
    }
}

CardCell 를 상속받아서 ExampleCardCell 를 커스텀할 수 있다.

나는 좀 더 편하게 사용해보고 싶었다.

다음과 같이 대체했다

• ViewController.swift

@IBOutlet weak var cardSwiper: VerticalCardSwiper!
// private var cardSwiper: VerticalCardSwiper!

    override func viewDidLoad() {
        super.viewDidLoad()
                // cardSwiper = VerticalCardSwiper(frame: self.view.bounds)
                // view.addSubview(cardSwiper)
                cardSwiper.datasource = self
        cardSwiper.register(nib: UINib(nibName: "VerticalCardSwiperCell", bundle: nil), forCellWithReuseIdentifier: "VerticalCardSwiperCell")
    }

• VerticalCardSwiperCell.swift

import UIKit
import VerticalCardSwiper

class VerticalCardSwiperCell: CardCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
}

• VerticalCardSwiperCell.xib

다음과 같이 꽉차도록 uiview 를 만들었고 card 를 구분할 수 있도록 background color 를 설정해보았다.

Result

잘 적용이 되었다.

최대한 현대카드 DIVE 앱을 클론해보자

코드

• ViewController.swift

import UIKit
import VerticalCardSwiper

class ViewController: UIViewController {

    // MARK: - Properties

    private var imageList = [String]()
    private var categoryList = [String]()
    private var titleList = [String]()
    private var subtitleList = [String]()
    private var brandList = [String]()

    // MARK: - @IBOutlet Properteis

    @IBOutlet weak var cardSwiper: VerticalCardSwiper!

    // MARK: - View Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()

        cardSwiper.datasource = self
        cardSwiper.delegate = self

        cardSwiper.register(nib: UINib(nibName: "VerticalCardSwiperCell", bundle: nil), forCellWithReuseIdentifier: "VerticalCardSwiperCell")

        setList()
    }
}

// MARK: - Extensions

extension ViewController {
    private func setList() {
        imageList.append(contentsOf: [ "img1",
                                       "img2",
                                       "img3",
                                       "img4",
                                       "img5"
        ])
        categoryList.append(contentsOf: [ "디자인 아트",
                                       "디자인 아트",
                                       "디자인 아트",
                                       "디자인 아트",
                                       "디자인 아트"
        ])
        brandList.append(contentsOf: [ "DESIGN\nLIBRARY",
                                       "",
                                       "DESIGN\nLIBRARY",
                                       "",
                                       "DESIGN\nLIBRARY"
        ])
        titleList.append(contentsOf: [ "건축의\n연금술사",
                                       "음악 만화\n보면서\n음악 들어봤어?",
                                       "똑똑똑\n아트 시티 서울",
                                       "공간을\n조각하는 사람들",
                                       "무한의\n스펙트럼"
        ])
        subtitleList.append(contentsOf: [ "7월의 디자이너 건축가 장 누벨",
                                       "나의 최애 음악 만화3",
                                       "서울, 글로벌 미술 시장의 새로운 중심",
                                       "독창적 스타일의 세라믹 아티스트",
                                       "서울의 아트테이너"
        ])
    }
}

// MARK: - VerticalCardSwiperDelegate

extension ViewController: VerticalCardSwiperDelegate {

}
// MARK: - VerticalCardSwiperDatasource

extension ViewController : VerticalCardSwiperDatasource {
    func numberOfCards(verticalCardSwiperView: VerticalCardSwiperView) -> Int {
        return imageList.count
    }

    func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {
        guard let cell =  verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "VerticalCardSwiperCell", for: index) as? VerticalCardSwiperCell else {
            return CardCell()
        }
        cell.initCell(background: imageList[index], brand: brandList[index], category: categoryList[index], title: titleList[index], subtitle: subtitleList[index])
        return cell
    }
}

• VerticalCardSwiperCell.xib

• VerticalCardSwiperCell.swift

import UIKit
import VerticalCardSwiper

class VerticalCardSwiperCell: CardCell {

    // MARK: - @IBOutlet Properties

    @IBOutlet weak var backgroundImage: UIImageView!
    @IBOutlet weak var opacityView: UIView!
    @IBOutlet weak var brandLabel: UILabel!
    @IBOutlet weak var categoryView: UIView!
    @IBOutlet weak var categoryLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var subtitleLabel: UILabel!

    // MARK: - Life Cycle

    override func awakeFromNib() {
        super.awakeFromNib()
        setUI()
    }
}

extension VerticalCardSwiperCell {
    private func setUI() {
        backgroundImage?.layer.cornerRadius = 10
        backgroundImage.contentMode = .scaleAspectFill

        opacityView.backgroundColor = UIColor.black
        opacityView.alpha = 0.4
        opacityView.layer.cornerRadius = 10

        brandLabel.font = UIFont.systemFont(ofSize: 15, weight: .bold)
        brandLabel.textColor = .white
        brandLabel.numberOfLines = 0

        categoryView.layer.cornerRadius = categoryView.frame.height / 2

        categoryLabel.font = UIFont.systemFont(ofSize: 12, weight: .regular)

        titleLabel.font = UIFont.systemFont(ofSize: 45, weight: .bold)
        titleLabel.textColor = .white
        titleLabel.numberOfLines = 0

        subtitleLabel.font = UIFont.systemFont(ofSize: 15, weight: .regular)
        subtitleLabel.textColor = .white
    }

    func initCell(background: String, brand: String, category: String, title: String, subtitle: String) {
        if let background = UIImage(named: background)  {
            self.backgroundImage.image = background
        }
        self.brandLabel.text = brand
        self.categoryLabel.text = category
        self.titleLabel.text = title
        self.subtitleLabel.text = subtitle
    }
}

---

GitHub - hyun99999/VerticalcardswiperTutorial-iOS: 📇 VerticalcardswiperTutorial