Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yudiz-solutions/yzcenterflowlayout
Carousel flow layout for UICollectionView on iOS.
https://github.com/yudiz-solutions/yzcenterflowlayout
carousel carousel-view flowlayout ios ios-swift layout swift-4 uicollectionviewlayout
Last synced: 3 months ago
JSON representation
Carousel flow layout for UICollectionView on iOS.
- Host: GitHub
- URL: https://github.com/yudiz-solutions/yzcenterflowlayout
- Owner: yudiz-solutions
- Created: 2019-01-17T10:40:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-31T13:16:17.000Z (about 1 year ago)
- Last Synced: 2024-09-29T22:04:04.291Z (3 months ago)
- Topics: carousel, carousel-view, flowlayout, ios, ios-swift, layout, swift-4, uicollectionviewlayout
- Language: Swift
- Homepage: https://www.yudiz.com
- Size: 8.48 MB
- Stars: 37
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Preview
## Features
* Animate cell scale while scrolling
* Rotate cell while scrolling
* Easy to integrate and use
* Easy Customizeable
## Requirements
* iOS 11.0 +
## Usage
### Via code
Create a `YZCenterFlowLayout` object, set its itemSize and assign it to your UICollectionView.
```
let layout = YZCenterFlowLayout()
layout.itemSize = CGSizeMake(200, 200)
collectionView.collectionViewLayout = layout
```
#### via Interface Builder
Set the UICollectionView layout class to `YZCenterFlowLayout`, and set its itemSize and its properties as given below
### Properties
* `animationMode` (default is scale with sideItemScale between 0 and 1, default is 0.7, sideItemAlpha: between 0 and 1, default is 0.6, sideItemShift: value in pixels, default is 0)
*Can be set only through code.*
* `YZCenterFlowLayoutAnimation.scale(sideItemScale: 0.7, sideItemAlpha: 0.6, sideItemShift: 0.0)`
The animation apply following 2 here
1. Scale
2. Rotation
* `spacingMode` (default is fixed spacing of 40 pts)
*Can be set only through code.*
* `YZCenterFlowLayoutSpacingMode.fixed(spacing: CGFloat)`
Items in the carousel are positioned with a fixed space between them.
* `YZCenterFlowLayoutSpacingMode.overlap(visibleOffset: CGFloat)`
A fixed part of the side items are visible on the sides of the collection (and therefore the space between items depends on the collection size).
#### Scale Animation (With cells scale animation while scrolling)
* Set the animation mode for collectionview flow layout
```
centerFlowLayout.animationMode = YZCenterFlowLayoutAnimation.scale(sideItemScale: 0.6, sideItemAlpha: 0.6, sideItemShift: 0.0)
```
* Set the rotation scale, alpha of collectionView as per your need
#### Rotation Animation (With cells rotation animation while scrolling)
* Set the animation mode for collectionview flow layout
```
centerFlowLayout.animationMode = YZCenterFlowLayoutAnimation.rotation(sideItemAngle: 45, sideItemAlpha: 0.6, sideItemShift: 0)
```
* Set the rotation angle, alpha of collectionView as per your need
#### Detect current indexPath or page while scrolling
* If you continue to track which current(center) indexPath then use scrollViewDidScroll delegate method. This method called on any offset changes.
```
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if let indexPath = centerFlowLayout.currentCenteredIndexPath {
print("Current IndexPath: \(indexPath)")
}
if let page = centerFlowLayout.currentCenteredPage {
print("Current Page: \(page)")
}
}
```
* After scrolling end with left or right then you can use the scrollViewDidEndDecelerating delegate method. This method called when scroll view grinds to a halt.
```
//
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if let indexPath = centerFlowLayout.currentCenteredIndexPath {
print("Current IndexPath: \(indexPath)")
}
if let page = centerFlowLayout.currentCenteredPage {
print("Current Page: \(page)")
}
}
```
#### Scroll to specifc index
`scrollToPage(atIndex index: Int, animated: Bool = true)` method use to scroll specific index.
```
centerFlowLayout.scrollToPage(atIndex: 2, animated: true)
```
## Author
**Sandeep Joshi** - https://github.com/yudiz-solutions