Awesome iOS 11 appstore cards in swift 5.

Related tags

Transition swift ios ui cards uikit storyboard ibdesignable swift4 ios11 swift5
Overview

GitHub Stars Pod Version Platform License

Overview

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 Identity Inspector and type 'CardHighlight' the 'class' field
  • Make sure you have 'Cards' selected in 'Module' field
  • Switch to the Attributes Inspector and configure it as you like.

CardViewStoryboard

  • Drag a blank UIViewController and design its view as you like
  • Move to the Identity inspector
  • Type 'CardContent' in the StoryboardID field.

DetailViewStoryboard

Code

import Cards

// Aspect Ratio of 5:6 is preferred
let card = CardHighlight(frame: CGRect(x: 10, y: 30, width: 200 , height: 240))

card.backgroundColor = UIColor(red: 0, green: 94/255, blue: 112/255, alpha: 1)
card.icon = UIImage(named: "flappy")
card.title = "Welcome \nto \nCards !"
card.itemTitle = "Flappy Bird"
card.itemSubtitle = "Flap That !"
card.textColor = UIColor.white
    
card.hasParallax = true
    
let cardContentVC = storyboard!.instantiateViewController(withIdentifier: "CardContent")
card.shouldPresent(cardContentVC, from: self, fullscreen: false)
    
view.addSubview(card)

GetStarted

Prerequisites

  • Xcode 10.2 or newer
  • Swift 5.0

Installation

Cocoapods

use_frameworks!
pod 'Cards'

Manual

  • Download the repo
  • ⌘C ⌘V the 'Cards' folder in your project
  • In your Project's Info go to 'Build Phases'
  • Open 'Compile Sources' and add all the files in the folder

Overview

Customization

//Shadow settings
var shadowBlur: CGFloat
var shadowOpacity: Float
var shadowColor: UIColor
var backgroundImage: UIImage?
var backgroundColor: UIColor

var textColor: UIColor 	//Color used for the labels
var insets: CGFloat 	//Spacing between content and card borders
var cardRadius: CGFloat //Corner radius of the card
var icons: [UIImage]? 	//DataSource for CardGroupSliding
var blurEffect: UIBlurEffectStyle //Blur effect of CardGroup

Usage

CardPlayer

