Git Product home page Git Product logo

verticalcardswipertutorial-ios's Introduction

πŸ“‡ VerticalcardswiperTutorial

VerticalCardSwiper μ˜€ν”ˆλΌμ΄λΈŒλŸ¬λ¦¬λ₯Ό μ•Œμ•„λ³΄μž μ΅œκ·Όμ— ν˜„λŒ€μΉ΄λ“œ DIVE λΌλŠ” μ•±μ˜ λ ˆμ΄μ•„μ›ƒμ„ 보고 λ‹€μŒκ³Ό 같은 layout λ₯Ό κ°€μ§€λŠ” μ˜€ν”ˆ λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ—†λ‚˜μ°Ύμ•„λ³΄μ•˜λ‹€.

2021.07.29 (λͺ©) - ν˜„λŒ€μΉ΄λ“œ DIVE iOS

μ•„λž˜μ˜ μ‚¬μ΄νŠΈκ°€ μ•„μ£Ό μœ μš©ν•˜λ‹€ μΆ”μ²œν•œλ‹€

iOS Example

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 앱을 ν΄λ‘ ν•΄λ³΄μž

verticalcardswipertutorial-ios's People

Contributors

hyun99999 avatar

Stargazers

 avatar

Watchers

 avatar

verticalcardswipertutorial-ios's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.