A fancy collection style view controller that was inspired by this Profile Card mockup

Overview

JFCardSelectionViewController

A fancy collection style view controller that was inspired by this Profile Card mockup: https://dribbble.com/shots/1458441-Profile-Card/attachments/216311

Carthage compatible CocoaPods CocoaPods CocoaPods

What It Looks Like:

Example

How To Use It:

Basic Example

First create a new class that subclasses JFCardSelectionViewController

import UIKit
import JFCardSelectionViewController

class UserSelectionViewController: JFCardSelectionViewController {
    
    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 `JFCardSelectionViewController` can get the CardPresentable data you want to dispaly
        dataSource = self
        
        // Set the delegate so that `JFCardSelectionViewController` can notify the `delegate` of events that take place on the focused CardPresentable.
        delegate = self
        
        // Set the desired `JFCardSelectionViewSelectionAnimationStyle` to either `.Slide` or `.Fade`. Defaults to `.Fade`.
        selectionAnimationStyle = .Slide
        
        // Call up to super after configuring your subclass of `JFCardSelectionViewController`. 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 `JFCardSelectionViewController` within a `UINavigationController`, you can use the code below to hide the navigation bar. This isn't required to use `JFCardSelectionViewController`, but `JFCardSelectionViewController` was designed to be used without a UINavigationBar.
        let image = UIImage()
        let navBar = navigationController?.navigationBar
        navBar?.setBackgroundImage(image, forBarMetrics: .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 JFCardSelectionViewControllerDelegate and JFCardSelectionViewControllerDataSource protocols so that you can provide the CardPresentable data to the JFCardSelectionViewController and to receive callbacks of touch events in the action buttons.

extension UserSelectionViewController: JFCardSelectionViewControllerDataSource {
    
    func numberOfCardsForCardSelectionViewController(cardSelectionViewController: JFCardSelectionViewController) -> Int {
        return cards?.count ?? 0
    }
    
    func cardSelectionViewController(cardSelectionViewController: JFCardSelectionViewController, cardForItemAtIndexPath indexPath: NSIndexPath) -> CardPresentable {
        return cards?[indexPath.row] ?? User(name: "", photoURL: "", address: "", city: "", state: "", zip: 0)
    }
    
}

extension UserSelectionViewController: JFCardSelectionViewControllerDelegate {
    
    func cardSelectionViewController(cardSelectionViewController: JFCardSelectionViewController, didSelectCardAction cardAction: CardAction, forCardAtIndexPath indexPath: NSIndexPath) {
        guard let card = cards?[indexPath.row] else { return }
        if let action = card.actionOne where action.title == cardAction.title {
            print("----------- \nCard action fired! \nAction Title: \(cardAction.title) \nIndex Path: \(indexPath)")
        }
        if let action = card.actionTwo where action.title == cardAction.title {
            print("----------- \nCard action fired! \nAction Title: \(cardAction.title) \nIndex Path: \(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
    }
    
    // This is used to tell the dial at the bottom of the UI which letter to point tofor this card
    var dialLabel: String {
        guard let lastString = titleText.componentsSeparatedByString(" ").last else { return "" }
        return String(lastString[lastString.startIndex])
    }
    
    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")
    }
    
}

Cloning Source

If you'd like to clone the repository, you'll need to initialize and update the submodule before the project will build. Simply do the following to clone the repo then initialize and update the submodule, all in one command.

$ git clone --recursive [email protected]:atljeremy/JFCardSelectionViewController.git

Installation

CocoaPods

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

platform :ios, '8.0'
use_frameworks!
pod 'JFCardSelectionViewController', '~> 1.0.4'

To get the full benefits import JFCardSelectionViewController wherever you import UIKit

import UIKit
import JFCardSelectionViewController

Carthage

Create a Cartfile that lists the framework and run carthage update. Follow the instructions to add $(SRCROOT)/Carthage/Build/iOS/JFCardSelectionViewController.framework to an iOS project.

1.0">
github "atljeremy/JFCardSelectionViewController" ~> 1.0

Manually

  1. Download and drop /JFCardSelectionViewController folder in your project.
  2. Congratulations!

License

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

You might also like...
A patch collection to save your Xcode
A patch collection to save your Xcode

Patch Xcode is worst IDE I have ever used Xcode 13.3 introduced a very annoying bug. When you type anything with Chinese IME in the LLDB console

A collection of native SwiftUI layouts (iOS 16+)

SwiftUILayouts A library of commonly requested layouts. Implemented using SwiftUI's native layout system. NOTE: SwiftUILayouts requires iOS 16 or abov

A collection of common SwiftUI and UIKit utilities.

KippleUI A collection of common SwiftUI and UIKit utilities. ⚠️ The code in this library has been made public as-is for the purposes of education, dis

A collection of common diagnostics and debugging utilities.

KippleDiagnostics A collection of common diagnostics and debugging utilities. ⚠️ The code in this library has been made public as-is for the purposes

Create an easy to peek SwiftUI View to showcase your own data, catalog, images, or anything you'd like.
Create an easy to peek SwiftUI View to showcase your own data, catalog, images, or anything you'd like.

Create an easy to peek SwiftUI View to showcase your own data, catalog, images, or anything you'd like.

Lightweight app to view your WoT (BB, Blitz) stats (XVM based)
Lightweight app to view your WoT (BB, Blitz) stats (XVM based)

KTTC Lite Приложение для танкистов, следящих за своей статистикой! Функционал Базовая статистика аккаунта WoT, WoT Blitz Расширенная статистика XVM (W

How to develop an iOS 14 application with SwiftUI 2.0 framework. How to create an Onboarding Screen with Page Tab View

Ama-Fruits USER INTERFACE AND USER EXPERIENCE APP DESIGN How to develop an iOS 14 application with SwiftUI 2.0 framework. How to create an Onboarding

WobbleView is an implementation of a recently popular wobble effect for any view in your app
WobbleView is an implementation of a recently popular wobble effect for any view in your app

WobbleView is an implementation of a recently popular wobble effect for any view in your app. It can be used to easily add dynamics to user interactions and transitions.

MVVM - Model View ViewModel done on Swift
MVVM - Model View ViewModel done on Swift

MVVM Model View ViewModel done on iOS Swift Model–view–viewmodel (MVVM) is a sof

Comments
Releases(1.0.5)
Owner
Jeremy Fox
Jeremy Fox
An Android Wear style confirmation view for iOS

GoogleWearAlert Objective-C version kindly written by dimohamdy - https://github.com/dimohamdy/GoogleWearAlert An Android Wear style confirmation view

Ash 423 Nov 28, 2022
A simple project which shows how to pull off custom view controller transitions.

Custom View Controller Transitions This project explains and shows how to make custom view controller transitions in the most simple way possible. Eac

Jordan Morgan 91 Oct 23, 2022
DMSi has a secure access room with a card reader on each side.

Interview - Card Reader DMSi has a secure access room with a card reader on each side. You must scan to enter and scan to exit. However, we've been ha

Hundter Biede 1 Oct 19, 2021
Mi Card App for Android & IOS in Flutter

Mi Card Our Goal Now that you've seen how to create a Flutter app entirely from scratch, we're going to go further and learn more about how to design

Ruksar Ahmed 0 Nov 6, 2021
Sonic language: Heavily inspired by Swift, but compiles to C so you can use it anywhere.

Sonic Sonic programming language: Heavily inspired by Swift, but compiles to C so you can use it anywhere. Brought to you by Chris Hulbert and Andres

Sonic Language 27 Apr 8, 2022
An experimental functional programming language with dependent types, inspired by Swift and Idris.

Kara An experimental functional programming language with dependent types, inspired by Swift and Idris. Motivation Development of Kara is motivated by

null 40 Sep 17, 2022
Kotlin Multiplatform sample with SwiftUI and Compose (Desktop and Android) clients. Heavily inspired by Wordle game.

WordMasterKMP Kotlin Multiplatform sample heavily inspired by Wordle game and also Word Master and wordle-solver samples. The main game logic/state is

John O'Reilly 56 Oct 4, 2022
Open source Clips-inspired app.

AlohaGIF Website Funny moments? Want to share it as a GIF, but you are worried that you will lose speech from video? Aloha will scan sound and attach

Mike Pyrka 61 Sep 16, 2022
A Collection of PropertyWrappers to make custom Serialization of Swift Codable Types easy

CodableWrappers Simplified Serialization with Property Wrappers Move your Codable and (En/De)coder customization to annotations! struct YourType: Coda

null 393 Jan 5, 2023
A collection of Swift Tutorials built with Apple's DocC.

Swift Tutorials This is not a package, it's just a bunch of tutorials This project uses Apple's DocC (Documentation Compiler) to create a set of Swift

Swift Innovators Network 11 Aug 9, 2022