A SwiftUI view that arranges its children in a whimsical interactive deck of cards, as seen in Big News

Overview

CardStack

A SwiftUI view that arranges its children in a whimsical interactive deck of cards.

Card stack

CardStack mimics the behaviour of the photo stack in iMessage, as well as the "Top Stories" in Big News.

Overview

You create stacks dynamically from an underlying collection of data. Each item in the collection must conform to Identifiable.

CardStack(items) { item in
    RoundedRectangle(cornerRadius: 20, style: .continuous)
        .fill(item.color)
        .frame(height: 400)
}

Supporting selections in stacks

To make members of a stack selectable, install a tap gesture inside the view provider.

CardStack(items) { item in
    RoundedRectangle(cornerRadius: 20, style: .continuous)
        .onTapGesture {
            // do something
        }
}

To get a stack's topmost card index, provide a binding to the currentIndex initialiser.

@State private var currentIndex = 0

CardStack(items, currentIndex: $currentIndex) { item in
    ...
}

Installation

Add CardStack to your app's Package.swift file:

.package(url: "https://github.com/notsobigcompany/CardStack")

Alternatively, add it in Xcode by going to File -> Add Packages.

A SwiftUI preview is available in the CardStack file itself.

License

Copyright 2022 NOT SO BIG TECH LIMITED

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...
Presenting timelines as cards, single or bundled in scrollable feed!
Presenting timelines as cards, single or bundled in scrollable feed!

TimelineCards πŸƒ Autogenerated timelines presented as cards πŸƒ πŸƒ Single or bundled into feed πŸƒ Installation CocoaPods (wtf is that?) Add pod 'Timeli

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

A SwiftUI card view, made great for setup interactions.
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

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!

A SwiftUI based custom sheet card to show information in iOS application.
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.

IOS Card Game - A simple card game using SwiftUI
IOS Card Game - A simple card game using SwiftUI

IOS_Card_Game A simple card game using Swift UI.

Deck is a library that provides a UI to reproduce stacked cards for SwiftUI.
Deck is a library that provides a UI to reproduce stacked cards for SwiftUI.

Deck Deck is a library that provides a UI to reproduce stacked cards for SwiftUI. RPReplay_Final1624531727.mov Usage struct Card: View { var data

A navigation controller that displays its view controllers as an interactive stack of cards.
A navigation controller that displays its view controllers as an interactive stack of cards.

CardNavigation The easiest way to turn a navigation controller into an interactive stack of cards. Highlights βœ… Fully interactive and interruptible βœ…

Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.

SwiftUI Matched Inline Title Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen i

NewsAPISwift is a Swift client for News API V2, a service that provides breaking news headlines, and search for articles from over 30,000 news sources and blogs.

NewsAPISwift NewsAPISwift is a Swift client for News API V2, a service that provides breaking news headlines, and search for articles from over 30,000

Good-news - A simple news application built implementing the MVVM design pattern.  It is integrated with a news api which returns JSON SwiftUI views that arrange their children in a flow layout.
SwiftUI views that arrange their children in a flow layout.

SwiftUI Flow SwiftUI views that arrange their children in a flow layout. HFlow A view that arranges its children in a horizontal flow. Usage ScrollVie

SwiftUI views that arrange their children in a Pinterest-like layout
SwiftUI views that arrange their children in a Pinterest-like layout

SwiftUI Masonry SwiftUI views that arrange their children in a Pinterest-like layout. HMasonry A view that arranges its children in a horizontal mason

A carousel of stacked items as seen in iMessage for photos

StackedItemsCarousel A carousel of stacked items (such as photos) as seen in iMessage What? iMessage on iOS 15 shows multiple photos in a carousel of

A library for creating Stream Deck plugins in Swift.

StreamDeck A library for creating Stream Deck plugins in Swift. Usage Your plugin class should inherit from StreamDeckPlugin, which handles the WebSoc

Xcode-streamdeck-plugin - A Stream Deck plugin for Xcode
Xcode-streamdeck-plugin - A Stream Deck plugin for Xcode

Stream Deck Xcode Plugin This repository contains a Stream Deck plugin to add so

πŸ₯³ Give birthday celebration message to foster children πŸŽ‚
πŸ₯³ Give birthday celebration message to foster children πŸŽ‚

GiveCake Team Icon λ””μžμ΄λ„ˆμ™€ 개발자 - DBAL App Icon Introduction 경뢁 μœ„νƒκ°€μ •κ³Ό κΈ°λΆ€μž μ‚¬μ΄μ—μ„œ 케읡 κΈ°λΆ€λ₯Ό μœ„ν•œ 돈만 λ³΄λ‚΄λŠ” 것이 μ•„λ‹ˆλΌ, μΆ•ν•˜μ™€ κ°μ‚¬μ˜ 마음 λ˜ν•œ μ„œλ‘œ 보낼 수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ•±μž…λ‹ˆλ‹€. Functions κΈ°

The most powerful Event-Driven Observer Pattern solution the Swift language has ever seen!
The most powerful Event-Driven Observer Pattern solution the Swift language has ever seen!

Event-Driven Swift Decoupling of discrete units of code contributes massively to the long-term maintainability of your project(s). While Observer Patt

UIView subclass that bends its edges when its position changes.

AHKBendableView BendableView is a UIView subclass that bends its edges when its position change is animated. Internally, BendableView contains CAShape

Comments
  • Spiral is shown with large number of items

    Spiral is shown with large number of items

    I have 16 cards in a test and the spiral of cards can be seen behind and trailing off to the side of the main Card Stack.

    CardStack(projects) {(project: Project) in Image(project.image) .resizable() .cornerRadius(20) .frame(width: 300, height: 400) }

    opened by sonasapps 1
Owner
The Not So Big Company
We're the makers of Big Mail, Big News, and Sheety.
The Not So Big Company
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

Indy 850 Nov 17, 2022
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

Deniz Adalar 285 Jan 3, 2023
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
Recreation of cards from Apple's AppStore written using SwiftUI.

App Store Cards Animation I tried to reproduce the look and the feeling of the cards from the AppStore. Please note that this repository is a work-in-

Roman 3 Mar 30, 2022
A swift SDK to help you scan debit/credit cards.

SKCardReader A swift SDK to help you scan debit/credit cards. Requirements To use the SDK the following requirements must be met: Xcode 11.0 or newer

Syed Kashan 4 Jul 29, 2022
Swift Package to download Transactions for LunchOnUs Cards

LunchOnUs Downloader What This is a small library to download transaction and balance data for LunchOnUs Cards (Giftcards by Eigen Development). How C

Steffen KΓΆtte 0 Jan 15, 2022
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

Yalantis 5.2k Jan 2, 2023
Presenting timelines as cards, single or bundled in scrollable feed!

TimelineCards ?? Autogenerated timelines presented as cards ?? ?? Single or bundled into feed ?? Installation CocoaPods (wtf is that?) Add pod 'Timeli

0xNSHuman 428 Dec 16, 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
πŸƒ Cardslider is a design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.

CARD SLIDER UI controller that allows you to swipe through cards with pictures. We specialize in the designing and coding of custom UI for Mobile Apps

Ramotion 1.2k Dec 19, 2022