CPCollectionViewKit

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

CPCollectionViewKit

(★ 181)

Interesting UICollectionView layouts and transitions

CPCollectionViewKit Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# CPCollectionViewKit

[![Swift](https://img.shields.io/badge/Swift-5.10-orange.svg)](https://swift.org)
[![Platform](https://img.shields.io/badge/platform-iOS%2014%2B-blue.svg)](https://developer.apple.com/ios/)
[![CocoaPods](https://img.shields.io/badge/CocoaPods-1.0.0-red.svg)](https://cocoapods.org/pods/CPCollectionViewKit)
[![SPM](https://img.shields.io/badge/Swift%20Package%20Manager-compatible-brightgreen.svg)](https://swift.org/package-manager/)
[![License](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/ParsifalC/CPCollectionViewKit/master/LICENSE)

A collection of creative, highly customizable `UICollectionViewLayout` subclasses for iOS.

---

#### CollectionViewTransitionLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/README.md)
<table>
<tr>
<th>FlowAndStage</th>
<th>FlowAndTimeMachine</th>
<th>FlowAndCircle</th>
<th>StageAndTimeMachine</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionFlowAndStage.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionFlowAndTimeMachine.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionFlowAndCircle.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionStageAndTimeMachine.gif?raw=true"/></td>
</tr>
</table>

<table>
<tr>
<th>StageAndCircle</th>
<th>TimeMachineAndCircle</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionStageAndCircle.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTransitionDemo/TransitionTimeMachineAndCircle.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewTimeMachineLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/README.md)
<table>
<tr>
<th>Left</th>
<th>Right</th>
<th>Top</th>
<th>Bottom</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/TimeMachineLeft.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/TimeMachineRight.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/TimeMachineTop.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/TimeMachineBottom.gif?raw=true"/></td>
</tr>
<tr>
<th>Reversed</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewTimeMachineLayoutDemo/TimeMachineReversed.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewWheelLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/README.md)
<table>
<tr>
<th>LeftBottom</th>
<th>RightBottom</th>
<th>LeftTop</th>
<th>RightTop</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutLeftBottom.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutRightBottom.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutLeftTop.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutRightTop.gif?raw=true"/></td>
</tr>
<tr>
<th>LeftCenter</th>
<th>RightCenter</th>
<th>TopCenter</th>
<th>BottomCenter</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutLeftCenter.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutRightCenter.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutTopCenter.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewWheelLayoutSwiftDemo/WheelLayoutBottomCenter.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewCardLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/README.md)
<table>
<tr>
<th>Zoominout</th>
<th>Rotateinout</th>
<th>Waltz</th>
<th>VerticalRotation</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutZoominout.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutRotateinout.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutWaltz.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutVerticalRotation.gif?raw=true"/></td>
</tr>
<tr>
<th>Cylinder</th>
<th>Somersault</th>
<th>Delete</th>
<th>Insert</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutCylinder.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutSomersault.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutDelete.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCardLayoutDemo/CardLayoutInsert.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewStageLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewStageLayoutDemo/README.md)
<table>
<tr>
<th>Waltz</th>
<th>Somersault</th>
<th>Blend</th>
<th>FadeAway</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewStageLayoutDemo/StageLayoutWaltz.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewStageLayoutDemo/StageLayoutSomefault.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewStageLayoutDemo/StageLayoutBlend.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewStageLayoutDemo/StageLayoutFadeAway.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewCircleLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCircleLayoutDemo/README.md)
<table>
<tr>
<th>Circle</th>
<th>DeleteCustom</th>
<th>InsertCustom</th>
<th>InsertBase</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCircleLayoutDemo/CircleLayout.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCircleLayoutDemo/CircleLayoutDeleteCustom.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCircleLayoutDemo/CircleLayoutInsertCustom.gif?raw=true"/></td>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCircleLayoutDemo/CircleLayoutInsertBase.gif?raw=true"/></td>
</tr>
</table>

#### CollectionViewCaterpillarLayout — [Demo README](https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCaterpillarLayoutDemo/README.md)
<table>
<tr>
<th>Caterpillar</th>
</tr>
<tr>
<td><img src="https://github.com/ParsifalC/CPCollectionViewKit/blob/master/Demos/CPCollectionViewCaterpillarLayoutDemo/CaterpillarLayout.gif?raw=true"/></td>
</tr>
</table>

---

## Requirements

| Requirement | Minimum Version |
|---|---|
| iOS | 14.0 |
| Swift | 5.0 |
| Xcode | 13.0 |

> **Note:** All layouts currently support **section 0 only**.

---

## Installation

### Swift Package Manager (recommended)

Add the package to your `Package.swift` or via Xcode → **File → Add Package Dependencies**:

```
https://github.com/ParsifalC/CPCollectionViewKit
```

### CocoaPods

Add the following line to your `Podfile`:

```ruby
pod 'CPCollectionViewKit', '~> 1.0'
```

Then run:

```bash
pod install
```

---

## Running the Demo Projects

Clone the repo, then from the desired demo directory run:

```bash
# Install bundler dependencies (CocoaPods 1.15)
cd /path/to/CPCollectionViewKit
bundle install

# Install pod dependencies for a specific demo
cd Demos/CPCollectionViewCardLayoutDemo
bundle exec pod install

# Open the workspace
open CPCollectionViewCardLayoutDemo.xcworkspace
```

---

## Migration Guide (from 0.x)

The following API names have been corrected in v1.0.0. Deprecated aliases remain available
and will emit a compile-time warning guiding you to the new names:

| Old Name | New Name |
|---|---|
| `CardScrollDiretion` | `CardScrollDirection` |
| `MoveAnimationStyle.somefault` | `MoveAnimationStyle.somersault` |
| `WheelLayoutConfiguration.contentHeigthPadding` | `WheelLayoutConfiguration.contentHeightPadding` |

---

## TODO

- [ ] Usage documentation & code snippets
- [ ] Support `CollectionViewCaterpillarLayout` direction settings
- [ ] Unit Tests
- [x] Layout Transition
- [x] More Delete/Insert Animations
- [x] Swift Package Manager support
- [x] Fix deprecated API usage
- [x] Fix `layoutAttributesForElements` return bug in `CollectionViewTransitionLayout`

---

## Author

Parsifal, zmw@izmw.me

## License

CPCollectionViewKit is available under the MIT license. See the [LICENSE](LICENSE) file for more info.

CPCollectionViewKit

CPCollectionViewKit Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

CPCollectionViewKit

CPCollectionViewKit Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README