expandingcollection
  • October 15, 2023

An animated material design UI card peek/pop controller

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:

Requirements


  • iOS 9.0+
  • Xcode 9.0+

Installation


Just add the Source folder to your project.

or use CocoaPods with Podfile:

pod ‘expanding-collection’

or Carthage users can simply add to their Cartfile:

github “Ramotion/expanding-collection”

Usage


 

import expanding_collection

Create CollectionViewCell

  1. Create UICollectionViewCell inherit from BasePageCollectionCell (recommend create cell with xib file)

  2. Adding FrontView

  • add a view to YOURCELL.xib and connect it to @IBOutlet weak var frontContainerView: UIView!
  • add width, height, centerX and centerY constraints (width and height constranints must equal cellSize)

  • connect centerY constraint to @IBOutlet weak var frontConstraintY: NSLayoutConstraint!
  • add any desired uiviews to frontView
  1. Adding BackView
  • repeat step 2 (connect outlets to @IBOutlet weak var backContainerView: UIView!@IBOutlet weak var backConstraintY: NSLayoutConstraint!)
  1. Cell example DemoCell
If set tag = 101 for any FrontView.subviews this view will be hidden during the transition animation
Create CollectionViewController
  1. Create a UIViewController inheriting from ExpandingViewController

  2. Register Cell and set Cell size:

override func viewDidLoad() {
itemSize = CGSize(width: 214, height: 460) //IMPORTANT!!! Height of open state cell
super.viewDidLoad()

// register cell
let nib = UINib(nibName: “NibName”, bundle: nil)
collectionView?.registerNib(nib, forCellWithReuseIdentifier: “CellIdentifier”)
}

  1. Add UICollectionViewDataSource methods

extension YourViewController {

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items.count
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(“CellIdentifier”), forIndexPath: indexPath)
// configure cell
return cell
}
}

  1. Open Cell animation

override func viewDidLoad() {
itemSize = CGSize(width: 214, height: 264)
super.viewDidLoad()

// register cell
let nib = UINib(nibName: “CellIdentifier”, bundle: nil)
collectionView?.registerNib(nib, forCellWithReuseIdentifier: String(DemoCollectionViewCell))
}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
cell.cellIsOpen(!cell.isOpened)
}

if you use this delegates method:

func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)

func scrollViewDidEndDecelerating(scrollView: UIScrollView)

must call super method:

func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
super.collectionView(collectionView: collectionView, willDisplayCell cell: cell, forItemAtIndexPath indexPath: indexPath)
// code
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
super.scrollViewDidEndDecelerating(scrollView: scrollView)
// code
}

Transition animation
  1. Create a UITableViewController inheriting from ExpandingTableViewController

  2. Set header height default 236

override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
headerHeight = ***
}

OR

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
headerHeight = ***
}

  1. Call the push method in YourViewController to YourTableViewController

if cell.isOpened == true {
let vc: YourTableViewController = // … create view controller
pushToViewController(vc)
}

  1. For back transition use popTransitionAnimation()

GitHub


View Github

#animation #autolayout #cocoa #cocoapod #cocoapods #cocoatouch #collection #collectionkit #collectionview #collectionviewcell #collectionviewlayout #component #customlayout #dynamic #expandabletableview #flowlayout #hashtag #hashtags #ibinspectable #instagram #instagramanimation #ios #iosanimation #iosdevelopment #iossdk #iosswift #iosthirdparty #library #lightboxalgorithm #materialdesign #objectivec #swift #swiftanimation #swiftcollection #swiftimage #swiftlibrary #swiftpackagemanager #swiftui #swiftuicomponents #table #tableview #tableviewcell #taglistview #tags #tagsview #uicocoapods #uicollectionview #uicollectionviewanimation #uicollectionviewcell #uicollectionviewflowlayout #uicollectionviewlayout #uitableview #uitableviewcell #uitableviewcontroller #xcode
YOU MIGHT ALSO LIKE...
SwiftUI Charts

Build custom charts with SwiftUI Styles      

SwiftUICharts

A simple line and bar charting library that support accessibility written using SwiftUI.

Swipeable cards

Swipeable Cards with SwiftUI

RGStack

This UI attempts to capture the Quibi Card Stack and the associated User Interaction.

🃏 CardStack

A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS & watchOS.