https://github.com/jindulys/ChainPageCollectionView
A custom View with fancy collectionView animation
https://github.com/jindulys/ChainPageCollectionView
animation collectionview collectionviewlayout ios swift
Last synced: 20 days ago
JSON representation
A custom View with fancy collectionView animation
- Host: GitHub
- URL: https://github.com/jindulys/ChainPageCollectionView
- Owner: jindulys
- License: mit
- Created: 2017-07-21T04:55:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-17T23:49:26.000Z (about 7 years ago)
- Last Synced: 2025-03-15T01:17:04.325Z (about 1 month ago)
- Topics: animation, collectionview, collectionviewlayout, ios, swift
- Language: Swift
- Size: 109 MB
- Stars: 792
- Watchers: 16
- Forks: 58
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-swift - ChainPageCollectionView - Fancy two-level collection view layout and animation. (Libs / Animation)
- awesome-swift - ChainPageCollectionView - Fancy two-level collection view layout and animation. (Libs / Animation)
- awesome-swift - ChainPageCollectionView - A custom View with fancy collectionView animation ` 📝 3 years ago ` (Animation [🔝](#readme))
- awesome-swift - ChainPageCollectionView - Fancy two-level collection view layout and animation. (Libs / Animation)
README
# ChainPageCollectionView
A custom View with two level chained collection views and fancy transition animation.
## Demo
## Requirements
- iOS 9.0+
- Xcode 8
## Installation
### CocoaPods
Update your Podfile to include the following:
```ruby
pod 'ChainPageCollectionView', '~> 1.0'
```
Run `pod install`.
NOTE: If you can not find the pod target. Please follow: https://stackoverflow.com/questions/31065447/no-such-module-when-i-use-cocoapods to build your pod target.
### Carthage
To integrate `ChainPageCollectionView` with `Carthage`, specify it in your `Cartfile`
```
github "jindulys/ChainPageCollectionView" ~> 1.0
```
Then, run the following command to build `ChainPageCollectionView` framework
```
$ carthage update
```
At last, you need to set up your Xcode project manually to add `ChainPageCollectionView` framework.
On your application targets’ `General` settings tab, in the `Linked Frameworks and Libraries` section, drag and drop each framework you want to use from the `Carthage/Build` folder on disk.
On your application targets’ `Build Phases` settings tab, click the `+` icon and choose `New Run Script Phase`. Create a Run Script with the following content:
```
/usr/local/bin/carthage copy-frameworks
```
and add the paths to the frameworks you want to use under `Input Files`:
```
$(SRCROOT)/Carthage/Build/iOS/ChainPageCollectionView.framework
```
Check [Carthage](https://github.com/Carthage/Carthage) if you need more help.
## Usage
### Basic Usage
```swift
import ChainPageCollectionView
```
1. Create ChainPageCollectionView
```swift
// chainView is this view controller's property.
chainView = ChainPageCollectionView(viewType: .normal)
chainView.delegate = self
```
2. Register cell for `parentCollectionView` and `childCollectionView`
```swift
chainView.parentCollectionView.register(#cellType, forCellWithReuseIdentifier:#cellIdentifier)
chainView.childCollectionView.register(#cellType, forCellWithReuseIdentifier:#cellIdentifier)
```
3. Implement `ChainPageCollectionViewProtocol`
```swift
func parentCollectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// return your parent data source count.
}
func parenCollectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// Dequeue and configure your parent collectionview cell
}
func childCollectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// return your child data source count.
}
func childCollectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// Dequeue and configure your child collectionview cell
}
```
4. Update child collection view data source when parent index has changed.
```swift
// You will get notified by following protocol method.
func childCollectionView(_ collectionView: UICollectionView, parentCollectionViewIndex: Int) {
// When parent collection view's scroll stops, this will get called with new parent collectionview's index.
// You can use this message to fetch related child collection view's new data.
// Once you have the latest child collection view's data, set `childCollectionViewDataReady` to `true`.
// NOTE: This is important to be set, otherwise your child collection view propably will not show up again.
chainView.childCollectionViewDataReady = true
}
```
### Customization
#### Child Collection View Animation Type
For now `ChainPageCollectionView` support two types of child collection view transition animation.
```swift
public enum ChainPageChildAnimationType {
case slideOutSlideIn
case shrinkOutExpandIn
}
```
Default is `slideOutSlideIn`, you can set it via initialization stage.
```swift
let chainView = ChainPageCollectionView(viewType: .normal,
childAnimationType: #yourchoice)
```
#### Layout
You can customize the layout objects by passing them via `ChainPageCollectionView`'s designated initializer.
```swift
let chainView = ChainPageCollectionView(viewType: .normal,
parentColectionViewLayout: #yourlayout,
childCollectionViewLayout: #yourlayout)
```
#### ItemSize
You can use `parentCollectionViewItemSize` and `childCollectionViewItemSize` to set related layouts' itemSize.
#### Screen Ratio
The default behaviour of this view is that parent collection view takes `3/4` height of this view and child collection view takes the rest. You can set `viewType` to a customized ratio with type `customParentHeight(#SomeInt, #SomeInt)`
```swift
let chainView = ChainPageCollectionView(viewType: .customParentHeight(28, 12))
```
## Author
Yansong Li ( [email protected] ), wechat: `jindulys_uw`
## License
Expanding collection is released under the MIT license.
See [LICENSE](./LICENSE) for details.