hfrahmann / hfcardcollectionviewlayout

The HFCardCollectionViewLayout provides a card stack layout not quite similar like the apps Reminder and Wallet.

HFCardCollectionViewLayout

The HFCardCollectionViewLayout provides a card stack layout not quite similar like the apps Reminder and Wallet.

Features:

• Many options, also within the InterfaceBuilder
• Flip animation to have a backview
• Move/Order the cards
• Simple integration (only set the Layout class in the CollectionView)

Installation

Install it with Cocoapods, Swift Package Manager, Carthage or just use the files inside the Source directory.

Cocoapods:

pod 'HFCardCollectionViewLayout'

Carthage:

github "hfrahmann/HFCardCollectionViewLayout"

Swift Package Manager:

dependencies: [
    .Package(url: "https://github.com/hfrahmann/HFCardCollectionViewLayout.git")
]

Implementation

Just set HFCardCollectionViewLayout as the custom layout class in your UICollectionView.

There is also a cell class called HFCardCollectionViewCell containing rounded corners and a shadow. But this class has no dependency on the HFCardCollectionViewLayout. It's only there to have a cell that looks like a card.

Important: This collectionView layout does support only one section!

HFCardCollectionView

Because of some problems with inserting items while a card is revealed, you have to use the HFCardCollectionView instead of the UICollectionView. Or if you use your own collectionview class, you can copy the lines from the file to your own.

Delegate

These are the delegate functions of the HFCardCollectionViewLayoutDelegate inherits from UICollectionViewDelete so you don't need to connect a further delegate.

/// Asks if the card at the specific index can be revealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter canRevealCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, canRevealCardAtIndex index: Int) -> Bool

/// Asks if the card at the specific index can be unrevealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter canUnrevealCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, canUnrevealCardAtIndex index: Int) -> Bool

/// Feedback when the card at the given index will be revealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter didRevealedCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, willRevealCardAtIndex index: Int)
    
/// Feedback when the card at the given index was revealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter didRevealedCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, didRevealCardAtIndex index: Int)
    
/// Feedback when the card at the given index will be unrevealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter didUnrevealedCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, willUnrevealCardAtIndex index: Int)

/// Feedback when the card at the given index was unrevealed.
/// - Parameter collectionViewLayout: The current HFCardCollectionViewLayout.
/// - Parameter didUnrevealedCardAtIndex: Index of the card.
func cardCollectionViewLayout(_ collectionViewLayout: HFCardCollectionViewLayout, didUnrevealCardAtIndex index: Int)

Options and Actions

You also have access to the options and (some) actions at the HFCardCollectionViewLayout object in the interface builder.

These are the public variables of HFCardCollectionViewLayout.

/////////////// Public Variables

/// Only cards with index equal or greater than firstMovableIndex can be moved through the collectionView.
@IBInspectable var firstMovableIndex: Int = 0

/// Specifies the height that is showing the cardhead when the collectionView is showing all cards.
/// The minimum value is 20.
@IBInspectable var cardHeadHeight: CGFloat = 80

/// When th collectionView is showing all cards but there are not enough cards to fill the full height,
/// the cardHeadHeight will be expanded to equally fill the height.
@IBInspectable var cardShouldExpandHeadHeight: Bool = true

/// Stretch the cards when scrolling up
@IBInspectable var cardShouldStretchAtScrollTop: Bool = true

/// Specifies the maximum height of the cards.
/// But the height can be less if the frame size of collectionView is smaller.
@IBInspectable var cardMaximumHeight: CGFloat = 0

/// Count of bottom stacked cards when a card is revealed.
/// Value must be between 0 and 10
@IBInspectable var bottomNumberOfStackedCards: Int = 5

/// All bottom stacked cards are scaled to produce the 3D effect.
@IBInspectable var bottomStackedCardsShouldScale: Bool = true

/// Specifies the margin for the top margin of a bottom stacked card.
/// Value can be between 0 and 20
@IBInspectable var bottomCardLookoutMargin: CGFloat = 10

/// An additional topspace to show the top of the collectionViews backgroundView.
@IBInspectable var spaceAtTopForBackgroundView: CGFloat = 0

/// Snaps the scrollView if the contentOffset is on the 'spaceAtTopForBackgroundView'
@IBInspectable var spaceAtTopShouldSnap: Bool = true

/// Additional space at the bottom to expand the contentsize of the collectionView.
@IBInspectable var spaceAtBottom: CGFloat = 0

/// Area the top where to autoscroll while moving a card.
@IBInspectable var scrollAreaTop: CGFloat = 120

/// Area ot the bottom where to autoscroll while moving a card.
@IBInspectable var scrollAreaBottom: CGFloat = 120

/// The scrollView should snap the cardhead to the top.
@IBInspectable var scrollShouldSnapCardHead: Bool = false

/// Cards are stopping at top while scrolling.
@IBInspectable var scrollStopCardsAtTop: Bool = true

/// All cards are collapsed at bottom.
@IBInspectable var collapseAllCards: Bool = false
    
/// Contains the revealed index.
/// ReadOnly.
private(set) var revealedIndex: Int = -1

Interface builder actions

/////////////// InterfaceBuilder Actions


/// Action for the InterfaceBuilder to flip back the revealed card.
@IBAction func flipBackRevealedCardAction()

