项目作者: fahidattique55

项目描述 :
Collection view pagination layout
高级语言: Swift
项目地址: git://github.com/fahidattique55/FAPaginationLayout.git
创建时间: 2017-06-13T21:38:44Z
项目社区:https://github.com/fahidattique55/FAPaginationLayout

开源协议:MIT License

下载


Alt text





Swift version
Support Dependecy Manager
Version
License
Platform
CocoaPods
CocoaPods

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:

  1. $ gem install cocoapods

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

  1. source 'https://github.com/CocoaPods/Specs.git'
  2. platform :ios, '9.0'
  3. use_frameworks!
  4. target '<Your Target Name>' do
  5. pod 'FAPaginationLayout'
  6. end

Then, run the following command:

  1. $ 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,
  1. override func viewWillLayoutSubviews() {
  2. super.viewWillLayoutSubviews()
  3. updateCellsLayout()
  4. }
  5. func updateCellsLayout() {
  6. let centerX = collectionView.contentOffset.x + (collectionView.frame.size.width)/2
  7. for cell in collectionView.visibleCells {
  8. var offsetX = centerX - cell.center.x
  9. if offsetX < 0 {
  10. offsetX *= -1
  11. }
  12. cell.transform = CGAffineTransform.identity
  13. let offsetPercentage = offsetX / (view.bounds.width * 2.7)
  14. let scaleX = 1-offsetPercentage
  15. cell.transform = CGAffineTransform(scaleX: scaleX, y: scaleX)
  16. }
  17. }
  18. func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
  19. var cellSize: CGSize = collectionView.bounds.size
  20. cellSize.width -= collectionView.contentInset.left * 2
  21. cellSize.width -= collectionView.contentInset.right * 2
  22. cellSize.height = cellSize.width
  23. return cellSize
  24. }
  25. func scrollViewDidScroll(_ scrollView: UIScrollView) {
  26. updateCellsLayout()
  27. }

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,
  1. override func viewWillLayoutSubviews() {
  2. super.viewWillLayoutSubviews()
  3. updateCellsLayout()
  4. }
  5. func updateCellsLayout() {
  6. let centerX = collectionView.contentOffset.x + (collectionView.frame.size.width)/2
  7. for cell in collectionView.visibleCells {
  8. var offsetX = centerX - cell.center.x
  9. if offsetX < 0 {
  10. offsetX *= -1
  11. }
  12. if offsetX > 0 {
  13. let offsetPercentage = offsetX / view.bounds.width
  14. let rotation = 1 - offsetPercentage
  15. cell.transform = CGAffineTransform(rotationAngle: rotation - 45)
  16. }
  17. }
  18. }
  19. func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
  20. var cellSize: CGSize = collectionView.bounds.size
  21. cellSize.width -= collectionView.contentInset.left * 2
  22. cellSize.width -= collectionView.contentInset.right * 2
  23. cellSize.height = cellSize.width
  24. return cellSize
  25. }
  26. func scrollViewDidScroll(_ scrollView: UIScrollView) {
  27. updateCellsLayout()
  28. }

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.
  1. func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
  2. var cellSize: CGSize = collectionView.bounds.size
  3. cellSize.width -= collectionView.contentInset.left
  4. cellSize.width -= collectionView.contentInset.right
  5. return cellSize
  6. }
  • Now run the Xcode project and enjoy!

License

This project is licensed under the MIT License.

Author

Fahid Attique - https://github.com/fahidattique55

Contributors

Evyasafmordechai - https://github.com/Evyasafmordechai
orlandoamorim - https://github.com/orlandoamorim