Git Product home page Git Product logo

cards's Introduction

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.

cards's People

Contributors

amagrude avatar amerhukic avatar faresbh avatar icarambaa avatar kietnim avatar paolocuscela avatar robin850 avatar senseiphone17 avatar striderhnd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cards's Issues

Provide access to UIImageView

Would it be possible to open up access to the Card backgroundIV and iconIV in a future release to allow for easy integration with SDWebImage?

Example app got crashed

Example app got crashed due to wrong image name used in project. "icon" name should be "Icon". Attached the screenshot
screen shot 2017-10-18 at 12 29 00 pm
.

facing internal consistency crash

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[UIViewController _loadViewFromNibNamed:bundle:] loaded the "DetailView" nib but the view outlet was not set.'

@objc func cardTapped(){
self.delegate?.cardDidTapInside?(card: self)

    if let vc = superVC {
        
        detailVC.detailView = detailView
        vc.present(detailVC, animated: true, completion: nil)
    } else {
        
        resetAnimated()
    }
}

After presenting on superVC.
What could be the issue?

CardArticle inaccessible

Hey the CardArticle is inaccessible at the moment is this intended?

@IBDesignable class CardArticle: Card {

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

IBDesignables issue is still present.

Still to this update (1.3.2) the IBDesignables issue is still alive. You've mentioned several times that it was fixed yet it is still broken. This was one of my favorite pods to use but it has literally broken viewcontrollers in all my apps I've used it in. Please fix this issue ASAP or tell me a workaround.

Error: IB Designables: Failed to render and update auto layout status for ViewController (BYZ-38-t0r): dlopen(Cards.framework, 1): no suitable image found. Did find:
Cards.framework: required code signature missing for 'Cards.framework'

issuethatsbeenaliveforeversince1dot3

Centering Title Label

So I'm trying to center the Title Label for a particular view I'm building. I managed to center the Category Label by setting

categoryLbl.textAlignment = .center

But when I try to do the same thing for titleLbl, nothing happens. This is where I am right now:

screen shot 2018-06-11 at 12 47 03 pm

Reusable issue with UITableView

I would like to thank you for the great work.
When we tap on the card you are creating an instance of DetailViewController along with Chaildviewcontroller. when we come out of that screen, you are keeping the view instance in the stack. kindly tell me the solution for this. I'm attaching my sample project in the attachments. kindly look into it as well.

Thanks in advance.
AppStoreCardView.zip

Rotation & Stack Views

Let me start with the rotation issue. If you were to rotate your viewcontroller on your device the card won't update, it gets worse after opening the card on a rotation. Doing so will resize the whole app and make it unusable.

Then with stack views. Setting a stack views alignment to center causes the cards to completely disappear. Odd, isn't it?

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.

Using Cards in a CollectionView

Hi Paolo,

First of all thanks for such a great work you've done. I'm considering using the cards in a collection view or tableview. How would you recommend to go on? I mean with the current implementation if I set the class of my CollectionViewCell main UIView to i.e. CardsHighlight and tap on one of the cells the Cards grow inside the Cell region, I want it to grow within the entire screen.

Thanks in advance,
Semih

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

Card X button

Is it possible to add an X (close) button to the card, like the App Store?

detailview with 'uitableview' other than scrollview possible?

Hello, thank you so much for the great job!
Actually I want to load a uitableview in the detail screen of the Detailview.
But because the detailview is uiscrollview, 'uitableview in the scrollview' shows so weird functionality when swipe up/down.

How can I use uitableview in the detailview? just like..:
image-1

Thanks a lot.

CardHighlight crashes on dismiss (swipe down)

I have added CardHighlight to a UICollectionViewCell, to have a few CardHighlights and be able to swipe to see more (vertically.)

I am getting this crash on dismissing it.

*** Assertion failure in -[UICollectionView _addScrollViewScrollObserver:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit/UIKit-3698.34.4/UIScrollView.m:7995
2018-03-06 19:15:33.016450+0200 IEA[803:261955] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'ERROR: UIScrollView does not support multiple observers implementing _scrollViewWillEndDraggingWithVelocity:targetContentOffset:'

If there isn't a reasonable solution to this issue, is there another logical way to have multiple (up to 10) CardHighlights, created dynamically in code?

Thanks

IBDesignables issue wich prevents to show storyboard preview.

Hello, thanks for the awesome framework!

I just tried the Getting Started example. After dragging the Card into the ViewController and adding an @IBOutlet. I got an error that "Use of undeclared type 'CardHightlight'".

I installed the framework using Cocoapods. I'm new to iOS dev and I probably miss some stuff. Could you explain a bit why does this happen?

Thanks!

Card is not showing in TableviewCell

Hi PaoloCuscela,
I am facing this issue with Tableview. I have drag a view in cell and following your instructions but didn't show the card.
My code below, Please guide where i am missing things.

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        let cardslayout = cell.viewWithTag(100) as! CardHighlight
        cardslayout.delegate = self
        let cardContent = storyboard?.instantiateViewController(withIdentifier: "CardContent")
        cardslayout.shouldPresent(cardContent, from: self, fullscreen: true)
        return cell
    }

simulator screen shot - iphone 8 plus - 2017-12-08 at 21 30 26

Thanks

About the CardDelegate

Hello,I found something when any card content view is presented:

cardIsShowingDetail and cardIsHidingDetail called twice;
others called once;

why that?
Thanks a lot.

the codes:

extension MyViewController: CardDelegate {

func cardIsShowingDetail(card: Card) {
    NSLog("DetailView Is Showing")
}

func cardIsHidingDetail(card: Card) { 
    NSLog("DetailView Is Hiding")
}

func cardWillShowDetailView(card: Card) {
    NSLog("DetailView Will Show")
}

func cardDidShowDetailView(card: Card) {
    NSLog("DetailView Did Show")
}

func cardWillCloseDetailView(card: Card) {
    NSLog("DetailView Will Close")
}

func cardDidCloseDetailView(card: Card) {
    NSLog("DetailView Did Close")
}

}

the results:

Demo[35995:1561170] DetailView Will Show
(0.0, 0.0, 375.0, 812.0)
2018-03-21 13:30:52.099161+0800 Demo[35995:1561170] DetailView Is Showing
(0.0, 0.0, 375.0, 812.0)
2018-03-21 13:30:52.425720+0800 Demo[35995:1561170] DetailView Is Showing
(0.0, 0.0, 375.0, 812.0)
2018-03-21 13:30:52.728209+0800 Demo[35995:1561170] DetailView Did Show
2018-03-21 13:30:54.745387+0800 Demo[35995:1561170] DetailView Will Close
2018-03-21 13:30:54.761772+0800 Demo[35995:1561170] DetailView Is Hiding
2018-03-21 13:30:55.079228+0800 Demo[35995:1561170] DetailView Is Hiding
2018-03-21 13:30:55.380317+0800 Demo[35995:1561170] DetailView Did Close

A bug when using Cards in UIScrollView

Thanks for your great workπŸ‘!

I met an issue when I use Cards in UIScrollView. I put some cards on scrollview, and when I slide the finder with the finger holding on the card, the card call the "pushBackAnimated" method and will not call the "cardTapped" method.

detailView is private variable

Hello,

According to getting started guide 2nd step, we should do this:

let detailVC = storyboard?.instantiateViewController(withIdentifier: "CardContent")
card.detailView = detailVC?.view

But the thing is, how do you assign value to a private variable of Card class?

Here is the declaration of "detailView" property in Card class:

fileprivate var detailView: UIView?

Does player mode support youtube url?

I set youtube url in player card but the shows an error "something wrong with video URL". So it doesn't support youtube shared url? any ideas to support this feature?

Card animation glitch with fullscreen enabled

Hi!
I've found a little glitch in this awesome library :)

Step to reproduce:

First ViewController:
background color: black
card (CardHighlight) background color: red

Second ViewController (detailViewController):
background color: green

I open the card details with fullScreen option set to true

After closing, when the details is "shrinked" to card size I can see the green corners under the red rounded corners of the card for a while, then they disappears. It seems that a property animation jumps to its end without fading.

I attached 3 screenshot just to be clear :)