/// Action for the InterfaceBuilder to unreveal the revealed card.
@IBAction func unrevealRevealedCardAction()

/// Action to collapse all cards.
@IBAction func collapseAllCardsAction()

Public functions

/////////////// Public Functions


/// Reveal a card at the given index.
///
/// - Parameter index: The index of the card.
/// - Parameter completion: An optional completion block. Will be executed the animation is finished.
public func revealCardAt(index: Int, completion: (() -> Void)? = nil)

/// Unreveal the revealed card
///
/// - Parameter completion: An optional completion block. Will be executed the animation is finished.
public func unrevealCard(completion: (() -> Void)? = nil)


/// Flips the revealed card to the given view.
/// The frame for the view will be the same as the cell
///
/// - Parameter toView: The view for the backview of te card.
/// - Parameter completion: An optional completion block. Will be executed the animation is finished.
public func flipRevealedCard(toView: UIView, completion: (() -> Void)? = nil)


/// Flips the flipped card back to the frontview.
///
/// - Parameter completion: An optional completion block. Will be executed the animation is finished.
public func flipRevealedCardBack(completion: (() -> Void)? = nil)

License

MIT License

hfcardcollectionviewlayout's Issues

Collapse all card to top

Hello, I really like your example. In your example all cards collapse at bottom, can i do reverse of it means can i collapse all cards to top and selected card displayed in full screen after the y position of top collapse cards ?

How can I detect when a card is being flipped?

I am writing an app where the user can write notes on the back of the cards. I am using a database to store the notes, so I need to update the values in the database when the card gets flipped back (i.e. the user ends editing).

I tried to look for a delegate method called willFlipCard or something like that, but realised that there is no such method. I tried doing the update in willUnrevealCard but apparently by the time that is called, it is too late. The text view instance is already gone.

How can I do something just before the card gets flipped back?

Strange behaviour on delete

If i delete a card while it's flipped the card will disappear and another card will be considered as flipped and will be flipped back. Everything works as expected but we can see a flip animation on the top stacked card which feels weird.

Disabling/controlling shadows?

In my app, I'd like to have a card view that more closely resembles the Wallet app, where each "card" is more card-shaped and has info show up when selected, instead of each card holding all of the info and taking up a whole screen. To accomplish this, I tried setting the color of the cards to blank, but then their shadows are still visible. Is there a way to disable the shadows so that this doesn't occur?

CocoaPod Install issue

Xcode: 9
Pod: 1.2.1

~/Library/Developer/Xcode/DerivedData/MyProject-egbxiztdxsaigpdnlxvcguiokohq/
Build/Intermediates.noindex/Pods.build/
Debug-iphonesimulator/
HFCardCollectionViewLayout.build/module.modulemap:9:12: 
Header 'HFCardCollectionViewLayout-Swift.h' not found

framework module HFCardCollectionViewLayout {
  umbrella header "HFCardCollectionViewLayout-umbrella.h"

  export *
  module * { export * }
}

module HFCardCollectionViewLayout.Swift {
    header "HFCardCollectionViewLayout-Swift.h"
    requires objc
}

Fix card's height

Hi,
is it possible to fix the height of the cards?

iOS 11 contentInset cards under Navigation Bar

Now with iOS 11 and the introduction of the safe area content insets, using the standard contentInset in the HFCardCollectionViewLayout will not work properly. Instead, the adjustedContentInset should be used to get the total adjustment including the safe area and any custom insets.

cant make it work on swift 4.1

I cant make reveal method on swift 4.1 im too noob to modify it can you help?

How to enable multiple section in this library?

I know it is mentioned in the documentation that this library is managed only for one section of collectionview.
I need to implement this but for multiple sections of collection view. How can i acheive it?

Make animation variables public

Hi there, is it possible to make the various animation parameters public?

Swipe is almost impossible in embedded table

Hi,

It's almost impossible to get the swipe to edit on rows on the embedded table into your layout. The gesture is almost always stolen by the scroll view of the layout. Do you have any idea how to improve this ?

The bug is easy to reproduce by adding some data to the table and an action on swipe like this :
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]?
{
let anAction = UITableViewRowAction(style: .default, title: "An Action")
{
(action, indexPath) -> Void in
//
}
return [anAction]

Space at top for background view not observed when only one card

Hi,
Firstly thanks for the great library!
I've come across some inconsistent behaviour.
When a spaceAtTopForBackgroundView value is set with multiple cards and one is revealed it covers the top background space however when there is only one card it does not behave in the same manner i.e. it doesn't cover the background view top. Is this expected or is there anyway to make them behave the same?
Thanks

Background updates management

Hi,

I'm looking to connect this to some realm db which update from background sometimes. Is there an api to update the layout without disturbing the user (no animations, same selection) ?

How can I know which side of a card is being shown?

In my app, I want to have a button on the background view that controls the flipping of cards. When you tap it once, the revealed card gets flipped. When you tap it again, the revealed card is flipped back. To implement this, I need a way of determine whether the revealed card is flipped or not, in order to write code like this:

if revealedCardIsFlipped {
    layout.flipRevealedCardBack()
} else {
    layout.flipRevealedCard(toView: someView)
}

As I mentioned in #17, if I could detect when the card is flipped, I could keep track of the revealed card's state using a variable myself. But since I can't, I don't know what to do.