• Stars
    star
    431
  • Rank 100,866 (Top 2 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A fancy collection style view controller

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.

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.

More Repositories

1

JFMinimalNotifications

An iOS UIView for presenting a minimalistic notification that doesn't block the UI and is highly configurable.
Objective-C
942
star
2

JFDepthView

iOS project for presenting views with a 3D effect to add depth
Objective-C
268
star
3

ios_build_scripts

Build scripts that can be used to update build # and upload binary to Fabric/HockeyApp as well as post notifications into Slack/HipChat from an Xcode Bot
Shell
22
star
4

PhotoMojo

PhotoMojo is a very simple Android application for editing photos from the Camera or Gallery
Java
14
star
5

PriorityQueue-ObjC

A PriorityQueue for Objective-C/iOS Developers
Objective-C
8
star
6

pivotal-tracker-api

This is a Ruby Gem that can be used to communicate with the Pivotal Tracker API v5
Ruby
7
star
7

Stylus.mode

Stylus color mode for Coda
7
star
8

JFTransporter

An Objective-C Networking abstraction to help make setting up a service layer in an iOS app much quicker and easier
Objective-C
4
star
9

NotificationQueue

An iOS library used to handle queuing and scheduling of notifications for presentation by registered notification handlers
Swift
3
star
10

PetFinderAPI

Pet Finder API iOS Framework
HTML
2
star
11

HTTPService

An HTTP Networking Service written in Swift
Swift
2
star
12

Ultimate-Notifications

Module for showing kick ass notifications in a Titanium Mobile application!
Python
2
star
13

android-analytics

A lightweight framework for abstracting analytics code and wrapping analytics providers
Kotlin
2
star
14

demo_app

Ruby on Rails demo application
Ruby
1
star
15

iOS-Slider

Objective-C
1
star
16

billplanner-cloudant

Billplanner on Cloudant
JavaScript
1
star
17

avfdemo

AVF Demo App
JavaScript
1
star
18

atljeremy.github.com

My personal home on GitHub/The Web
HTML
1
star
19

Floid

Kotlin Flow Based Reactive Architecture
Kotlin
1
star
20

jeremyfox

www.jeremyfox.me scala play 2 app
Scala
1
star
21

Bill-Planner

JavaScript
1
star
22

LoaderView

A loading view written in Swift to be used with iOS and OSX
Swift
1
star
23

first_app

First app for ruby on rails tutorial
Ruby
1
star
24

SDI-Project-4

CoffeeScript
1
star
25

pushservice

Scala
1
star
26

iospracticeapp

iOS Practice App / Tool Kit
Objective-C
1
star
27

JFAnalyticsClient

Objective-C analytics client that utilizes http://keen.io as the data store.
Objective-C
1
star
28

my_notes_hybrid

My Notes Android application with a web view for hybrid implementation
Java
1
star
29

VFW-Project-1

JavaScript
1
star
30

avfdemoandroid

AVF Demo App For Android
JavaScript
1
star
31

aoc1

Apple Programming Language Objective-C 1
Objective-C
1
star
32

SDI---Project-3

CoffeeScript
1
star
33

Extensions

A slew of Extensions that were built for use in iOS but should also be useful in OS X and tvOS too
Swift
1
star