:star: Custom card-designed CollectionView layout

Overview

CardsLayout

CardsLayout is a lightweight Collection Layout.

CocoaPods Platform Twitter GitHub license

Preview

Installation

CocoaPods

You can use CocoaPods to install CardsLayout by adding it to your Podfile:

platform :ios, '9.0'
use_frameworks!
pod 'CardsLayout'
import CardsLayout

Manual

  1. Add CardsCollectionViewLayout file to your project
  2. Configure collectionView:
    collectionView.collectionViewLayout = CardsCollectionViewLayout()
    collectionView.isPagingEnabled = true
    collectionView.showsHorizontalScrollIndicator = false
Comments
  • Move card programatically

    Move card programatically

    Hi, before all, awesome work.

    I will like to block the user to swipe the card manually and do it programmatically, when I considere necessary, like a stepper. is this possible?

    opened by bubudrc 6
  • Replace line that causes segueing errors

    Replace line that causes segueing errors

    Replaced the range-format visibleIndices line with a stride-format as it was causing crashes when returning from segues as minVisibleIndex could become greater than maxVisibleIndex

    opened by lurein 3
  • Infinite Scroll

    Infinite Scroll

    Hello and thanks for this great Collection Layout ! 👍

    I have a question, is it being considered to handle infinite scroll ? By infinite scroll I mean, when you scroll a card to the left, it appears at the end of the list.

    Thanks in advance

    opened by mfamilariSnapp 2
  • Unable to resolve the pod

    Unable to resolve the pod

    Hi! I have tried to play with the pod in Xcode project, but it turned out that the pod can not be resolved. Here's output of pod install command:

    ➜ CardsTest pod install Analyzing dependencies [!] Unable to find a specification for CardsLayout

    Same for pod install --repo-update

    opened by anverbogatov 2
  • Shadow with cards

    Shadow with cards

    Hi, thanks for your repository. I just implemented this in my collectionView. And what I need is to add a shadow to the bottom of the highlighted card. I gave the shadow effect to the collectionViewCell, but it is not showing. Now it is coming like this , Screen Shot 2019-06-26 at 11 37 24 AM

    opened by hilajqinnovation 1
  • Cards Size issue

    Cards Size issue

    Hi, i have implemented your library in my collection view and when i run the app it shows cards size very small. How can library get the size my collection view cell size? This is my code, //Collection View Reload self.knowledgeCollectionView.collectionViewLayout = CardsCollectionViewLayout() self.knowledgeCollectionView.isPagingEnabled = true self.knowledgeCollectionView.showsHorizontalScrollIndicator = false

    opened by Hamza123Imran 1
  • Crash on Calling Collection Reload

    Crash on Calling Collection Reload

    Hi , i have used ur library in my collection view, i have mad my custom collection view have a single image on cell. I have passed all the data source and delegate this is my code, //Collection View Reload self.knowledgeCollectionView.collectionViewLayout = CardsCollectionViewLayout() self.knowledgeCollectionView.isPagingEnabled = true self.knowledgeCollectionView.showsHorizontalScrollIndicator = false self.knowledgeCollectionView.reloadData()

    ` override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return cardsArray.count }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = knowledgeCollectionView.dequeueReusableCell(withReuseIdentifier: "knowledgeCell", for: indexPath) as! KnowledgeCVC
        
        cell.cardImage.image = cardsArray[indexPath.row]
        
        return cell
    }`
    

    But when i call my VC the app crashes on a delegate written in ur library, ` // MARK: - UICollectionViewDelegateFlowLayut

    @objc open func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
        guard let cellWidthValue = cachedCellWidths?[indexPath.row] else {
            fatalError("cachedCellWidths for \(indexPath.row) must not be nil")
        }
        return CGSize(width: cellWidthValue, height: collectionView.frame.size.height)
    }`
    

    Error is Thread 1: Fatal error: Index out of range . How i can get rid of this?

    opened by Hamza123Imran 1
  • Disable swipe to previous card

    Disable swipe to previous card

    Is there a way to only swipe to next card? The user should not be able to scroll back to previous card. Also, is there a way to swipe away the last card?

    opened by andynadheer 1
  • Wrong IndexPath on Cells via OjbC Bridging

    Wrong IndexPath on Cells via OjbC Bridging

    Not sure if this is up to your library but I'll try nevertheless.

    I'm using CardsCollectionViewLayout in my code via Swift Bridging for my CollectionView.

    Objective-C (Not Working)

    My issue is that IndexPath is returning wrong Item index. Here is the minimal code:

    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        self.collectionViewEvents.collectionViewLayout = [[CardsCollectionViewLayout alloc] init];
        self.collectionViewEvents.dataSource = self;
        self.collectionViewEvents.delegate = self;
        self.collectionViewEvents.pagingEnabled = YES;
        self.collectionViewEvents.showsHorizontalScrollIndicator = NO;
    
        [self load];
    }
    
    // Issue visible here, the indexPath.item is not correct
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
        for (UICollectionViewCell *cell in self.collectionViewEvents.visibleCells) {
            NSIndexPath *indexPath = [[self collectionViewEvents] indexPathForCell:cell];
            NSLog(@"Visible Cell IndexPath Item %ld", indexPath.item);
            return;
        }
    }
    
    - (void)load
    {
    
        // self.eventData is declares as: @property (nonatomic) NSArray *eventData;
        self.eventData = [[NSArray alloc] initWithObjects:UIColor.blackColor, UIColor.whiteColor, UIColor.brownColor, nil];
        [[self collectionViewEvents] reloadData];
    }
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionViewCellReuseIdentifier"
                                                                               forIndexPath:indexPath];
    
        cell.layer.cornerRadius = 7.0;
        cell.backgroundColor = UIColor.blackColor;
    
        return cell;
    }
    
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
        return self.eventData.count;
    }
    

    Result (notice how both 1st and 2nd cell has same IndexPath Item):

    2020-03-19 14:48:05.334905+0100 App[7422:2617858] Visible Cell IndexPath Item 2 # => 3rd cell
    2020-03-19 14:48:05.741805+0100 App[7422:2617858] Visible Cell IndexPath Item 1 # => 2nd cell
    2020-03-19 14:48:06.184932+0100 App[7422:2617858] Visible Cell IndexPath Item 1 # => 1st cell
    

    Swift (Working)

    I tried your Example from this code Repository, which has declared colors statically:

      var colors: [UIColor]  = [
        UIColor(red: 237, green: 37, blue: 78),
        UIColor(red: 249, green: 220, blue: 92),
        UIColor(red: 194, green: 234, blue: 189),
        UIColor(red: 1, green: 25, blue: 54),
        UIColor(red: 255, green: 184, blue: 209)
      ]
    ...
    
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCellReuseIdentifier", for: indexPath)
    
            cell.layer.cornerRadius = 7.0
            cell.backgroundColor = .black
    
            return cell
        }
    

    And after implementing this code below, it returns proper IndexPath.

        // Issue NOT visible here, the indexPath.item IS correct
        func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    
            for cell in collectionView.visibleCells {
                let indexPath = collectionView.indexPath(for: cell)
                print(indexPath?.item)
                return
            }
        }
    

    Result:

    2020-03-19 14:48:05.334905+0100 App[7422:2617858] Visible Cell IndexPath Item 2 # => 3rd cell
    2020-03-19 14:48:05.741805+0100 App[7422:2617858] Visible Cell IndexPath Item 1 # => 2nd cell
    2020-03-19 14:48:06.184932+0100 App[7422:2617858] Visible Cell IndexPath Item 0 # => 1st cell
    

    What am I doing wrong in my Objective-C code?

    Things I've tried

    // 1st cell has index 1, instead of 0
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
        for (UICollectionViewCell *cell in [[self collectionViewEvents] visibleCells]) {
            NSIndexPath *indexPath = [[self collectionViewEvents] indexPathForCell:cell];
            NSLog(@"Visible Cell IndexPath Item %ld", indexPath.item);
            return;
        }
    
    // 1st cell has index 1, instead of 0
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
        NSArray *visible = [self.collectionViewEvents indexPathsForVisibleItems];
        NSIndexPath *indexPath = [visible firstObject];
        NSLog(@"Visible Cell IndexPath Item %ld", indexPath.item);
        return;
    
    // Calling it in main thread, same result
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            for (UICollectionViewCell *cell in [[self collectionViewEvents] visibleCells]) {
                NSIndexPath *indexPath = [[self collectionViewEvents] indexPathForCell:cell];
                NSLog(@"Visible Cell IndexPath Item %ld", indexPath.item);
                return;
            }
        });
    
    help wanted 
    opened by duraki 1
  • Card Swipe not working

    Card Swipe not working

    Hi, i have implemented lib in my app now when i try to swipe card they aren't working not even its selection function is working, it looks like it get stuck, other application is working fine but CardsLayout is stuck, how can i resolve this? My code for calling CardsLayout is this, //Collection View Reload self.knowledgeCollectionView.collectionViewLayout = CardsCollectionViewLayout() self.knowledgeCollectionView.isPagingEnabled = true self.knowledgeCollectionView.showsHorizontalScrollIndicator = false

    I have passed it to my collection view, at first it was working now i have tried code after a long time it get stuck. Please help me in this.

    opened by Hamza123Imran 0
