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 최신버젼 다운로드

최종 버전 다운로드 (.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 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

CPCollectionViewKit

CPCollectionViewKit 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README