{"id":15028434,"url":"https://github.com/ramotion/expanding-collection","last_synced_at":"2025-05-14T12:09:40.420Z","repository":{"id":45769983,"uuid":"59643097","full_name":"Ramotion/expanding-collection","owner":"Ramotion","description":":octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion","archived":false,"fork":false,"pushed_at":"2020-04-06T06:53:36.000Z","size":31962,"stargazers_count":5546,"open_issues_count":25,"forks_count":525,"subscribers_count":148,"default_branch":"master","last_synced_at":"2025-04-11T04:58:12.042Z","etag":null,"topics":["animation","component","library","material-design","swift","ui"],"latest_commit_sha":null,"homepage":"https://www.ramotion.com/smartphone-app-development-ui-library-to-peek-and-pop-cards/","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ramotion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-25T08:01:40.000Z","updated_at":"2025-04-03T09:36:15.000Z","dependencies_parsed_at":"2022-08-12T12:20:30.142Z","dependency_job_id":null,"html_url":"https://github.com/Ramotion/expanding-collection","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ramotion","download_url":"https://codeload.github.com/Ramotion/expanding-collection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345273,"owners_count":21088244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","component","library","material-design","swift","ui"],"created_at":"2024-09-24T20:08:19.040Z","updated_at":"2025-04-11T04:58:19.182Z","avatar_url":"https://github.com/Ramotion.png","language":"Swift","funding_links":["https://paypal.me/Ramotion"],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection\"\u003e\u003cimg src=\"https://github.com/Ramotion/folding-cell/blob/master/header.png\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://github.com/Ramotion/expanding-collection\"\u003e\n\u003cimg align=\"left\" src=\"https://github.com/Ramotion/expanding-collection/blob/master/expanding-collection.gif\" width=\"480\" height=\"360\" /\u003e\u003c/a\u003e\n\n\u003cp\u003e\u003ch1 align=\"left\"\u003eEXPANDING COLLECTION\u003c/h1\u003e\u003c/p\u003e\n\n\u003ch4\u003eAn animated material design UI card peek/pop controller\u003c/h4\u003e\n\n\n___\n\n\n\n\u003cp\u003e\u003ch6\u003eWe specialize in the designing and coding of custom UI for Mobile Apps and Websites.\u003c/h6\u003e\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ch6\u003eStay tuned for the latest updates:\u003c/h6\u003e\n\u003ca href=\"https://goo.gl/rPFpid\" \u003e\n\u003cimg src=\"https://i.imgur.com/ziSqeSo.png/\" width=\"156\" height=\"28\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c/br\u003e\n\n[![Twitter](https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat)](http://twitter.com/Ramotion)\n[![CocoaPods](https://img.shields.io/cocoapods/p/expanding-collection.svg)](https://cocoapods.org/pods/expanding-collection)\n[![CocoaPods](https://img.shields.io/cocoapods/v/expanding-collection.svg)](http://cocoapods.org/pods/expanding-collection)\n[![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Ramotion/expanding-collection)\n[![Travis](https://travis-ci.org/Ramotion/expanding-collection.svg?branch=master)](https://travis-ci.org/Ramotion/expanding-collection)\n[![codebeat badge](https://codebeat.co/badges/6a009992-5bf2-4730-aa35-f3b20ce7693d)](https://codebeat.co/projects/github-com-ramotion-expanding-collection)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)\n\n## Requirements\n\n- iOS 9.0+\n- Xcode 9.0+\n\n## Installation\n\nJust add the Source folder to your project.\n\nor use [CocoaPods](https://cocoapods.org) with Podfile:\n``` ruby\npod 'expanding-collection'\n```\n\nor [Carthage](https://github.com/Carthage/Carthage) users can simply add to their `Cartfile`:\n```\ngithub \"Ramotion/expanding-collection\"\n```\n\n## Usage\n\n```swift\nimport expanding_collection\n```\n\n#### Create CollectionViewCell\n![cell](https://raw.githubusercontent.com/Ramotion/expanding-collection/master/images/image2.png)\n\n1) Create UICollectionViewCell inherit from `BasePageCollectionCell` (recommend create cell with xib file)\n\n2) Adding FrontView\n  - add a view to YOURCELL.xib and connect it to `@IBOutlet weak var frontContainerView: UIView!`  \n  - add width, height, centerX and centerY constraints (width and height constranints must equal cellSize)\n\n  ![cell](https://raw.githubusercontent.com/Ramotion/expanding-collection/master/images/image1.png)  \n  - connect centerY constraint to `@IBOutlet weak var frontConstraintY: NSLayoutConstraint!`\n  - add any desired uiviews to frontView\n\n3) Adding BackView\n  - repeat step 2 (connect outlets to `@IBOutlet weak var backContainerView: UIView!`, `@IBOutlet weak var backConstraintY: NSLayoutConstraint!`)\n\n4) Cell example [DemoCell](https://github.com/Ramotion/expanding-collection/tree/master/DemoExpandingCollection/DemoExpandingCollection/ViewControllers/DemoViewController/Cells)\n\n###### If set `tag = 101` for any `FrontView.subviews` this view will be hidden during the transition animation\n\n#### Create CollectionViewController  \n\n1) Create a UIViewController inheriting from `ExpandingViewController`\n\n2) Register Cell and set Cell size:\n\n``` swift\noverride func viewDidLoad() {\n    itemSize = CGSize(width: 214, height: 460) //IMPORTANT!!! Height of open state cell\n    super.viewDidLoad()\n\n    // register cell\n    let nib = UINib(nibName: \"NibName\", bundle: nil)\n    collectionView?.registerNib(nib, forCellWithReuseIdentifier: \"CellIdentifier\")\n}\n```\n\n3) Add UICollectionViewDataSource methods\n\n``` swift\nextension YourViewController {\n\n  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -\u003e Int {\n    return items.count\n  }\n\n  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -\u003e UICollectionViewCell {\n    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(\"CellIdentifier\"), forIndexPath: indexPath)\n    // configure cell\n    return cell\n  }\n}\n```\n\n4) Open Cell animation\n\n```swift\noverride func viewDidLoad() {\n    itemSize = CGSize(width: 214, height: 264)\n    super.viewDidLoad()\n\n    // register cell\n    let nib = UINib(nibName: \"CellIdentifier\", bundle: nil)\n    collectionView?.registerNib(nib, forCellWithReuseIdentifier: String(DemoCollectionViewCell))\n}\n```\n\n``` swift\nfunc collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {\n    cell.cellIsOpen(!cell.isOpened)\n}\n```\n\n###### if you use this delegates method:\n```Swift\nfunc collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)\n\nfunc scrollViewDidEndDecelerating(scrollView: UIScrollView)\n```\n###### must call super method:  \n```Swift\nfunc collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {\n  super.collectionView(collectionView: collectionView, willDisplayCell cell: cell, forItemAtIndexPath indexPath: indexPath)\n  // code\n}\n\nfunc scrollViewDidEndDecelerating(scrollView: UIScrollView) {\n  super.scrollViewDidEndDecelerating(scrollView: scrollView)\n  // code\n}\n```\n#### Transition animation\n\n1) Create a UITableViewController inheriting from `ExpandingTableViewController`\n\n2) Set header height default 236\n\n``` swift\noverride init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {\n    super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)\n    headerHeight = ***\n}\n```\nOR\n\n``` swift\nrequired init?(coder aDecoder: NSCoder) {\n    super.init(coder: aDecoder)\n    headerHeight = ***\n}\n```\n\n3) Call the push method in YourViewController to YourTableViewController\n\n``` swift\n  if cell.isOpened == true {\n    let vc: YourTableViewController = // ... create view controller  \n    pushToViewController(vc)\n  }\n```\n4) For back transition use `popTransitionAnimation()`\n\n\n## 🗂 Check this library on other language:\n\u003ca href=\"https://github.com/Ramotion/expanding-collection-android\"\u003e\n\u003cimg src=\"https://github.com/ramotion/navigation-stack/raw/master/Android_Java@2x.png\" width=\"178\" height=\"81\"\u003e\u003c/a\u003e\n\n\n## 📄 License\n\nExpanding Collection is released under the MIT license.\nSee [LICENSE](./LICENSE) for details.\n\nThis library is a part of a \u003ca href=\"https://github.com/Ramotion/swift-ui-animation-components-and-libraries\"\u003e\u003cb\u003eselection of our best UI open-source projects.\u003c/b\u003e\u003c/a\u003e\n\nIf you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com\n\n## 📱 Get the Showroom App for iOS to give it a try\nTry this UI component and more like this in our iOS app. Contact us if interested.\n\n\u003ca href=\"https://itunes.apple.com/app/apple-store/id1182360240?pt=550053\u0026ct=expanding-collection\u0026mt=8\" \u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/app_store@2x.png\" width=\"117\" height=\"34\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Fexpanding-collection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framotion%2Fexpanding-collection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Fexpanding-collection/lists"}