Releases(0.0.1)
Owner
Filipp Fediakov
Software Developer Engineer at Amazon. MSc Management at University of Edinburgh. BS Computer Science at BMSTU.
Filipp Fediakov
Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI

Swipable, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI Сocoapods installation Add in your Podfile: po

Indy 850 Nov 17, 2022
IOS Card Game - A simple card game using SwiftUI

IOS_Card_Game A simple card game using Swift UI.

Md. Masum Musfique 1 Mar 25, 2022
A SwiftUI based custom sheet card to show information in iOS application.

A SwiftUI based custom sheet card to show any custom view inside the card in iOS application.

Mahmud Ahsan 4 Mar 28, 2022
KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

KolodaView Check this article on our blog. Purpose KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS. It adds

Yalantis 5.2k Jan 2, 2023
A reactive, card-based UI framework built on UIKit for iOS developers.

CardParts - made with ❤️ by Intuit: Example Requirements Installation Communication & Contribution Overview Quick Start Architecture CardsViewControll

Intuit 2.5k Jan 4, 2023
A SwiftUI card view, made great for setup interactions.

SlideOverCard A SwiftUI card design, similar to the one used by Apple in HomeKit, AirPods, Apple Card and AirTag setup, NFC scanning, Wi-Fi password s

João Gabriel 716 Dec 29, 2022
This UI attempts to capture the Quibi Card Stack and the associated User Interaction.

