Latest 0.0.4
Homepage https://github.com/fahidattique55/FAPaginationLayout
License MIT
Platforms ios 9.0
Authors

Alt text


Swift version
Support Dependecy Manager
Version
License
Platform

Features

  • Animate cell size while scrolling
  • Rotate cell while scrolling
  • Adds pagination in your collection view
  • Show users that collection has more cells or data
  • Customizeable with collection view’s content insets
  • Easy to integrate and use

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

To integrate FAPaginationLayout into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!

target '<Your Target Name>' do
pod 'FAPaginationLayout'
end

Then, run the following command:

$ pod install

Usage

Step 1

  • Set the collection view flow layout as FAPaginationLayout as given below,

Alt text

Step 2 (With cells size animation while scrolling)

  • Set the contentInsets of collection view,

collectionView.contentInset = UIEdgeInsetsMake(0, 30, 0, 30)

  • Set the collectionView’s item size according to collectionView’s content insets and scale/animate it accordingly,

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    updateCellsLayout()
}

func updateCellsLayout()  {

    let centerX = collectionView.contentOffset.x + (collectionView.frame.size.width)/2

    for cell in collectionView.visibleCells {

        var offsetX = centerX - cell.center.x
        if offsetX < 0 {
            offsetX *= -1
        }

        cell.transform = CGAffineTransform.identity
        if offsetX > 50 {

            let offsetPercentage = (offsetX - 50) / view.bounds.width
            var scaleX = 1-offsetPercentage
            if scaleX < 0.8 {
                scaleX = 0.8
            }
            cell.transform = CGAffineTransform(scaleX: scaleX, y: scaleX)
        }
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    var cellSize: CGSize = collectionView.bounds.size

    cellSize.width -= collectionView.contentInset.left * 2
    cellSize.width -= collectionView.contentInset.right * 2
    cellSize.height = cellSize.width

    return cellSize
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    updateCellsLayout()
}

Step 2 (With cells rotation animation while scrolling)


  • Set the contentInsets of collection view,

collectionView.contentInset = UIEdgeInsetsMake(0, 30, 0, 30)

  • Set the collectionView’s item size according to collectionView’s content insets and scale/animate it accordingly,

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    updateCellsLayout()
}

func updateCellsLayout()  {

    let centerX = collectionView.contentOffset.x + (collectionView.frame.size.width)/2

    for cell in collectionView.visibleCells {

        var offsetX = centerX - cell.center.x
        if offsetX < 0 {
            offsetX *= -1
        }

        if offsetX > 0 {

            let offsetPercentage = offsetX / view.bounds.width
            let rotation = 1 - offsetPercentage
            cell.transform = CGAffineTransform(rotationAngle: rotation - 45)
        }
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    var cellSize: CGSize = collectionView.bounds.size

    cellSize.width -= collectionView.contentInset.left * 2
    cellSize.width -= collectionView.contentInset.right * 2
    cellSize.height = cellSize.width

    return cellSize
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    updateCellsLayout()
}

Step 2 (Without cell size animation)


  • Set the content insets of collectionView as per your need

collectionView.contentInset = UIEdgeInsetsMake(0, 20, 0, 20)

  • Set the collectionView’s item size according to collectionView’s content insets.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    var cellSize: CGSize = collectionView.bounds.size
    cellSize.width -= collectionView.contentInset.left
    cellSize.width -= collectionView.contentInset.right

    return cellSize
}
  • Now run the Xcode project and enjoy!

License

This project is licensed under the MIT License.

Author

Fahid Attiquehttps://github.com/fahidattique55

Latest podspec

{
    "name": "FAPaginationLayout",
    "version": "0.0.4",
    "summary": "Custom pagination layout for collection view.",
    "description": "Custom layout for collection view to add pagination.",
    "homepage": "https://github.com/fahidattique55/FAPaginationLayout",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Fahid Attique": "[email protected]"
    },
    "source": {
        "git": "https://github.com/fahidattique55/FAPaginationLayout.git",
        "tag": "0.0.4"
    },
    "platforms": {
        "ios": "9.0"
    },
    "source_files": "FAPaginationLayout/Source/**/*.{swift}",
    "pushed_with_swift_version": "3.0"
}

Pin It on Pinterest

Share This