π VerticalcardswiperTutorial
VerticalCardSwiper μ€νλΌμ΄λΈλ¬λ¦¬λ₯Ό μμ보μ μ΅κ·Όμ νλμΉ΄λ DIVE λΌλ μ±μ λ μ΄μμμ λ³΄κ³ λ€μκ³Ό κ°μ layout λ₯Ό κ°μ§λ μ€ν λΌμ΄λΈλ¬λ¦¬κ° μλμ°Ύμ보μλ€.
2021.07.29 (λͺ©) - νλμΉ΄λ DIVE iOS
μλμ μ¬μ΄νΈκ° μμ£Ό μ μ©νλ€ μΆμ²νλ€
VerticalCardSwiper λΌλ μ€ν λΌμ΄λΈλ¬λ¦¬λ₯Ό μ°Ύμλ€.
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
μ μ μ©μ΄ λμλ€.