RGStack This UI attempts to capture the Quibi Card Stack and the associated User Interaction. Required A View that conforms to the ConfigurableCard pr

RGeleta 96 Dec 18, 2022
Card-based view controller for apps that display content cards with accompanying maps, similar to Apple Maps.

TripGo Card View Controller This is a repo for providing the card-based design for TripGo as well as the TripKitUI SDK by SkedGo. Specs 1. Basic funct

SkedGo 6 Oct 15, 2022
Card flip animation by pan gesture.

CardAnimation Design from Dribble. 实现思路在这里。 Two Solutions At the begin, I didn't encapsulate code, @luxorules refactor code into class and improve it

null 1.2k Dec 14, 2022
Awesome looking Dial like card selection ViewController

KVCardSelectionVC Awesome looking Dial like card selection ViewController An updated Swift 3 working version of : https://github.com/atljeremy/JFCardS

Kunal Verma 23 Feb 1, 2021
🃏 Tinder like card interface

Features Swift 3 Custom views for the card & overlay Generic Dynamically add new cards on top or on the bottom Lazy view loading Setup pod 'DMSwipeCar

Dylan Marriott 250 Nov 15, 2022
🔥 A multi-directional card swiping library inspired by Tinder

Made with ❤️ by Mac Gallagher Features ?? Advanced swipe recognition based on velocity and card position ?? Manual and programmatic actions ?? Smooth

Mac Gallagher 754 Dec 28, 2022
An iOS library to create beautiful card transitions.

CSCardTransition CSCardTransition is a small library allowing you to create wonderful push and pop transition animations like in the App Store. It wor

Creastel 5 Jan 14, 2022
SimpleCardView-SwiftUI is a very simple card view written with SwiftUI

SimpleCardView-SwiftUI is a very simple card view written with SwiftUI

Tomortec 3 May 19, 2022
GLScratchCard - Scratch card effect

I loved the way payments app's like Google pay and PhonePe used scratch card option to reward it's user. Hence with ?? cloned the same scratch card effect for you guys out there

Gokul 84 Dec 5, 2022
A Star Wars themed card game designed to see if you know your sith vs jedi

StarWarsCardGame A Star Wars themed card game designed to see if you know your sith vs jedi. Learning Objectives: Alert Controllers, Protocol/Delegate

Jonathan Llewellyn 0 Nov 29, 2021
Cusom CollectionView card layout

MMCardView Example To run the example project, clone the repo, and run pod install from the Example directory first. Demo 1.Card Requirements iOS 8.0+

Millman Yang 556 Dec 5, 2022
SwiftUI-Card - Simple card ui designed using SwiftUI

SwiftUI - Card Simple card ui designed using SwiftUI Preview

bahri hırfanoğlu 0 Feb 5, 2022
A CollectionView Layout displaying a slanted cells

CollectionViewSlantedLayout is a subclass of the UICollectionViewLayout allowing the display of slanted cells in a UICollectionView. Features Pure Swi

Yassir Barchi 2.2k Dec 27, 2022
A CollectionView Layout displaying a slanted cells

CollectionViewSlantedLayout is a subclass of the UICollectionViewLayout allowing the display of slanted cells in a UICollectionView. Features Pure Swi

Yassir Barchi 2.2k Dec 27, 2022