{"id":2883,"url":"https://github.com/MaherKSantina/MSPeekCollectionViewDelegateImplementation","last_synced_at":"2025-08-03T12:31:31.935Z","repository":{"id":53594081,"uuid":"136880167","full_name":"MaherKSantina/MSPeekCollectionViewDelegateImplementation","owner":"MaherKSantina","description":"A custom paging behavior that peeks the previous and next items in a collection view","archived":false,"fork":false,"pushed_at":"2023-11-01T13:44:04.000Z","size":241,"stargazers_count":356,"open_issues_count":16,"forks_count":32,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-09-19T13:32:39.731Z","etag":null,"topics":["cell","collectionview","collectionviewlayout","delegate","implementation","ios","peek","swift"],"latest_commit_sha":null,"homepage":"https://medium.com/@maher.santina90/how-to-create-cells-that-peek-on-the-sides-like-ios-11-app-store-ef4bb54c0c7d","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/MaherKSantina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["MaherKSantina"]}},"created_at":"2018-06-11T05:48:31.000Z","updated_at":"2024-09-05T01:49:49.000Z","dependencies_parsed_at":"2024-01-02T21:31:46.067Z","dependency_job_id":null,"html_url":"https://github.com/MaherKSantina/MSPeekCollectionViewDelegateImplementation","commit_stats":{"total_commits":98,"total_committers":10,"mean_commits":9.8,"dds":"0.13265306122448983","last_synced_commit":"5bc891a2ff11be914fee9b58de7bfeabf0a6fff0"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaherKSantina%2FMSPeekCollectionViewDelegateImplementation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaherKSantina%2FMSPeekCollectionViewDelegateImplementation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaherKSantina%2FMSPeekCollectionViewDelegateImplementation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaherKSantina%2FMSPeekCollectionViewDelegateImplementation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaherKSantina","download_url":"https://codeload.github.com/MaherKSantina/MSPeekCollectionViewDelegateImplementation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228543179,"owners_count":17934439,"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":["cell","collectionview","collectionviewlayout","delegate","implementation","ios","peek","swift"],"created_at":"2024-01-05T20:16:25.375Z","updated_at":"2024-12-07T00:31:03.950Z","avatar_url":"https://github.com/MaherKSantina.png","language":"Swift","readme":"# MSPeekCollectionViewDelegateImplementation\n\n# Version 3.0.0 is here! 🎉\nThe peeking logic is now done using a custom `UICollectionViewLayout` which makes it easier to integrate and will introduce less bugs! (And hopefully it will solve all the issues you were facing)\n\n# Migrating from 2.0.0 to 3.0.0\nI've tried to keep minimal effort to migrate from v2 to v3. Here are the steps:\n\n1- Replace `MSPeekCollectionViewDelegateImplementation` initialization with `MSCollectionViewPeekingBehavior`\n\n2- On your `collectionView`, call `configureForPeekingBehavior` like this:\n\n```swift\ncollectionView.configureForPeekingBehavior(behavior: behavior)\n```\n3- Set the collection view's delegate as the view controller (Or any other class you want)\n\n4- In the collection view delegate function `scrollViewWillEndDragging`, call the behavior's `scrollViewWillEndDragging` like this:\n```swift\nfunc scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer\u003cCGPoint\u003e) {\n        behavior.scrollViewWillEndDragging(scrollView, withVelocity: velocity, targetContentOffset: targetContentOffset)\n}\n```\n\n5- ???\n\n6- Profit 💰\n\nYou can check out the example for a detailed use\n\n# Introduction\n\n[![Build Status](https://travis-ci.org/MaherKSantina/MSPeekCollectionViewDelegateImplementation.svg?branch=master)](https://travis-ci.org/MaherKSantina/MSPeekCollectionViewDelegateImplementation)\n\n![ezgif-2-9f7a86182f](https://user-images.githubusercontent.com/24646608/41348369-c0887714-6f4f-11e8-9231-8a86a278ee4a.gif)\n\nCurrent design trends require complex designs which allow horizontal scrolling inside vertical scrolling. So to show the users that they can scroll vertically, a peeking item should be shown on the side. This library does exactly that.\nI wrote this library because there's no pod that does this simple feature. Also, other libraries require me to inherit from a UICollectionViewController, which doesn't give alot of freedom if I'm inheriting from other View Controllers.\n\n## Example\n\nTo run the example project, clone the repo, and run `pod install` from the Example directory first.\n\n## Requirements\n\n- XCode 11.2.1\n- Swift 5\n\nThis pod will probably work on older versions of XCode but I haven't tested it.\n\n## Installation\n\nMSPeekCollectionViewDelegateImplementation is available through [CocoaPods](https://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```ruby\npod 'MSPeekCollectionViewDelegateImplementation'\n```\n\n## Usage\n\n### Storyboard\n1. Drag-Drop a `UICollectionView`\n\n2. Set the reuse identifier for the collection view's cell to `Cell`\n\n3. Create a reference for the collection view\n```swift\n@IBOutlet weak var collectionView: UICollectionView!\n```\n\n4. Bind collection view to outlet\n\n5. Import library\n```swift\nimport MSPeekCollectionViewDelegateImplementation\n```\n\n6. Create a variable of type `MSCollectionViewPeekingBehavior`\n```swift\nvar behavior: MSCollectionViewPeekingBehavior!\n```\n\n7. In `viewDidLoad()`, , initialize the behavior and configure the `collectionView` for peek behavior:\n```swift\nbehavior = MSCollectionViewPeekingBehavior()\ncollectionView.configureForPeekingBehavior(behavior: behavior)\n```\nOr you can use whatever arguments from the ones below (Can be combined together as needed):\n```swift\nbehavior = MSCollectionViewPeekingBehavior(cellSpacing: 10)\n```\n```swift\nbehavior = MSCollectionViewPeekingBehavior(cellPeekWidth: 20)\n```\n```swift\n//minimumItemsToScroll is the minimum number of items that can be scrolled\nbehavior = MSCollectionViewPeekingBehavior(minimumItemsToScroll: 1)\n```\n```swift\n//maximumItemsToScroll is the maximum number of items that can be scrolled if the scroll distance is large\nbehavior = MSCollectionViewPeekingBehavior(maximumItemsToScroll: 3)\n```\n```swift\n//numberOfItemsToShow is the number of items that will be shown at the same time.\nbehavior = MSCollectionViewPeekingBehavior(numberOfItemsToShow: 3)\n```\n\n![peek explanation](https://user-images.githubusercontent.com/24646608/41348656-b0ad14fc-6f50-11e8-8723-2996b016e9c9.jpg)\n\n\n8. In `viewDidLoad()`, set the collection view's delegate to self:\n```swift\ncollectionView.delegate = self\n```\n9. In the collection view delegate function `scrollViewWillEndDragging`, call the behavior's `scrollViewWillEndDragging` like this:\n```swift\nfunc scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer\u003cCGPoint\u003e) {\n        behavior.scrollViewWillEndDragging(scrollView, withVelocity: velocity, targetContentOffset: targetContentOffset)\n}\n```\n10. Create the data source implementation as an extension for the `ViewController`\n```swift\nextension ViewController: UICollectionViewDataSource {\n    func numberOfSections(in collectionView: UICollectionView) -\u003e Int {\n        return 1\n    }\n    \n    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -\u003e Int {\n        return 4\n    }\n    \n    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -\u003e UICollectionViewCell {\n        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: \"Cell\", for: indexPath)\n        //TODO: Configure cell\n        return cell\n    }\n}\n```\n\n11. In `viewDidLoad()`, Set the collection view's data source to `self`\n```swift\ncollectionView.dataSource = self\n```\n\n### Working Example\n\n```swift\nimport UIKit\nimport MSPeekCollectionViewDelegateImplementation\n\nclass ViewController: UIViewController {\n    \n    @IBOutlet weak var collectionView: UICollectionView!\n    var behavior = MSCollectionViewPeekingBehavior()\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        collectionView.configureForPeekingBehavior(behavior: behavior)\n        collectionView.delegate = self\n        collectionView.dataSource = self\n    }\n}\n\nextension ViewController: UICollectionViewDataSource {\n    func numberOfSections(in collectionView: UICollectionView) -\u003e Int {\n        return 1\n    }\n    \n    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -\u003e Int {\n        return 4\n    }\n    \n    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -\u003e UICollectionViewCell {\n        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: \"Cell\", for: indexPath)\n        cell.contentView.backgroundColor = UIColor.red\n        return cell\n    }\n}\n\nextension ViewController: UICollectionViewDelegate {\n    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer\u003cCGPoint\u003e) {\n        behavior.scrollViewWillEndDragging(scrollView, withVelocity: velocity, targetContentOffset: targetContentOffset)\n    }\n    \n    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {\n        print(behavior.currentIndex)\n    }\n}\n```\n\n## Features\n### Scrolling to a specific item\nThe `MSCollectionViewPeekingBehavior` now has a function to scroll to a specific index\n```swift\npublic func scrollToItem(at index: Int, animated: Bool)\n```\n\nYou can do something like:\n```swift\nbehavior.scrollToItem(at: 1, animated: true)\n```\n\n### Listen to index changes\nYou can use the scroll view's delegate function to do that (Make sure you conform to `UICollectionViewDelegate`):\n```swift\nfunc scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {\n    print(behavior.currentIndex)\n}\n```\n\n## Customization\n### Vertical Scroll Direction\nThe implementation supports collection views with vertical directions and will automatically position cells correctly, you can set the scrolling and peeking to be vertical using:\n```swift\ndelegate = MSCollectionViewPeekingBehavior(scrollDirection: .vertical)\ncollectionView.configureForPeekingBehavior(behavior: behavior)\n```\n\n## Author\n\nMaher Santina, maher.santina90@gmail.com\n\n## Sponsor\n\nIf you're liking this repo I'd really appreciate it if you sponsor me (Orange Juice) so that I can continue supporting this project. I'm also working on adding more reusable UI elements similar to this one to make developer's lives easier. Please see [my sponsor page](https://github.com/sponsors/MaherKSantina/) for more details\n\n## Contributing\n\nAny contribution is highly appreciated, please see [CONTRIBUTING.md](https://github.com/MaherKSantina/MSPeekCollectionViewDelegateImplementation/blob/master/CONTRIBUTING.md) for more info.\n\n## License\n\nMSPeekCollectionViewDelegateImplementation is available under the MIT license. See the [LICENSE](https://github.com/MaherKSantina/MSPeekCollectionViewDelegateImplementation/blob/master/LICENSE) file for more info.\n","funding_links":["https://github.com/sponsors/MaherKSantina","https://github.com/sponsors/MaherKSantina/"],"categories":["UI"],"sub_categories":["Table View / Collection View"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaherKSantina%2FMSPeekCollectionViewDelegateImplementation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMaherKSantina%2FMSPeekCollectionViewDelegateImplementation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaherKSantina%2FMSPeekCollectionViewDelegateImplementation/lists"}