CPCollectionViewKit - GitLite

KO | EN

gitlite — search

#javascript #react #ai #golang #go #machine-learning #rust #deep-learning #linux #nodejs #java #cli #awesome-list #open-source

CPCollectionViewKit

(★ 181)

Interesting UICollectionView layouts and transitions

파일 탐색기

최종 버전 다운로드 (.zip)

- CollectionViewCardLayout.swift
- CollectionViewCaterpillarLayout.swift
- CollectionViewCircleLayout.swift
- CollectionViewLayout.swift
- CollectionViewStageLayout.swift
- CollectionViewTimeMachineLayout.swift
- CollectionViewTransitionLayout.swift
- CollectionViewTransitionManager.swift
- CollectionViewWheelLayout.swift
- CPCollectionViewKit.h
- Info.plist
- LayoutConfiguration.swift
- - contents.xcworkspacedata
- project.pbxproj
- - CardLayoutCylinder.gif
  - CardLayoutDelete.gif
  - CardLayoutInsert.gif
  - CardLayoutRotateinout.gif
  - CardLayoutSomersault.gif
  - CardLayoutVerticalRotation.gif
  - CardLayoutWaltz.gif
  - CardLayoutZoominout.gif
  - Podfile
  - Podfile.lock
  - README.md
- - CaterpillarLayout.gif
  - Podfile
  - Podfile.lock
  - README.md
- - CircleLayout.gif
  - CircleLayoutDeleteCustom.gif
  - CircleLayoutInsertBase.gif
  - CircleLayoutInsertCustom.gif
  - Podfile
  - Podfile.lock
  - README.md
- - Podfile
  - Podfile.lock
  - README.md
  - StageLayoutBlend.gif
  - StageLayoutFadeAway.gif
  - StageLayoutSomefault.gif
  - StageLayoutWaltz.gif
- - Podfile
  - Podfile.lock
  - README.md
  - TimeMachineBottom.gif
  - TimeMachineLeft.gif
  - TimeMachineReversed.gif
  - TimeMachineRight.gif
  - TimeMachineTop.gif
- - Podfile
  - Podfile.lock
  - README.md
  - TransitionFlowAndCircle.gif
  - TransitionFlowAndStage.gif
  - TransitionFlowAndTimeMachine.gif
  - TransitionStageAndCircle.gif
  - TransitionStageAndTimeMachine.gif
  - TransitionTimeMachineAndCircle.gif
- - LICENSE
  - Podfile
  - Podfile.lock
  - README.md
  - WheelLayoutBottomCenter.gif
  - WheelLayoutLeftBottom.gif
  - WheelLayoutLeftCenter.gif
  - WheelLayoutLeftTop.gif
  - WheelLayoutRightBottom.gif
  - WheelLayoutRightCenter.gif
  - WheelLayoutRightTop.gif
  - WheelLayoutTopCenter.gif
.gitignore
.swift-version
CPCollectionViewKit.podspec
Gemfile
Gemfile.lock
LICENSE
Package.swift
README.md

// 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.