ContextQMD
Back to Expanding Collection

README

README.md

3.1.07.5 KB
Original Source

<a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=expanding-collection"></a>

<a href="https://github.com/Ramotion/expanding-collection"> </a> <p><h1 align="left">EXPANDING COLLECTION</h1></p> <h4>An animated material design UI card peek/pop controller</h4>
<p><h6>We specialize in the designing and coding of custom UI for Mobile Apps and Websites.</h6> <a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=expanding-collection"> </a> </p> <p><h6>Stay tuned for the latest updates:</h6> <a href="https://goo.gl/rPFpid" > </a></p> </br>

Requirements

  • iOS 9.0+
  • Xcode 9.0+

Installation

Just add the Source folder to your project.

or use CocoaPods with Podfile:

ruby
pod 'expanding-collection'

or Carthage users can simply add to their Cartfile:

github "Ramotion/expanding-collection"

Usage

swift
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:

swift
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
swift
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
swift
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))
}
swift
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    cell.cellIsOpen(!cell.isOpened)
}
if you use this delegates method:
Swift
func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)

func scrollViewDidEndDecelerating(scrollView: UIScrollView)
must call super method:
Swift
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

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

OR

swift
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    headerHeight = ***
}
  1. Call the push method in YourViewController to YourTableViewController
swift
  if cell.isOpened == true {
    let vc: YourTableViewController = // ... create view controller  
    pushToViewController(vc)
  }
  1. For back transition use popTransitionAnimation()

🗂 Check this library on other language:

<a href="https://github.com/Ramotion/expanding-collection-android"> </a>

📄 License

Expanding Collection is released under the MIT license. See LICENSE for details.

This library is a part of a <a href="https://github.com/Ramotion/swift-ui-animation-components-and-libraries"><b>selection of our best UI open-source projects.</b></a>

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.

<a href="https://itunes.apple.com/app/apple-store/id1182360240?pt=550053&ct=expanding-collection&mt=8" > </a> <a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=expanding-collection"> </a>