Convert Figma logo to code with AI

Ramotion logoexpanding-collection

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

5,549
529
5,549
26

Top Related Projects

A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

5,371

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

This project aims to provide a simple and customizable pull to refresh implementation. Made in Yalantis

Animated side menu with customizable UI

This component implements transition animation to crumble view-controller into tiny pieces.

Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.

Quick Overview

Ramotion/expanding-collection is an iOS library that provides an animated expanding collection view. It offers a unique and visually appealing way to present content in iOS applications, with cards that expand to reveal more details when tapped.

Pros

  • Visually stunning and engaging user interface
  • Smooth animations and transitions
  • Customizable appearance and behavior
  • Easy integration with existing iOS projects

Cons

  • Limited to iOS platform only
  • May require additional performance optimization for large datasets
  • Learning curve for developers unfamiliar with custom collection views
  • Potential accessibility concerns due to its highly visual nature

Code Examples

  1. Setting up the expanding collection view:
let expandingCollection = ExpandingCollectionView(frame: view.bounds)
view.addSubview(expandingCollection)
  1. Configuring the data source:
expandingCollection.dataSource = self
expandingCollection.delegate = self

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ExpandingCell", for: indexPath) as! ExpandingCollectionViewCell
    cell.customView = items[indexPath.row]
    return cell
}
  1. Handling cell expansion:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    guard let cell = collectionView.cellForItem(at: indexPath) as? ExpandingCollectionViewCell else { return }
    cell.animateExpanding()
}

Getting Started

  1. Install the library using CocoaPods:

    pod 'expanding-collection'
    
  2. Import the library in your Swift file:

    import expanding_collection
    
  3. Create and configure an ExpandingCollectionView:

    let expandingCollection = ExpandingCollectionView(frame: view.bounds)
    expandingCollection.dataSource = self
    expandingCollection.delegate = self
    view.addSubview(expandingCollection)
    
  4. Implement the required UICollectionViewDataSource and UICollectionViewDelegate methods to populate and interact with the collection view.

Competitor Comparisons

A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

Pros of AnimatedCollectionViewLayout

  • More versatile with multiple animation styles (e.g., cubic, parallax, zoom)
  • Easier to customize and extend with new animation types
  • Lightweight and focused solely on collection view animations

Cons of AnimatedCollectionViewLayout

  • Less visually striking compared to expanding-collection's card-based design
  • Lacks additional features like detail view transitions
  • May require more setup for complex layouts

Code Comparison

AnimatedCollectionViewLayout:

let layout = AnimatedCollectionViewLayout()
layout.animator = LinearCardAttributesAnimator()
collectionView.collectionViewLayout = layout

expanding-collection:

let layout = ExpandingCollectionViewLayout()
layout.itemSize = CGSize(width: 256, height: 335)
collectionView.collectionViewLayout = layout

AnimatedCollectionViewLayout offers more flexibility in animation types, while expanding-collection provides a more specific, visually appealing card-based layout out of the box. AnimatedCollectionViewLayout is better suited for developers who want to create custom animations, while expanding-collection is ideal for those seeking a ready-to-use expanding card interface with minimal setup.

5,371

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

Pros of Koloda

  • Simpler implementation for basic card swiping functionality
  • More lightweight and focused on a specific use case (Tinder-like card swiping)
  • Easier to customize for simple card-based interfaces

Cons of Koloda

  • Less versatile compared to the expanding collection concept
  • Limited to card swiping interactions, lacking advanced layout options
  • May require additional work for complex animations beyond basic swiping

Code Comparison

Koloda:

let kolodaView = KolodaView()
kolodaView.dataSource = self
kolodaView.delegate = self

func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
    return images.count
}

Expanding-collection:

let expandingCollection = ExpandingCollection(collectionViewLayout: layout)
expandingCollection.dataSource = self
expandingCollection.delegate = self

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

Both repositories provide iOS UI components, but they serve different purposes. Koloda focuses on Tinder-like card swiping, while Expanding-collection offers a more complex expanding cell layout. The code comparison shows similar setup patterns, but Expanding-collection requires more configuration for its advanced features.

This project aims to provide a simple and customizable pull to refresh implementation. Made in Yalantis

Pros of Pull-to-Refresh.Rentals-iOS

  • Focused on a specific UI interaction (pull-to-refresh)
  • Lightweight and easy to integrate into existing projects
  • Customizable animation and styling options