let card = CardPlayer(frame: CGRect(x: 40, y: 50, width: 300 , height: 360))
card.textColor = UIColor.black
card.videoSource = URL(string: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
card.shouldDisplayPlayer(from: self)    //Required. 
        
card.playerCover = UIImage(named: "mvBackground")!  // Shows while the player is loading
card.playImage = UIImage(named: "CardPlayerPlayIcon")!  // Play button icon
        
card.isAutoplayEnabled = true
card.shouldRestartVideoWhenPlaybackEnds = true
        
card.title = "Big Buck Bunny"
card.subtitle = "Inside the extraordinary world of Buck Bunny"
card.category = "today's movie"
        
view.addSubview(card)

CardGroupSliding

    let icons: [UIImage] = [    
    
        UIImage(named: "grBackground")!,
        UIImage(named: "background")!,
        UIImage(named: "flappy")!,
        UIImage(named: "flBackground")!,
        UIImage(named: "icon")!,
        UIImage(named: "mvBackground")!
    
    ]   // Data source for CardGroupSliding
    
    let card = CardGroupSliding(frame: CGRect(x: 40, y: 50, width: 300 , height: 360))
    card.textColor = UIColor.black
    
    card.icons = icons
    card.iconsSize = 60
    card.iconsRadius = 30
    
    card.title = "from the editors"
    card.subtitle = "Welcome to XI Cards !"

    view.addSubview(card)

Documentation

See the Wiki, to learn in depth infos about Cards.
GO!

Issues & Feature requests

If you encounter any problems or have any trouble using Cards, feel free to open an issue. I'll answer you as soon as I see it.

New features, or improvements to the framework are welcome (open an issue).

Thanksto

License

Cards is released under the MIT License.

Comments
  • Display and animation issues on iOS 12

    Display and animation issues on iOS 12

    I'm pretty sure you have noticed by now, but when using cards (at least CardArticle) on iOS 12, several things go horribly wrong, beginning with text that's displayed darker than it should be to severe bounds and animation issues.

    I really don't know where to start honestly, so I took a short screen capture to show what exactly I mean (https://youtu.be/SHeDv5e89C8)

    I hope you can resolve the issue soon, looking forward to a response :)

    bug 
    opened by Medwe 37
  • Card Animation Return Glitchy

    Card Animation Return Glitchy

    ezgif com-optimize

    When creating a Card on my own application as well as running the demo project I noticed that whenever one "swipes away" a Card it goes to the top left corner of the display for about 2 seconds and then returns abruptly to it's original position. Is this intentional? or am I the only one experiencing this?

    Edit: I added a gif to show this in action. Also, this same bug persists inside both the emulator, real device (iPhone 7 iOS 12). And I even downloaded your demo project to see if it was just my implementation but the problem exists in the demo as well. It happens everytime and it looks terrible, thinking of removing the whole card functionality and just have it segue into another ViewController at this point.

    opened by EliteByte 27
  • UITableView in DetailView

    UITableView in DetailView

    A Reopen of case #31 Hi, I've tried to implement a UITableView inside the DetailView but as mention in #31 the scroll acts up and it doesn't function the way it should.

    I tried disabling the scroll on the table view and yes that does make the scroll work properly but then when I scroll to the bottom it's cutting off the tableview as in it's not resizing to the height of the tableview.

    I want to achieve something like: 34078976-3ca3549c-e367-11e7-9b7e-79a522ec35e8

    This is what the result is: iph_git_cards

    The table view should show all the way until Row:2 Section:5 but it is cut off.

    Any help would be much appreciated. Thanks in advanced.

    opened by zaccadams 11
  • Tableview bug - After open 3-4 cells, the detailedView is empty

    Tableview bug - After open 3-4 cells, the detailedView is empty

    Hi,

    I really love this project! I have a issue, after opened up some few cells, the detailedView is empty. See the gif for example. This example is from the Demo.

    TableViewIssue2

    How can i fix this?

    Thanks

    bug 
    opened by asbis 9
  • Dismiss detailViewController on iOS 13 Simulators

    Dismiss detailViewController on iOS 13 Simulators

    Hi Paolo There's a bug compiling with Xcode 11 beta and iOS 13 beta ...

    The cards open correctly but when you close the detail view the screen becomes black and there is no way to do anything more

    In addition, opening the CardPlayer causes the app to crash.

    *** Terminating app due to uncaught exception 'UIViewControllerHierarchyInconsistency', reason: 'child view controller:<Player.Player: 0x1040b0800> should have parent view controller:<ViewController.DetailViewController: 0x103332d30> but actual parent is:<MyProject.CardsViewController: 0x103320520>'

    Thank you so much for your valuable work

    Vanni

    bug 
    opened by Ragazzetto 8
  • Failed to build Objective-C

    Failed to build Objective-C

    When importing Cards it just says 'Failed to build objective-C library'. Im running the latest xcode and swift versions. Please help as I really want to use this awesome pod!

    bug 
    opened by thijsheijden 7
  • Questions about cards

    Questions about cards

    Hi Paolo, I have three questions for you. 1. Is it possible to hide the "VIEW" button on the card in this release of Cards? 2. Is it possibile show the card content inside a frame with each corner rounded (not just the upper corners)? 3. Is it possible hide the X button inside the card content view? Is there the possibility to add a custom way to dismiss the card content? Thanks

    opened by ghost 6
  • Cards DetailView not showing up correctly when using with UICollectionView

    Cards DetailView not showing up correctly when using with UICollectionView

    Hello, I am making UI just like iOS11 app store, using Cards and Detailview with UICollectionView. I 've tried like the attached file, But..

    It shows the DetailView well first a few tapping, but after loading and dismissing a few times the detailviews with swiping the collectionviewcells, the detailview does not show up correctly. I guess indexPaths are being messed up after that. And maybe it's concerned with the dequeueReusableCell..

    Please check my code. Thanks a lot. CardDemo.zip

    opened by seongki1 6
  • CardPlayer Card not loading

    CardPlayer Card not loading

    Thanks for your efforts to share with us these amazing Pods. I encountered none problem with the CardPlayer Card. It is not loaded when view is loaded. Even in your demo project there is this issue. If one clicks in the white area where the card should be it pops up and is then visible. Seems that the card infos are not being loaded.

    Has someone a solution for me?

    opened by wirnico 5
  • Card content offset in iPhoneX safezone

    Card content offset in iPhoneX safezone

    ((https://user-images.githubusercontent.com/42987961/45067342-042d7780-b0c3-11e8-99a8-21e8640f2273.gif))

    hi how can I solve the problem of the superior zone when the card content show

    bug 
    opened by federico2390 5
  • TableView Issues

    TableView Issues

    I have cards working as TableViewCell's and they are working fine apart from two major issues.

    1. When you dismiss the card, and it returns to its place in the TableView it is often misaligned or has adjusted its size strangely.

    Notice the third cell misaligned

    1. After opening and dismissing Cards in the TableView, eventually, the cards stop presenting the view controller content. Like this:

    Working screen shot 2018-06-11 at 11 51 21 am Stops Presenting screen shot 2018-06-11 at 11 52 10 am

    opened by asikand-view 5
  • IOS14 XCODE BETA 4 : Return black screen after dismiss CardView

    IOS14 XCODE BETA 4 : Return black screen after dismiss CardView

    Hi there, Version : Xcode 12 beta4 with IOS 14 Issue : Return to black screen after dismiss detail view tried to change cardContentVC.modalPresentationStyle = (.fullScreen) but not working for me

    opened by WhiteAvocad0 5
  • Crash when player card is tapped for fullscreen effect

    Crash when player card is tapped for fullscreen effect

    Hello. Ty again for the great app. I noticed there is a crash on iPhone 11 in the simulator when clicking the player video card to go full screen. The crash error is.

    'UIViewControllerHierarchyInconsistency', reason: 'child view controller:<Player.Player: 0x7fcd6898aa00> should have parent view controller:<Cards.DetailViewController: 0x7fcd67d781e0> but actual parent is:<Superapps.PlayerViewController: 0x7fcd67d67490>'

    any ideas, guys?

    opened by tonycrencren 0
  • Crash!

    Crash!

    When clicking on one view, it suddenly froze and went to app delegate. I couldn't move or touch the screen. Other views made the app go black. Why is this?

    opened by JohnCassavetes 1
  • How to Support Dark Mode

    How to Support Dark Mode

    Hi, I'm relatively new to ios development and I love the cards so far. I was just wondering the best way to implement dark mode. My issue right now is that I have a CardHighlight on a black background, and when I press on the card to open the CardContent, during the animation of the card opening the original black background fades to a white. Furthermore, if dark mode is turned on while the app is running, the background of CardContent does not adapt to this change until the animation is over. So for example if my simulator is in light mode, then I build and run my app, and then I press on the card, it opens CardContent with no issues. But say I then go to enable dark mode on the simulator and then press the card to open it, the CardContent remains white until the animation is finished, and only then becomes black. I have attached my project files. Thanks for your help!

    Test.zip

    opened by artemas-radik 0
  • New update turns the view black after closing the view

    New update turns the view black after closing the view

    Hi

    I just updated my app with the newest update to this project. Now, when i close a card, the screen turns black.

    I also tried it with the demo app, and it also turns itself black. I am looking into the issue. And will post update as soon as i have found the bug. But if you have found it, let me know.

    opened by asbis 3
Releases(1.4.0)
Owner
Paolo Cuscela
Paolo Cuscela
GitHub
Elegant transition library for iOS & tvOS

Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit's cumbersome transition APIs—makin

Hero Transitions 21.2k Jan 3, 2023
SPLarkController - Custom transition between controllers. Settings controller for your iOS app.

SPLarkController About Transition between controllers to top. You can change animatable height after presentation controller. For presentation and dis

Ivan Vorobei 965 Dec 17, 2022
This is a Swift based demo project to show how to make the transition Pinterest liked.

PinterestSwift Compatible with Xcode 11 / Swift 5.0 This is a Swift based demo project to show how to make the transition Pinterest 2.0+ liked. Refer

Nicholas Tau 1.9k Dec 20, 2022
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 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
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
Appstore-Review-Guidelines - A curated list of guideline which has to be taken care before submitting your application to Appstore.

Appstore Review Guidelines The App Review Guidelines provide rules and examples across a range of topics, including user interface design, functionali

Aashish Tamsya 14 Dec 16, 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
Simple camera application for iOS that uploads pictures to WebDAV server or Dropbox quickly. Available on the AppStore.

Upupu Simple camera application for iOS that uploads pictures to WebDAV server or Dropbox quickly. Also available on the AppStore. Features Easy and f

Xcoo 65 Nov 15, 2022
MUDownloadButton - a Progressive Download button written in pure swift and inspired by AppStore download button

MUDownloadButton is a Progressive Download button written in pure swift and inspired by AppStore download button . feel free to contribute and pull requests

Mohammad ShahibZadeh 2 Feb 20, 2022
Checks if there is a newer version of your app in the AppStore and alerts the user to update.

YiAppUpdater Checks if there is a newer version of your app in the AppStore and alerts the user to update. Installation YiAppUpdater is available thro

coderyi 4 Mar 17, 2022
Check and update app's version for both AppStore & Fir

VersionUpdate Check and update app's version for both AppStore & Fir How to use Add Channel in info.plist Now we only support two channels "AppStore"

倪敏杰 5 Jan 15, 2021
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Alexis (Aubry) Akers 5.3k Jan 2, 2023
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
General-purpose contextual cards for iOS

BulletinBoard BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Alexis (Aubry) Akers 5.3k Jan 2, 2023
Accept credit cards and PayPal in your iOS app

Important: PayPal Mobile SDKs are Deprecated. The APIs powering them will remain operational long enough for merchants to migrate, but the SDKs themse

PayPal 973 Dec 18, 2022
Accept credit cards and PayPal in your iOS app

Important: PayPal Mobile SDKs are Deprecated. The APIs powering them will remain operational long enough for merchants to migrate, but the SDKs themse

PayPal 973 Dec 18, 2022
iOS custom controller used in Jobandtalent app to present new view controllers as cards

CardStackController iOS custom controller used in the Jobandtalent app to present new view controllers as cards. This controller behaves very similar

jobandtalent 527 Dec 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