Card
Detail
Glitch

Cards keep being pressed even after the touch event is moved.

I used CardHighlight inside TableViewCell to make a list of cards.
It works fine, except that it is kept being pressed even though the touch event is cancelled or moved (
I want the cards to be unpressed again when the touch event ends.
Please have a look at this. Thanks :)

[Question] Print statement in DetailViewController.swift

Hi,

Is there any particular reason you are calling print(scrollView.frame) in DetailViewController.swift? Using the cards in full screen causes the debugger console to be flooded with the print statements.

Thank you!

P.S Thanks for all the work you do the project, it's amazing :)

[Bug] TableView disappears after exiting and reopening Card

Hi,

I have been experiencing an issue with the framework and TableViews. After I click into the card, the TableView appears and everything is fine. However, when I close the card and reopen it again, the TableView doesn't appear.

Essentially, the TableView I programmed inside the card only appears the first time I open the card, and will not show in any subsequent openings of the card.

Is this an issue on my end or is this expected behavior?

Thank you!

P.S Thanks for the awesome framework

Blur effect on Card Article content (Content settings)

I am trying to set the blur effect between the background image and the title on Card Article.
I have read your Wiki regarding this and if I have understood everything right I should set the desired value on the member ’blurEffect’.

However, when I try this Xcode says: Value of type 'CardArticle' has no member ’blurEffect’.