Cons of Pull-to-Refresh.Rentals-iOS

  • Limited to pull-to-refresh functionality
  • Less versatile for creating complex UI layouts
  • May require additional libraries for more advanced features

Code Comparison

Pull-to-Refresh.Rentals-iOS:

let refreshControl = PullToRefresh(refreshViews: [imageView, textLabel])
tableView.addPullToRefresh(refreshControl) {
    // Refresh action
}

expanding-collection:

let expandingCollection = ExpandingCollection(cells: items)
expandingCollection.cellSize = CGSize(width: 250, height: 350)
expandingCollection.delegate = self
view.addSubview(expandingCollection)

Summary

Pull-to-Refresh.Rentals-iOS is a specialized library for implementing pull-to-refresh functionality with customizable animations. It's lightweight and easy to integrate but limited in scope. expanding-collection, on the other hand, offers a more comprehensive solution for creating expandable card-based layouts with advanced transitions and animations. While Pull-to-Refresh.Rentals-iOS is ideal for projects requiring a specific pull-to-refresh feature, expanding-collection provides greater flexibility for complex UI designs and interactions.

Animated side menu with customizable UI

Pros of Side-Menu.iOS

  • Simpler implementation focused on side menu functionality
  • Lightweight and easy to integrate into existing projects
  • Customizable menu appearance and animations

Cons of Side-Menu.iOS

  • Limited to side menu functionality, less versatile than Expanding-Collection
  • Less active development and community support
  • Fewer customization options for overall UI design

Code Comparison

Side-Menu.iOS:

let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController
SideMenuManager.default.addPanGestureToPresent(toView: self.navigationController!.navigationBar)

Expanding-Collection:

let expandingViewController = ExpandingViewController()
expandingViewController.itemSize = CGSize(width: 256, height: 335)
expandingViewController.collectionView?.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
expandingViewController.delegate = self

Both repositories offer unique UI components for iOS applications. Side-Menu.iOS provides a straightforward solution for implementing side menus, while Expanding-Collection offers a more complex and visually appealing card-based interface. The choice between the two depends on the specific requirements of your project and the desired user experience.

This component implements transition animation to crumble view-controller into tiny pieces.

Pros of StarWars.iOS

  • Unique and visually appealing Star Wars-themed animation
  • Simpler implementation for specific use cases
  • Lightweight and focused on a single animation effect

Cons of StarWars.iOS

  • Less versatile compared to the more general-purpose expanding-collection
  • Limited customization options for the animation
  • Not actively maintained (last update was several years ago)

Code Comparison

StarWars.iOS:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    if !animated {
        self.performAnimation()
    }
}

expanding-collection:

override func viewDidLoad() {
    super.viewDidLoad()
    
    // registration cell
    let nib = UINib(nibName: String(describing: CollectionViewCell.self), bundle: nil)
    collectionView?.register(nib, forCellWithReuseIdentifier: String(describing: CollectionViewCell.self))
}

The StarWars.iOS code snippet shows the animation trigger in the viewDidAppear method, while the expanding-collection example demonstrates cell registration in viewDidLoad. This highlights the different focus areas of each library, with StarWars.iOS emphasizing animation and expanding-collection providing a more comprehensive collection view implementation.

Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.

Pros of GuillotineMenu

  • Simpler implementation, making it easier to integrate into existing projects
  • More focused functionality, specifically for menu animations
  • Lightweight and less resource-intensive

Cons of GuillotineMenu

  • Limited to menu animations, less versatile than expanding-collection
  • Fewer customization options for the animation and appearance
  • Less active development and community support

Code Comparison

GuillotineMenu:

let menuButton = UIButton()
let menu = GuillotineMenu(menuButton: menuButton)
menu.delegate = self
menu.presentationStyle = .slideInOut
view.addSubview(menu)

expanding-collection:

let layout = ExpandingCollectionViewLayout()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(ExpandingCollectionViewCell.self, forCellWithReuseIdentifier: "cell")
collectionView.dataSource = self
collectionView.delegate = self
view.addSubview(collectionView)

The code comparison shows that GuillotineMenu is more straightforward to implement, requiring fewer lines of code and less setup. However, expanding-collection offers more flexibility and customization options, albeit with a slightly more complex implementation.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

EXPANDING COLLECTION

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:


Twitter CocoaPods CocoaPods Carthage compatible Travis codebeat badge Donate

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

cell

  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)

cell

  • 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()

🗂 Check this library on other language:

📄 License

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

This library is a part of a selection of our best UI open-source projects.

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.