Awesome looking Dial like card selection ViewController

Overview

KVCardSelectionVC

Awesome looking Dial like card selection ViewController

An updated Swift 3 working version of : https://github.com/atljeremy/JFCardSelectionViewController

What It Looks Like:

Example

How To Use It:

Compatibility

iOS 9+

Swift 3.0+

xCode 8.0+

Basic Example

First create a new class that subclasses KVCardSelectionViewController

import UIKit
import KVCardSelectionVC

class UserSelectionViewController: KVCardSelectionViewController {
    
    var cards: [User]? {
      didSet {
        // Call `reloadData()` once you are ready to display your `CardPresentable` data or when there have been changes to that data that need to be represented in the UI.
        reloadData()
      }
    }
    
    override func viewDidLoad() {
        
        // You can set a permanent background by setting a UIImage on the `backgroundImage` property. If not set, the `backgroundImage` will be set using the currently selected Card's `imageURLString`.
        // backgroundImage = UIImage(named: "bg")
        
        // Set the datasource so that `KVCardSelectionViewController` can get the CardPresentable data you want to dispaly
        dataSource = self
        
        // Set the delegate so that `KVCardSelectionViewController` can notify the `delegate` of events that take place on the focused CardPresentable.
        delegate = self
        
        // Set the desired `KVCardSelectionViewSelectionAnimationStyle` to either `.slide` or `.fade`. Defaults to `.fade`.
        selectionAnimationStyle = .slide
        
        // Call up to super after configuring your subclass of `KVCardSelectionViewController`. Calling super before configuring will cause undesirable side effects.
        super.viewDidLoad()
        
    }
    
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        
        /*
        NOTE: If you are displaying an instance of `KVCardSelectionViewController` within a `UINavigationController`, you can use the code below to hide the navigation bar. This isn't required to use `KVCardSelectionViewController`, but `KVCardSelectionViewController` was designed to be used without a UINavigationBar.
        let image = UIImage()
        let navBar = navigationController?.navigationBar
        navBar?.setBackgroundImage(image, for: .default)
        navBar?.shadowImage = image
        */
        
        // Load your dynamic CardPresentable data
        cards = [
          User(name: "Jennifer Adams", photoURL: "https://s-media-cache-ak0.pinimg.com/736x/5d/43/0b/5d430bd15603971c939fcc9a4358a35f.jpg", address: "123 Main St", city: "Atlanta", state: "GA", zip: 12345),
          User(name: "Jim Adel", photoURL: "http://a3.files.blazepress.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTI4OTkyOTM4OTM5MTYxMDU0.jpg", address: "234 Main St", city: "Atlanta", state: "GA", zip: 12345),
          User(name: "Jane Aden", photoURL: "https://s-media-cache-ak0.pinimg.com/236x/b7/65/2d/b7652d8c4cf40bc0b1ebac37bb254fcb.jpg", address: "345 Main St", city: "Atlanta", state: "GA", zip: 12345),
          User(name: "Avery Adil", photoURL: "http://boofos.com/wp-content/uploads/2013/02/Celebrity-Portraits-by-Andy-Gotts-10.jpg", address: "456 Main St", city: "Atlanta", state: "GA", zip: 12345),
          User(name: "Jamar Baar", photoURL: "https://s-media-cache-ak0.pinimg.com/736x/85/e3/8a/85e38ab9e480790e216c4f9359bb677f.jpg", address: "567 Main St", city: "Atlanta", state: "GA", zip: 12345),
          User(name: "Steven Babel", photoURL: "http://blog.picr.com/wp-content/uploads/2015/09/Andy-Gotts.jpeg", address: "678 Main St", city: "Atlanta", state: "GA", zip: 12345)
        ]
    }
}

Second, conform to the KVCardSelectionViewControllerDelegate and KVCardSelectionViewControllerDataSource protocols so that you can provide the CardPresentable data to the KVCardSelectionViewController and to receive callbacks of touch events in the action buttons.

extension UserSelectionViewController: KVCardSelectionViewControllerDataSource {
    public func cardSelectionViewController(_ cardSelectionViewController: KVCardSelectionViewController, cardForItemAtIndexPath indexPath: IndexPath) -> CardPresentable {
        return cards[indexPath.row]
    }
    
    
    func numberOfCardsForCardSelectionViewController(_ cardSelectionViewController: KVCardSelectionViewController) -> Int {
        return cards.count
    }
    
}

extension UserSelectionViewController: KVCardSelectionViewControllerDelegate {
    
    func cardSelectionViewController(_ cardSelectionViewController: KVCardSelectionViewController, didSelectCardAction cardAction: CardAction, forCardAtIndexPath indexPath: IndexPath) {
        let card = cards[(indexPath as NSIndexPath).row]
        if let action = card.actionOne , action.title == cardAction.title {
            print("----------- \nCard action fired! \nAction Title: \(cardAction.title) \nIndex Path: \(indexPath)")
        }
        if let action = card.actionTwo , action.title == cardAction.title {
            print("----------- \nCard action fired! \nAction Title: \(cardAction.title) \nIndex Path: \(indexPath)")
        }
    }
    
    func cardSelectionViewController(_ cardSelectionViewController: KVCardSelectionViewController, didSelectDetailActionForCardAtIndexPath indexPath: IndexPath) {
        print("CARD SELECTED for \(indexPath)")
    }
}

Then, in the models you want to be presentable within the card selection view controller, just have them conform to the CardPresentable protocol.

struct User {
    var name: String
    var photoURL: String
    var address: String
    var city: String
    var state: String
    var zip: Int
}

extension User: CardPresentable {
    