I can however access the other members ’titleSize’ and ’subtitleSize’ which are also mentioned under Card Article > Content settings in your Wiki.

Have I misunderstood something or is this not yet implemented?

Thank you for an awesome framework and thanks in advance

selection bug in tableview

first of all, I would like to thank you for the incredible work
I ran into a few bugs I hope you can fix them
am using cards in a table view and its working perfectly but there is that bug when I click on a card and
scroll the card keeps pressed it doesn't go back to its original size moreover if I touched it again the content appears and once I close it the constraints gets messy and the card is still selected below I will attach screenshots in this order

  1. normal once table load
  2. click and scroll then release (notice the first card is now smaller than the second card)
  3. after opening and closing the card content ( notice now the first card is still smaller and shifted to the screen left edge )
    thanks, a lot sir for your time and efforts

1

snip20180210_4
2 (notice how the first card is now smaller than the second card)

snip20180210_2
3 ( notice now the first card is still smaller and shifted to the screen left edge )

snip20180210_3

No easy way to manually tell CardPlayer to play video

Inside of CardPlayer the player variable has been exposed, I'm guessing with the intent to allow manipulating the video player.

Unfortunately calling play() on the player object does not cause the play button to disappear.

The alternative could be to call the playTapped() method which seems to be done when auto play is turned on, but this method is not exposed thus cannot be called from outside the class.

Exposing the playTapped() seems like a hacky solution as the name is not really something you would expect for an outside class to know, so maybe another method named startVideo() or playVideo() would be more appropriate.

Thanks!

Access Modifiers

Hi, great framework!

Most of the relevant classes in here don't have an access modifier which means that they are the default internal. To import and use this library, the view classes and their exposed properties need to be declared with public access modifiers to be used outside of the framework.

I have forked this and will work on adding the modifiers.

Can't seem to get CardPlayer to play a video

Even when using the URL included in the demo project, I get the following errors:

CARDS: Something wrong with the video source URL CARDS: Something wrong with the video source URL 2018-01-03 10:27:32.815079+0200 Scenes[47970:14144981] CredStore - performQuery - Error copying matching creds. Error=-25300, query={ class = inet; "m_Limit" = "m_LimitAll"; "r_Attributes" = 1; sync = syna; }

I've tried copying everything from the demo project to no avail

How to make default header section on detailView scroll with tableView.

I am trying to use a tableView with the detailView. But it seems as though the main image just stays static when scrolling through the tableView rather than scrolling with it. TableView works fine but I am wondering if you could make it so the main image be a part of the tableView rather than separate.

iphone x bug

when any card content view is presented but in fullscreen mode part from the title is hidden under the notch !!
screen shot 2018-02-10 at 4 12 51 pm

Remove 'view' button

Can we have the view button removable or interchangeable. Maybe make it a public property or just provide a method to get it and set it to nil?

IB Designable Failed to render and update

Hi,

I just created a single view project, added a view to the main view controller, set it has CardHighlight then added a second View Controller with some text. I get the following error:

IB Designables
Failed to render and update auto layout status for ViewController dlopen(Cards.framework), 1) Library not loaded: @rpath/Player.frameworks/Player

Is there something else I should load via CocoaPods like Player? The link to Player on your Readme doesn't work.

Thanks,
Dave

Cannot update title, subtitle and category label for CardPlayer

Hello,

Upfront I wanted to say thank your for the project!

I have a UICollectionView and each cell contains a CardPlayer. I can set the new videoSource and playerCover correctly, but in order to refresh the CardPlayer labels I have to call setNeedsDisplay() in order to get the redraw to happen. Those labels are private so I do not have access to them outside of the class.

Set a button in card details

Hi, I found this fantastic library. I've integrated it today, but when I try to add a button in the contents of card, it's impossible to touch.

Is it possible to add a button in card details?

Thank you

Hide Status bar for DetailViewController

When transitioning to fullscreen mode I have hidden the status bar, however the scroll view still appears 20px from the top.

I have set the following properties

    scrollView.frame.origin.y = 0
    
    if isFullscreen {
        scrollView.frame = view.frame

    }

However there's still white space like so

screen shot 2017-11-24 at 00 40 40

Presenting detail view, scrollView leaves visual artefacts.

In the detailViewController the scrollview background is set to white, however this looks a bit odd with the rounded corners of the card. Also scrolling to the bottom of the detailed view will also expose the white scrollView.

Would it be better to set this to the detailView's background colour?

scrollView.layer.backgroundColor = UIColor.white.cgColor

vs

scrollView.layer.backgroundColor = detailView?.backgroundColor?.cgColor ?? UIColor.white.cgColor

screen shot 2017-10-30 at 09 14 16

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.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.