Ios-card-transition - iOS CocoaPod to create beautiful card transitions

Overview

CSCardTransition

Version Xcode 10.0+ iOS 10.0+ Swift 5.0+ License

CSCardTransition is a small library allowing you to create wonderful push and pop transition animations like in the App Store. It works side by side with your navigation controller, and ensure that you only code what's necessary for your custom transition.

Screenshots

Library Example On Time - Available on the App Store

Installation

CocoaPod

Add this line to your Podfile.

pod 'CSCardTransition'

Manually

Drag the files inside the CSCardTransition folder into your project.

Usage

After creating a "Card Presenter" View Controller and your "Presented Card" View Controller, you will simply need to follow this steps:

Card View Presenter (Required step)

In the View Controller that serves as the view "Presenter", in other word, in the View Controller that contains the card to be expanded, you will need to add the CSCardViewPresenter protocol and define what UIView should be used as the card to be presented:

extension YourViewController: CSCardViewPresenter {
    var cardViewPresenterCard: UIView? {
        return cardView // Return the view that represents the start of your transition
    }
}

Presented Card View (Required step)

In the View Controller that serves as the "Presented" card view, in other word, in the View Controller that is the expanded Card View, you will need to define a CSCardTransitionInteractor and add the CSCardPresentedView protocol:

class YourViewController: UIViewController {
    ...
    // To enable the drag gesture to pop out the card view and go back to the parent view controller.
    lazy var cardTransitionInteractor: CSCardTransitionInteractor = CSCardTransitionInteractor(viewController: self)
    ...
}
extension YourViewController: CSCardPresentedView {
    ... // You will probably add certain methods here later.
}

Status Bar Style Transition (Optional step)

If your status bar style is different from one view to the other, you will need to implement the cardViewPresenterShouldUpdateBar(to style: UIStatusBarStyle) protocol in the Card Presenter View Controller and in the Presented Card View Controller so that the transition stays smooth. To do so, you may want to add a new var that determines the current status bar style like in the following example:

class YourViewController: UIViewController {
    ...
    // /!\ Set the following var to the style of the status bar in you view controller (here: .default)
    private var currentStatusBarStyle: UIStatusBarStyle = .default
    override var preferredStatusBarStyle: UIStatusBarStyle { currentStatusBarStyle } // Overrides the status bar style
    ...
}
extension YourViewController: CSCardViewPresenter // Do the same for the CSCardPresentedView {
    ...
    /// Called when the status bar style should be updated to match the transition progress
    func cardViewPresenterShouldUpdateBar(to style: UIStatusBarStyle) {
        currentStatusBarStyle = style
        setNeedsStatusBarAppearanceUpdate() // Tell the OS to change the status bar style
    }
}

Custom transition in the Presented view (Optional but often followed step)

You may want to customize you transition by disabling/enabling/updating layout constraints, changing view's alpha, corner radius, ... You may also want to disable the card transition at some point for some reason (for example when you don't know if the card view is still on screen in the Parent View Controller). You can do so by implementing the following methods. You can read the code example to get some ideas.

extension YourViewController: CSCardPresentedView {
    /// A Boolean indicating whether or not the card transition should occur.
    var cardTransitionEnabled: Bool { get }
        
    /// Called when the transition to this view controller just started.
    func cardPresentedViewDidStartPresenting() {}
    /// Called when the transition to this view controller is currently in progress
    /// - Parameter progress: The current progress of the transition (between 0 and 1)
    func cardPresentedViewDidUpdatePresentingTransition(progress: CGFloat) {}
    /// Called when the transition to this view controller is about to end.
    func cardPresentedViewWillEndPresenting() {}
        
    /// Called when the transition back to the parent view controller is about to start.
    func cardPresentedViewWillStartDismissing() {}
    /// Called when the transition back to the parent view controller has started.
    func cardPresentedViewDidStartDismissing() {}
    /// Called when the transition back to the parent view controller is about to be canceled.
    func cardPresentedViewWillCancelDismissing() {}
    /// Called when the transition back to the parent view controller is currently in progress.
    /// - Parameter progress: The current progress of the transition (between 0 and 1)
    func cardPresentedViewDidUpdateDismissingTransition(progress: CGFloat) {}
    /// Called when the transition back to the parent view controller is about to be completed.
    func cardPresentedViewWillEndDismissing() {}
}