    var imageURLString: String {
        return photoURL
    }
    
    var placeholderImage: UIImage? {
        return UIImage(named: "default")
    }
    
    var titleText: String {
        return name
    }
    
    var detailTextLineOne: String {
        return address
    }
    
    var detailTextLineTwo: String {
        return "\(city), \(state) \(zip)"
    }
    
    var actionOne: CardAction? {
        return CardAction(title: "Call")
    }
    
    var actionTwo: CardAction? {
        return CardAction(title: "Email")
    }
    
}

Installation

CocoaPods

pod 'KVCardSelectionVC'

Example

Check Example Folder for the same.

Dependencies

KVCardSelectionVC has dependencies on pod 'Try' and pod 'Kingfisher'

Try is used for handling NSExceptions which swift cannot handle.

Kingfisher is used for Image downloading and cache.

The max size of cache is 50 Mb and cache expiry is one week.

Images Not Showing/Downloading

Quick Fix - Add Allow Arbitrary Loads to your project's Info.plist

License

Distributed under the MIT license. See LICENSE for more information.

You might also like...
Cusom CollectionView card layout
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+

:star: Custom card-designed CollectionView layout

CardsLayout CardsLayout is a lightweight Collection Layout. Installation CocoaPods You can use CocoaPods to install CardsLayout by adding it to your P

๐Ÿ”ฅ A multi-directional card swiping library inspired by Tinder
๐Ÿ”ฅ 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

An iOS library to create beautiful card transitions.
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

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

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

GLScratchCard - Scratch card effect
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

A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS & watchOS.
A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS & watchOS.

๐Ÿƒ CardStack A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS & watchOS. Installation Xcode 11 & Swift Package Manager Use the package r

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.
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

A horizontal scroll dial like Instagram.
A horizontal scroll dial like Instagram.

HorizontalDial Preview Requirements iOS 8.0+ Swift 5 Storyboard support Installation CocoaPods use_frameworks! pod "HorizontalDial" Manually To instal

RCalendarPicker A date picker control, Calendar calendar control, select control, calendar, date selection, the clock selection control.
RCalendarPicker A date picker control, Calendar calendar control, select control, calendar, date selection, the clock selection control.

RCalendarPicker RCalendarPicker Calendar calendar control, select control, calendar, date selection, the clock selection control. ๆ—ฅๅŽ†ๆŽงไปถ ๏ผŒๆ—ฅๅŽ†้€‰ๆ‹ฉๆŽงไปถ๏ผŒๆ—ฅๅŽ†๏ผŒๆ—ฅๆœŸ้€‰ๆ‹ฉ

Simple single-selection or multiple-selection checklist, based on UITableView
Simple single-selection or multiple-selection checklist, based on UITableView

SelectionList Simple single-selection or multiple-selection checklist, based on UITableView. Usage let selectionList = SelectionList() selectionList.i

Custom Time Picker ViewController with Selection of start and end times in Swift ๐Ÿ”ถ
Custom Time Picker ViewController with Selection of start and end times in Swift ๐Ÿ”ถ

LFTimePicker Custom Time Picker ViewController with Selection of start and end times in Swift ๐Ÿ”ถ . Based on Adey Salyard's design @ Dribbble One to tw

Present a sheet ViewController easily and control ViewController height with pangesture
Present a sheet ViewController easily and control ViewController height with pangesture

PanControllerHeight is designed to present a sheet ViewController easily and control ViewController height with pangesture.

macOS support for the Surface Dial

Mac Dial macOS support for the Surface Dial. The surface dial can be paired with macOS but any input results in invalid mouse inputs on macOS. This ap

Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI
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

๐Ÿ’ˆ Retro looking progress bar straight from the 90s
๐Ÿ’ˆ Retro looking progress bar straight from the 90s

Description Do you miss the 90s? We know you do. Dial-up internet, flickering screens, brightly colored websites and, of course, this annoyingly slow

Demonstration of using UIWindowScene and SwiftUI to provide a native-looking Mac preferences window in Catalyst
Demonstration of using UIWindowScene and SwiftUI to provide a native-looking Mac preferences window in Catalyst

CatalystPrefsWindow Ever wondered how to create a more Mac-like preferences window for Catalyst? Perhaps Settings Bundles are too limiting for the kin

Daily News is a news app with good looking user interface ! Apps architecture is MVVM and used RxSwift for binding.
Daily News is a news app with good looking user interface ! Apps architecture is MVVM and used RxSwift for binding.

Daily News Hey ! Daily News is a news app with good looking user interface ! Apps architecture is MVVM and used RxSwift for binding. Architecture I pr

๐Ÿ’ˆ Retro looking progress bar straight from the 90s
๐Ÿ’ˆ Retro looking progress bar straight from the 90s

Description Do you miss the 90s? We know you do. Dial-up internet, flickering screens, brightly colored websites and, of course, this annoyingly slow

Owner
Kunal Verma
Kunal Verma
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
๐Ÿƒ 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
Swipe to "like" or "dislike" any view, just like Tinder.app. Build a flashcard app, a photo viewer, and more, in minutes, not hours!

MDCSwipeToChoose Swipe to "like" or "dislike" any view, just like Tinder.app. Build a flashcard app, a photo viewer, and more, in minutes, not hours!

Brian Gesiak 2.6k Nov 29, 2022
Awesome iOS 11 appstore cards in swift 5.

Cards brings to Xcode the card views seen in the new iOS XI Appstore. Getting Started Storyboard Go to main.storyboard and add a blank UIView Open the

Paolo Cuscela 4.1k Dec 14, 2022
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 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
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