ChainPageCollectionView A custom View with two level chained collection views and fancy transition animation

Related tags

Animation swift ios animation collectionview collectionviewlayout
Overview

ChainPageCollectionView

A custom View with two level chained collection views and fancy transition animation.

Demo

Demo Demo

Requirements

  • iOS 9.0+
  • Xcode 8

Installation

CocoaPods

Update your Podfile to include the following:

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

1.0 "> 
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 if you need more help.

Usage

Basic Usage

import ChainPageCollectionView
  1. Create ChainPageCollectionView
// chainView is this view controller's property.
chainView = ChainPageCollectionView(viewType: .normal)
chainView.delegate = self
  1. Register cell for parentCollectionView and childCollectionView
chainView.parentCollectionView.register(#cellType, forCellWithReuseIdentifier:#cellIdentifier)
chainView.childCollectionView.register(#cellType, forCellWithReuseIdentifier:#cellIdentifier)
  1. Implement ChainPageCollectionViewProtocol
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
}
  1. Update child collection view data source when parent index has changed.
// 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.

public enum ChainPageChildAnimationType {
  case slideOutSlideIn
  case shrinkOutExpandIn
}

Default is slideOutSlideIn, you can set it via initialization stage.

let chainView = ChainPageCollectionView(viewType: .normal, 
                                        childAnimationType: #yourchoice)

Layout

You can customize the layout objects by passing them via ChainPageCollectionView's designated initializer.

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)

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 for details.

You might also like...
SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs.
SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs.

swiftui-animations SwiftUI Animations Library. Useful SwiftUI animations for your next project. YouTube Tutorials: https://www.youtube.com/nimbbble An

Amos Gyamfi 2.4k Jan 6, 2023
FloatingBubbles is a customizable views that float like zero gravity animation.
FloatingBubbles is a customizable views that float like zero gravity animation.

Floating Bubbles FloatingBubbles is a customizable views that float like zero gravity animation. $ pod try FloatingBubbles Features Create Multiple V

Chandan Sharda 18 Oct 11, 2022
An Objective-C animation library used to create floating image views.
An Objective-C animation library used to create floating image views.

JRMFloatingAnimation [![CI Status](http://img.shields.io/travis/Caroline Harrison/JRMFloatingAnimation.svg?style=flat)](https://travis-ci.org/Caroline

Caroline Harrison 233 Dec 28, 2022
Swiftui-animation-observer - Track SwiftUI animation progress and completion via callbacks
Swiftui-animation-observer - Track SwiftUI animation progress and completion via callbacks

SwiftUI Animation Observer Track SwiftUI animation progress and completion via c

Gordan Glavaš 9 Nov 5, 2022
Simple Interface Core Animation. Run type-safe animation sequencially or parallelly
Simple Interface Core Animation. Run type-safe animation sequencially or parallelly

Simple Interface Core Animation Sica can execute various animations sequentially or parallelly. Features Animation with duration and delay parallel /

CATS Open Source Softwares 1k Nov 10, 2022
SwiftUI-Text-Animation-Library - Text animation library for SwiftUI
SwiftUI-Text-Animation-Library - Text animation library for SwiftUI

⚠️ This repository is under construction. SwiftUI Text Animation Library Make yo

null 28 Jan 8, 2023
Inspired by Fabric - Answers animation. Allows to
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces

ADPuzzleAnimation Whats inside Custom animation for UIView inspired by Fabric - Answers animation. Easy to use To create your first animation you need

Anton 126 Dec 25, 2022
Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers
Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers

Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers. It's magic. Features Animate a

Robert-Hein Hooijmans 1.3k Nov 17, 2022
SwiftUI project demonstrating Custom coded confetti animation for checkout page
SwiftUI project demonstrating Custom coded confetti animation for checkout page

Confetti-Checkout SwiftUI project demonstrating Custom coded confetti animation for checkout page NOTE: CAEmitterLayer is not used but all the confett

Waseem akram 29 Sep 28, 2022
Comments
  • I want change scale center to left , but some problem.

    I want change scale center to left , but some problem.

    Simulator Screen Shot - iPhone 8 - 2019-07-13 at 11 03 58

    private func configureAttributes(for attributes: UICollectionViewLayoutAttributes) {
    guard let collection = collectionView else { return }
    var visibleRect = CGRect()
    visibleRect.origin = collection.contentOffset
    visibleRect.size = collection.bounds.size
    let collectionLeft =  itemSize.width / 2
    let offset = collection.contentOffset.x
    let normalizedLeft =  attributes.center.x  - offset

    let maxDistance =  self.itemSize.width
    let distance = min(abs(collectionLeft - normalizedLeft), maxDistance)
    let ratio = (maxDistance - distance)/maxDistance
    let scale = ratio * (1 - sideItemScale) + sideItemScale

    var t = CATransform3DIdentity
    t = CATransform3DScale(t,  scale, scale, 1.0)
    attributes.zIndex = Int(scale * 10)
    attributes.transform3D = t
    //  change item space,  

}
    opened by susuyan 0
  • scrolling to new index?

    scrolling to new index?

    hey, love the repo's promise! Basic scenario, looking at the demo: tap a smaller images and cause the larger images to scroll to match the tap'd index. I see an cool usage here for a larger ratio'd image above that shows more detail than a smaller version down below, similar to the iPhone camera app, but only better looking ;)

    Just looking to see if this is already part of the repo, the ability to animate a scroll to an image?

    opened by wdcurry 2
Owner
Yansong Li
iOS developer, Machine Learning Advocator
Yansong Li
GitHub
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022
Cool wave like transition between two or more UICollectionView

CKWaveCollectionViewTransition This is a cool custom transition between two or more UICollectionViewControllers with wave-like cell animation. Could b

Cezary Kopacz 1.9k Oct 4, 2022
ZoomTransitioning provides a custom transition with image zooming animation and swiping the screen edge.

ZoomTransitioning Overview ZoomTransitioning provides a custom transition with image zooming animation. When you use this library with UINavigationCon

WorldDownTown 673 Dec 27, 2022
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
A library for fancy iOS animations that you will definitely love.

EazelAnimationsKit Table of Contents Introduction Animations Usage Installation Contribution Authors Introduction The drive for developing this animat

Eazel 7 Dec 13, 2022
iOS framework for impressive transition animations between views.

CoreTransition iOS framework for impressive transition animations between views. Built using Swift, and supports a lot of animations to navigate to a

Ahmed Abdelkarim 4 Nov 17, 2022
Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

IBAnimatable 8.6k Jan 2, 2023
An experiment for using SwiftUI's custom timing Animation to create an orbital-like animation.

Orbital-SwiftUI-Animation An experiment for using SwiftUI's custom timing curve to create an orbital-like animation. How it looks: How it works: Apply

Mostafa Abdellateef 7 Jan 2, 2023
Transition animation for ViewController

XTransitionKit Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 9.0+ Swift 5

Leo 2 Dec 17, 2021
BWMCoverView is a very easy to use advertising the carousel view, supports circular scrolling functions such as switching, asynchronous loading of images, animation, custom is very high.

BWMCoverView BWMCoverView is a very easy to use advertising the carousel view, supports circular scrolling functions such as switching, asynchronous l

Bi Weiming 31 Mar 10, 2021