ExpandingCollection is an animated material design UI card peek/pop controller.

Overview

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.



Comments
  • Custom button on back container view becomes disabled after animation

    Custom button on back container view becomes disabled after animation

    Great library! I love this thing. But I noticed something very strange, and didn't quite figure out what's going on. I have a button on the back view, but looks like it's disabled when shown after the first animation. Any idea what might cause this? And how it could be fixed?

    opened by Jackson0111 6
  • Cannot override with a stored property 'frontContainerView'

    Cannot override with a stored property 'frontContainerView'

    I am trying to follow the instruction on creating a custom cell. Every time I assign the cell this particular name I get the error in the title. I am probably missing out on something. Help appreciated 👍

    opened by jayvenn 5
  • Problem with Sliding CollectionView

    Problem with Sliding CollectionView

    Hi! Ramotion

    I found a bug, when I set ItemWidth > 270 ,some problem will happe, I can't fix it, I need your help! Thanks!!! untitled23

    My English is so bad, I hope you can understand what I mean. Thank you!

    opened by ganjmeng 4
  • Add target/gesture to AnimatingBarButton

    Add target/gesture to AnimatingBarButton

    Hello there,

    i'm currently not able to add a target to the AnimatingBarButton appearing on the ExpandingViewController. I just want to execute a segue to another view controller on tap. I think because it's a custom view, i need to handle user interactions by myself, but i don't know how.

    Can anybody help?

    Thank you very much.

    Francis

    question 
    opened by daFant 3
  • Is there a way to set the space between cells?

    Is there a way to set the space between cells?

    I got the collection view up and running, but my project need to have the cells to be closer to each other, how do I set the space in between the cells?

    Thanks.

    question 
    opened by junweimah 3
  • Question that is not really related to the product, but why using extensions?

    Question that is not really related to the product, but why using extensions?

    Hi Developers in Ramotion,

    I was reading the example code included, and noticed that you are using extensions a lot. For example in DemoTableViewController, every methods are written as extensions.

    Is there any reason/benefit why you are writing it this way?

    BR AnChin

    opened by biogerm 3
  • Assigning an array's count to collection view.

    Assigning an array's count to collection view.

    I'm declaring a global var items:[UIImage] = [] and I've a

    func loadimages(url: String!) -> [UIImage]{
    
            let unsafe = url
    
            var data1 = [UIImage]()
    
    
    
            let bingo = NSURL(string: unsafe!)
            Alamofire.request(.GET, bingo!)
            .validate()
                .responseJSON{ response in
                    switch response.result{
                    case .Success:
    
                        let json33 = JSON(data: response.data!)
    
                        let allImageStrings = json33["response"]["docs"].flatMap { $0.1["imageData"].first?.1}
    
    
                        for Bro in allImageStrings{
    
                            let url = NSURL(string: Bro.string!)
                            let data = NSData(contentsOfURL: url!)!
                            let image = UIImage(data: data)
    
    
                            data1.append(image!)
    
                        }
    
                      self.items = data1
    
    
    
                        //print(self.items.count)
    
                    case .Failure(let error):
                        print(error)
                    }
    
    
        }
    
    
        return data1
    
        }
    

    But when I run this,

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

    Returns 0. How do I make it return the items.count properly? :(

    question 
    opened by Dershowitz011 3
  • Problem with carthage!!

    Problem with carthage!!

    When I use this framework from carthage, I am unable to inherit from BasePageCollectionCell. But when I copy the source file directly to my project, everything work fine. When I inherit from BasePageCollectionCell using carthage, I'm just unable to assign the class to the cell.xib. Please fix. Thanks.

    question 
    opened by Dershowitz011 3
  • add round to the calculation of the currentIndex in ExpandingViewController

    add round to the calculation of the currentIndex in ExpandingViewController

    Thx for this cool library. I'm trying to add to my project.

    Right now I have an issue with the currentIndex. When I peek at the card, the collectionView.contentOffset.x is 221.5, but when I go to the ExpandingTableViewController and then return, the collectionView.contentOffset.x changes to 221.0. This leads to currentIndex pointing at the previous card.

    I guess it could be easily fixed by rounding the result.

    opened by grundid 3
  • Skipping middle step

    Skipping middle step

    In your demo, there is some kind of a small reveal with information on first swipe up. I wonder if there is a way to skip this and just use fullscreen end view on swipe up or a tap?

    question 
    opened by antonijap 2
  • Ambiguous NSLayoutAttribute compile error

    Ambiguous NSLayoutAttribute compile error

    Using Xcode 9.2 and 9.3 I get a Swift Compile error in the BasePageCollectionCell.swift Occurs in line 179 and 189

    Expression type '[(NSLayoutAttribute, Double)]' is ambiguous without more context

    opened by StewartLynch 2
  • Pushed view controller has to be TableViewController?

    Pushed view controller has to be TableViewController?

    Not sure if I got it right, but it seems like you have to push and pop the ExpandingTableViewController, is there any easy and clean way how to push a UIViewController?

    opened by gbread 2
  • backroundImage

    backroundImage

    Hi,

    I created an UIView in xib file(front container) instead of the background image. How can I set the header of TableViewControler with my UIView?

    Thank you very much!

    question 
    opened by moisebc 1
  • ExpandingTableViewController line 37

    ExpandingTableViewController line 37

    let insets = automaticallyAdjustsScrollViewInsets has a Swift Compiler Warning. 'automaticallyAdjustsScrollViewInsets' was deprecated in iOS 11.0: Use UIScrollView's contentInsetAdjustmentBehavior instead

    opened by gijoecodes 0
  • expanding tableView header image

    expanding tableView header image

    thanks to beautiful open source

    i have some issue

    double touch and transition tableView

    then success transitioning but tableView header load after up like this

    img_5744

    i didn't use storyboard

    my tableView code same demo tableView code

    and i use this code

    pushToViewController(MainTableViewController())

    Is there any solution?

    thanks

    opened by gobenpark 2
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
JustPeek is an iOS Library that adds support for Force Touch-like Peek and Pop interactions on devices that do not natively support this kind of interaction.

JustPeek Warning: This library is not supported anymore by Just Eat. JustPeek is an iOS Library that adds support for Force Touch-like Peek and Pop in

Just Eat 68 Apr 4, 2021
PeekView supports peek, pop and preview actions for iOS devices without 3D Touch capibility

PeekView When implementing peek, pop and preview actions with 3D Touch, you may want to support such features for users accessing your app from older

Huong Do 123 Mar 25, 2022
SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader

SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader, follow the livestream tutorial by MengTo.

Terry Kuo 4 Jun 10, 2022
Interactive and fully animated Material Design button for iOS developers.

WYMaterialButton Inspired by Google Material Design, written purely in Swift 3. WYMaterialButton implemented Material Design on iOS and add more dynam

Yu Wang 76 Oct 7, 2022
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022
Create an easy to peek SwiftUI View to showcase your own data, catalog, images, or anything you'd like.

Create an easy to peek SwiftUI View to showcase your own data, catalog, images, or anything you'd like.

Peter Larson 17 Jun 27, 2022
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.

SwiftySideMenu SwiftySideMenu is a lightweight, fully customizable, and easy to use controller to add left menu and center view controllers with scale

Hossam Ghareeb 84 Feb 4, 2022
ElongationPreview is an elegant UI push-pop style view controller

ElongationPreview is an elegant UI push-pop style view controller

Ramotion 886 Dec 19, 2022
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.3k Dec 20, 2022
Modular and customizable Material Design UI components for iOS

Material Components for iOS Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and

Material Components 4.6k Dec 29, 2022
Material design components for iOS written in Swift

MaterialKit NOTE: This project is unmaintained. Material design components (inspired by Google Material Design) for iOS written in Swift Please feel f

Le Van Nghia 2.5k Jan 5, 2023
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

CIRCLE MENU Simple, elegant UI menu with a circular layout and material design animations We specialize in the designing and coding of custom UI for M

Ramotion 3.4k Dec 29, 2022
iOS library Paper Onboarding is a material design UI slider written on Swift.

iOS library Paper Onboarding is a material design UI slider written on Swift. We specialize in the designing and coding of custom UI

Ramotion 3.2k Jan 5, 2023
A Customizable Switch UI for iOS, Inspired from Google's Material Design in Swift

MJMaterialSwitch Overview MJMaterialSwitch is google's material design like switch UI with animation features. This library has cool and sophisticated

Jaleel Nazir 64 Jul 29, 2022
A Swift material design UI module which paints over the parent view when the switch is on.

A Swift material design UI module which paints over the parent view when the switch is on. We specialize in the designing and coding of c

Ramotion 2.9k Dec 29, 2022
Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Ethan Lipnik 89 Nov 29, 2022
A Slide Menu, written in Swift, inspired by Slide Menu Material Design

Swift-Slide-Menu (Material Design Inspired) A Slide Menu, written in Swift 2, inspired by Navigation Drawer on Material Design (inspired by Google Mat

Boisney Philippe 90 Oct 17, 2020
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.3k Jan 1, 2023
Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app small side menu. 🌶

RHSideButtons ?? Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app

Robert Herdzik 166 Nov 14, 2022
A Swift material design UI module which paints over the parent view when the switch is on.

: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

Ramotion 2.9k Dec 29, 2022