PaoloCuscela / Cards
  • March 1, 2024

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.

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

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)

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


GitHub


View Github

#cards #ibdesignable #ios #storyboard #swift #swift4 ios11 #swift5 #ui #uikit
YOU MIGHT ALSO LIKE...
CameraBackground

Features Both front and back camera supported. Flash modes: auto, on, off. Countdown timer. Tap to focus. Pinch to zoom. Usage  

DKCamera

Description A light weight & simple & easy camera for iOS by Swift. It uses CoreMotion framework to detect device orientation, so ...

HorizonSDK-iOS

Horizon SDK is a state of the art real-time video recording / photo shooting iOS library. Some of the features ...

LLSimpleCamera

LLSimpleCamera: A simple customizable camera - video recorder control LLSimpleCamera is a library for creating a customized camera - video ...

RSBarcodes_Swift

RSBarcodes allows you to read 1D and 2D barcodes using the metadata scanning capabilities introduced with iOS 7 and generate ...