Custom transition in the View Presenter (Optional step)

You may want to customize you transition in the presenter by disabling/enabling layout constraints, changing view's alpha, corner radius, ... You can do so by implementing the following methods. You can read the code example to get some ideas.

extension YourViewController: CSCardViewPresenter {
    /// Called when the transition to the card view controller just started.
    func cardViewPresenterDidStartDismissing() {}
    /// Called when the transition to the card view controller is currently in progress
    /// - Parameter progress: The current progress of the transition (between 0 and 1)
    func cardViewPresenterDidUpdateDismissingTransition(progress: CGFloat) {}
    /// Called when the transition to the card view controller is about to end.
    func cardViewPresenterWillEndDismissing() {}
    
    /// Called when the transition back to this view controller is about to start.
    func cardViewPresenterWillStartPresenting() {}
    /// Called when the transition back to this view controller has started.
    func cardViewPresenterDidStartPresenting() {}
    /// Called when the transition back to this view controller is about to be canceled.
    func cardViewPresenterWillCancelPresenting() {}
    /// Called when the transition back to this view controller is currently in progress.
    /// - Parameter progress: The current progress of the transition (between 0 and 1)
    func cardViewPresenterDidUpdatePresentingTransition(progress: CGFloat) {}
    /// Called when the transition back to this view controller is about to be completed.
    func cardViewPresenterWillEndPresenting() {}
}

Good to know

A CSCardPresentedView can also be a CSCardViewPresenter, that is what makes this library so powerful ;)

Informations

This library is brought to you by Creastel.
You can reach us at [email protected].

You might also like...
Luhn Credit Card Validation Algorithm

Luhn Algorithm This is a port of the Luhn Algorithm, generally used for validating Credit Card details, to Objective-C (iOS). Swift port can be found

Welcome Busines Card Built With Swift
Welcome Busines Card Built With Swift

BusinessCard Welcome Busines Card Main screen Contacts screen More info screen

A card viewer demo for Idolmaster Millionlive Theater Days written in Swift UI
A card viewer demo for Idolmaster Millionlive Theater Days written in Swift UI

Misaki Gallery A Millionlive's cards gallery to demostrate Swift UI. All api and

A study card application built with SwiftUI and Combine
A study card application built with SwiftUI and Combine

StudyCards Description A study card application. I built this application to get

TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

