• Stars
    star
    5,551
  • Rank 7,376 (Top 0.2 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.



More Repositories

1

animated-tab-bar

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Swift
11,119
star
2

folding-cell

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Swift
10,219
star
3

folding-cell-android

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
Java
4,902
star
4

swift-ui-animation-components-and-libraries

Swift UI libraries, iOS components and animations by @Ramotion
Swift
3,680
star
5

circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Swift
3,437
star
6

paper-onboarding

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion
Swift
3,320
star
7

paper-switch

:octocat: 🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Swift
2,935
star
8

paper-onboarding-android

:octocat: PaperOnboarding is a material design slider made by @Ramotion
Java
2,559
star
9

reel-search

:octocat: 🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Swift
2,537
star
10

cardslider-android

:octocat: 🃏 Cardslider is a material design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Java
2,348
star
11

navigation-stack

:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Swift
2,308
star
12

preview-transition

:octocat: PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion
Swift
2,084
star
13

android-ui-animation-components-and-libraries

Android UI libraries, components and animations by @ramotion
Java
2,068
star
14

adaptive-tab-bar

:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion
Swift
2,033
star
15

expanding-collection-android

:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion
Java
2,022
star
16

fluid-slider

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion
Swift
1,970
star
17

circle-menu-android

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Java
1,889
star
18

garland-view-android

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion
Java
1,838
star
19

aquarelle

:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
JavaScript
1,801
star
20

gliding-collection

:octocat: Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller. iOS library made by @Ramotion
Swift
1,530
star
21

fluid-slider-android

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Android library made by @Ramotion
Kotlin
1,424
star
22

cardslider

:octocat: 🃏 Cardslider is a design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Swift
1,271
star
23

elongation-preview

:octocat: ElongationPreview is an elegant UI push-pop style view controller. iOS library made by @Ramotion
Swift
898
star
24

navigation-toolbar-android

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Kotlin
820
star
25

navigation-toolbar

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Swift
595
star
26

react-native-circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion
JavaScript
589
star
27

circular-carousel

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.
Swift
582
star
28

direct-select-android

:octocat: ≡ DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with.
Java
532
star
29

garland-view

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Swift UI library made by @Ramotion
Swift
501
star
30

showroom

Swift
167
star
31

vr-menu-demo

Prototype of a menu system in Virtual Reality. Javascript VR library made by @Ramotion
JavaScript
124
star
32

iOS-design-tips

Simple iOS design guidelines that will assist you in selecting the dimensions for your AppStore assets:
HTML
78
star
33

blob-menu

Swift
45
star
34

react-native-expanding-collection

JavaScript
37
star
35

showroom-android

Java
28
star
36

utopia

Swift
15
star
37

animations-web

JavaScript
9
star
38

react-native-fluid-slider

5
star
39

distorsion-blur

Swift
2
star