TextFieldFormatter Simple Text Formatter (Credit Card Number, Phone Number, Seri

Code1System Card Moudle

Code1CardLib Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation Code1

Wizards-pal - Life counter for card games,built with swift
Wizards-pal - Life counter for card games,built with swift

Life counter for card games Made this app in the weekend to help ma boys with ht

Luhn Credit Card Validation Algorithm

Luhn Algorithm This is a port of the Luhn Algorithm, generally used for validating Credit Card details, to Objective-C (iOS). Swift port can be found

Passbook gem let's you create pkpass for passbook iOS 6

passbook The passbook gem let's you create a pkpass for passbook in iOS 6+ Installation Include the passbook gem in your project. IE: In your Gemfile

Releases(0.9.3)
  • 0.9.3(Sep 1, 2022)

    You can now use CSCardTransitionProperties to customize your transition easily and debug it.

    Customize your transition

    You can customize all of the properties below simply by providing a custom instance of CSCardTransitionProperties to the Presented View Controller. For instance:

    extension YourViewController: CSCardPresentedView {
    	var cardTransitionProperties: CSCardTransitionProperties { 
    		return CSCardTransitionProperties(
    			/// Presenting animation properties
    			presentPositioningDuration: TimeInterval, 
    			presentResizingDuration: TimeInterval, 
    			presentStatusStyleUpdateDuration: TimeInterval, 
    			/// Dismissing animation properties
    			dismissPositioningDuration: TimeInterval, 
    			dismissResizingDuration: TimeInterval, 
    			dismissBlurDuration: TimeInterval, 
    			dismissStatusStyleUpdateDuration: TimeInterval, 
    			/// Fade transition duration between presented card view and presenter card view
    			dismissFadeCardAnimationTime: TimeInterval, 
    			/// How far should the user swipe to dismiss the view
    			preDismissingTransitionProgressPortion: CGFloat, 
    			/// Cancel animation duration
    			cancelTransitionResizingDuration: TimeInterval, 
    			/// Blurred background color during transition
    			transitionBackgroundColor: UIColor
    		)
    	}
    }
    

    Note: all of these properties have default values, so you can skip the ones you don't want to change in the instance creation.

    Debug your transition

    The transition must be quick in production, but slow it down (to 1/10) during its development so you can easily see what is working and what still needs some improvements. You can enable debug mode by simply providing a debug instance of the CSCardTransitionProperties to the Presented View Controller.

    extension YourViewController: CSCardPresentedView {
    	var cardTransitionProperties: CSCardTransitionProperties { 
    		return .debug
    	}
    }
    
    Source code(tar.gz)
    Source code(zip)
  • 0.9.2(Jan 25, 2022)

    Slow your animation transitions down (to 1/10) during their development so you can easily see what is working and what still needs some improvements. You can enable debug mode by simply writing the following line anywhere in your code, before your transition happens.

    CSCardTransition.debug = true
    
    Source code(tar.gz)
    Source code(zip)
  • 0.9.1(Jan 25, 2022)

    You can now access the parent view controller's cardView from the presented view controller when starting the transition. Permitting you to adjust your presenting animation.

    /// Called when the transition to this view controller just started.
    /// - Parameter cardView: The UIView used in the parent view controller to start the transitinon.
    func cardPresentedViewDidStartPresenting(from cardView: UIView)
    
    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Jan 25, 2022)

    CSCardTransition_light

    CSCardTransition

    CSCardTransition is a small library allowing you to create wonderful push and pop transition animations like in the App Store. It works side by side with your navigation controller, and ensure that you only code what's necessary for your custom transition.

    Source code(tar.gz)
    Source code(zip)
Owner
Creastel
Creastel
Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks.

Arne Harren 40 Nov 24, 2022
CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card.

CreditCardForm CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card. Fixed typo use CreditCa

Orazz 1.4k Dec 15, 2022
Easy to use iOS library with components for input of Credit Card data.

AnimatedCardInput This library allows you to drop into your project two easily customisable, animated components that will make input of Credit Card i

Netguru 39 Oct 16, 2022
A Payment Card UI & Validator for iOS

Description Caishen provides an easy-to-use text field to ask users for payment card information and to validate the input. It serves a similar purpos

Prolific Interactive 766 Dec 28, 2022
Easily integrate Credit Card payments module in iOS App. Swift 4.0

MFCard Buy me a coffee MFCard is an awesome looking Credit Card input & validation control. Written in Swift 3. YOoo, Now MFCard is on Swift 5. Swift

MobileFirst 362 Nov 29, 2022
A credit card reader and parser for iOS Using Native Vision/VisionKit

card-reader-ios A credit card reader and parser for iOS Using Native Vision/VisionKit May-14-2021.00-43-17.mp4 Instructions Hold camera up to a card a

Khalid Asad 104 Dec 15, 2022
A credit card scanner for iOS written in Swift

DGCardScanner A credit card scanner Requirements iOS 13.0+ Swift 5.5+ Xcode 10.0+ Installation SPM File > Add Packages > https://github.com/donggyushi

donggyu 9 Jun 24, 2022
SwiftUI BusinessCard - Created iOS Business card app to practice SwiftUI

SwiftUI_BusinessCard Created iOS Business card app to practice SwiftUI

null 0 Jan 29, 2022
Bank Card Generator with Swift using SnapKit DSL 💳

iCard BankCard & CreditCard generator with Swift 3 using SnapKit DSL iCard is a simple tool for generate Credit & Bank Card , it represent cards as UI

Emrah Korkmaz 334 Nov 28, 2022
Debit/Credit card validation port of the Luhn Algorithm in Swift

SwiftLuhn Warning! This repository is no longer maintained. This is a port of the Luhn Algorithm, generally used for validating debit/credit card deta

Max Kramer 135 Sep 9, 2022