FSPagerView is an elegant Screen Slide Library implemented primarily with UICollectionView.

Last update: Jun 28, 2022

fspagerview

Languages
Platform Version Carthage compatible SPM compatible

SWIFT OBJECTIVE-C

FSPagerView is an elegant Screen Slide Library implemented primarily with UICollectionView. It is extremely helpful for making Banner、Product Show、Welcome/Guide Pages、Screen/ViewController Sliders.

Features

  • Infinite scrolling.
  • Automatic Sliding.
  • Horizontal and Vertical paging.
  • Fully customizable item, with predefined banner-style item.
  • Fully customizable page control.
  • Rich build-in 3D transformers.
  • Simple and Delightful api usage.
  • Support SWIFT and OBJECTIVE-C.

Demos

Demo1 - Banner

Banner
9

automaticSlidingInterval

The time interval of automatic sliding. 0 means disabling automatic sliding. Default is 0.

e.g.

pagerView.automaticSlidingInterval = 3.0

isInfinite

A boolean value indicates whether the pager view has infinite number of items. Default is false.

e.g.

pagerView.isInfinite = true

decelerationDistance

An unsigned integer value that determines the paging distance of the pager view, which indicates the number of passing items during the deceleration. When the value of this property is FSPagerView.automaticDistance, the actual 'distance' is automatically calculated according to the scrolling speed of the pager view. Default is 1.

e.g.

pagerView.decelerationDistance = 2

itemSize

The item size of the pager view. When the value of this property is FSPagerView.automaticSize, the items fill the entire visible area of the pager view. Default is FSPagerView.automaticSize.

e.g.

pagerView.itemSize = CGSize(width: 200, height: 180)

interitemSpacing

The spacing to use between items in the pager view. Default is 0.

e.g.

pagerView.interitemSpacing = 10

Demo2 - Transformers

Cross Fading
1
pagerView.transformer = FSPagerViewTransformer(type: .crossFading)

Zoom Out
2
pagerView.transformer = FSPagerViewTransformer(type: .zoomOut)

Depth
3
pagerView.transformer = FSPagerViewTransformer(type: .depth)

Linear
4
pagerView.transformer = FSPagerViewTransformer(type: .linear)

Overlap
5
pagerView.transformer = FSPagerViewTransformer(type: .overlap)

Ferris Wheel
6
pagerView.transformer = FSPagerViewTransformer(type: .ferrisWheel)

Inverted Ferris Wheel
7
pagerView.transformer = FSPagerViewTransformer(type: .invertedFerrisWheel)

Cover Flow
8
pagerView.transformer = FSPagerViewTransformer(type: .coverFlow)

Cubic
9
pagerView.transformer = FSPagerViewTransformer(type: .cubic)

Customize your own transformer by subclassingFSPagerViewTransformer.

Demo3 Page Control

Page Control
10

|

numberOfPages

The number of page indicators of the page control. Default is 0.

e.g.

pageControl.numberOfPages = 5

currentPage

The current page, highlighted by the page control. Default is 0.

e.g.

pageControl.currentPage = 1

contentHorizontalAlignment

The horizontal alignment of content within the control’s bounds. Default is center.

e.g.

pageControl.contentHorizontalAlignment = .right

setStrokeColor:forState:

Sets the stroke color for page indicators to use for the specified state. (selected/normal).

e.g.

pageControl.setStrokeColor(.green, for: .normal)
pageControl.setStrokeColor(.yellow, for: .selected)

setFillColor:forState:

Sets the fill color for page indicators to use for the specified state. (selected/normal).

e.g.

pageControl.setFillColor(.gray, for: .normal)
pageControl.setFillColor(.white, for: .selected)

setImage:forState:

Sets the image for page indicators to use for the specified state. (selected/normal).

e.g.

pageControl.setImage(UIImage(named:"image1"), for: .normal)
pageControl.setImage(UIImage(named:"image2"), for: .selected)

setPath:forState:

Sets the path for page indicators to use for the specified state. (selected/normal).

e.g.

pageControl.setPath(UIBezierPath(rect: CGRect(x: 0, y: 0, width: 8, height: 8)), for: .normal)
pageControl.setPath(UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 8, height: 8)), for: .selected)

Installation

  • Manually
  • Cocoapods
  • Carthage

Manually

  1. Download the source code.
  2. Extract the zip file, simply drag folder Sources into your project.
  3. Make sure Copy items if needed is checked.

Cocoapods

use_frameworks!
target '
   
    '
    do
    pod 'FSPagerView'
end

Carthage

github "WenchaoD/FSPagerView"

Tutorial

1. Getting started

  • Getting started with code
// Create a pager view
let pagerView = FSPagerView(frame: frame1)
pagerView.dataSource = self
pagerView.delegate = self
pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
self.view.addSubview(pagerView)
// Create a page control
let pageControl = FSPageControl(frame: frame2)
self.view.addSubview(pageControl)
  • Getting started with Interface Builder
    1、Simply drag UIView instance into your View Controller, Change the Custom Class to FSPagerView. (Or FSPageControl)
    2、Link the dataSource and delegate property of FSPagerView to your View Controller.
    3、Register a cell class.
@IBOutlet weak var pagerView: FSPagerView! {
    didSet {
        self.pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
    }
}

2. Implement FSPagerViewDataSource

public func numberOfItems(in pagerView: FSPagerView) -> Int {
    return numberOfItems
}
    
public func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
    let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
    cell.imageView?.image = ...
    cell.textLabel?.text = ...
    return cell
}

3. Implement FSPagerViewDelegate

func pagerView(_ pagerView: FSPagerView, shouldHighlightItemAt index: Int) -> Bool

Asks the delegate if the item should be highlighted during tracking.


func pagerView(_ pagerView: FSPagerView, didHighlightItemAt index: Int)

Tells the delegate that the item at the specified index was highlighted.


func pagerView(_ pagerView: FSPagerView, shouldSelectItemAt index: Int) -> Bool

Asks the delegate if the specified item should be selected.


func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int)

Tells the delegate that the item at the specified index was selected.


func pagerView(_ pagerView: FSPagerView, willDisplay cell: FSPagerViewCell, forItemAt index: Int)

Tells the delegate that the specified cell is about to be displayed in the pager view.


func pagerView(_ pagerView: FSPagerView, didEndDisplaying cell: FSPagerViewCell, forItemAt index: Int)

Tells the delegate that the specified cell was removed from the pager view.


func pagerViewWillBeginDragging(_ pagerView: FSPagerView)

Tells the delegate when the pager view is about to start scrolling the content.


func pagerViewWillEndDragging(_ pagerView: FSPagerView, targetIndex: Int)

Tells the delegate when the user finishes scrolling the content.


func pagerViewDidScroll(_ pagerView: FSPagerView)

Tells the delegate when the user scrolls the content view within the receiver.


func pagerViewDidEndScrollAnimation(_ pagerView: FSPagerView)

Tells the delegate when a scrolling animation in the pager view concludes.


func pagerViewDidEndDecelerating(_ pagerView: FSPagerView)

Tells the delegate that the pager view has ended decelerating the scrolling movement.


Support this repo

  • Star this repo star

  • Buy me a Coffee. ☕️

      |     |  


Author


Documentation

GitHub

https://github.com/WenchaoD/FSPagerView
Comments
  • 1. Is there any way to customize or disable `selectionColor` when a cell is selected?

    Hello WenchaoD.

    Like a title, I am looking for a way to customize or disable selectionColor on FSPagerViewCell. Actually, I don't want a visual effect for highlighting like changing backgroundColor. Until now, I could find any way to achieve that.

    Is there any interface or method to do that? Or should I fork this repo and modify a source code?

    Reviewed by fullc0de at 2018-03-09 05:50
  • 2. Enhancement request: Limit scroll to 1 index at a time

    I didn't see this in the Readme, if a user swipes the screen quickly, it can scroll multiple indexes. Is it possible to make it only scroll 1 index at a time, please?

    Reviewed by saldous at 2017-03-04 23:16
  • 3. Xcode 9 with iOS 11 target in iMessage template leads to the following crashing issue, when view FSPage view is called.

    Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<UIView 0x103f1ad50> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key dataSource.

    Reviewed by sumeshd at 2017-09-26 13:38
  • 4. PagerView changing frame size dynamically

    Hi! Thank you very much for this awesome framework! But I want to have different sizes images in my PagerView, is it possible? I have CollectionViewController and there I implemented this moment (each image in array calculated sizes and sent them to collectionView), but here I can't get the view with custom size for each image... I think that one way to get it this is make images aspectFill, but I want to get more quality images in my app...

    TNX

    Reviewed by st-small at 2017-02-22 16:44
  • 5. Use custom cell in Objective-c

    I can't inherit swift class to objective c class then there is no way to use custom cell from this awesome control, Any way to make it possible please ?

    Reviewed by fadizant at 2018-07-14 16:01
  • 6. Storyboard error

    this error started to happen after installing this module with pod.

    IB Designables: Failed to render and update auto layout status for myController (fLq-9I-Zau): dlopen(FSPagerView.framework, 1): no suitable image found.  Did find:
      FSPagerView.framework: required code signature missing for 'FSPagerView.framework'
    

    and causes rendering problems in the storyboard.

    Example:

    captura de pantalla 2018-05-22 a la s 3 48 42 p m

    Uninstalling this module fix the problem.

    Xcode 9.2 Swift 4

    Reviewed by jose920405 at 2018-05-22 20:51
  • 7. Initial index

    There seems no possibility to set an initial index for the current item right in setting up the pager view. So it's not possible to start the pager view at a specific position rather than always with the first item.

    The FSPagerView provides a function scrollToItem(at index: Int, animated: Bool) to scroll to a specific item. So after setting up the pager view and registering some cells I want to scroll without animation to a specific index (before the first frame has rendered), but I get an exception, that the index is out of bounds of the number of items the collection view has. That's because the numberOfItems is still 0 because the layout of the collection view hasn't yet evaluated its data source methods.

    So the FSPagerView should either have a property like initialIndex or scrollToItem(at:animated:) should handle the scrolling to the index right after the collection view layout has been prepared if called before.

    As a current workaround I can call scrollToItem(at:animated:) via GCD with zero delay in the next frame, so only one frame the wrong item will be shown.

    Reviewed by indieSoftware at 2017-09-19 08:39
  • 8. Long Press

    Is there a way to capture a long press. Have a BadgeSwift on top of the image that needs to be changed if the user long presses and then makes a selection from a popup.

    Reviewed by justdan0227 at 2018-07-23 21:13
  • 9. How to disable Manual Scrolling

    I'd like to disable manual scrolling during certain times, but leave items inside the cell clickable.

    This means I can't do userInteractionEnabled = false on the whole pagerview, because it'll block my cell interactions.

    Thanks

    Reviewed by rfgallagher1 at 2018-02-15 18:43
  • 10. Crash issue after update project to Xcode9 GM Swift 4.0

    Hi there,

    When I update my project from Xcode8 swift 3.0 to Xcode9 GM Swift 4.0, there is a new issue make app crash when launch.

    crash Info: Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<XX.FSPagerView 0x7fa56ad21e00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key dataSource.'

    and the source code i change IN FSPagerView.swift open internal(set) dynamic var currentIndex: Int = 0 to @objc open internal(set) dynamic var currentIndex: Int = 0

    let scrollOffset = Double(contentOffset.divided(by: self.collectionViewLayout.itemSpacing)) to let scrollOffset = Double(contentOffset / self.collectionViewLayout.itemSpacing)

    IN FSPageControl.swift add case .leading: return 0 case .trailing: let contentWidth = diameter*CGFloat(self.numberOfPages) + CGFloat(self.numberOfPages-1)*spacing return contentView.frame.width - contentWidth } to open override func layoutSublayers(of layer: CALayer){}

    Thanks

    Reviewed by csmarku at 2017-09-14 17:25
  • 11. Custom Cell ?

    is there any way we can use custom cell instead of "FSPagerViewCell" ?

    I created custom class "slideCell" and inherited it from "FSPagerViewCell" but its not working

    class SliderCell: FSPagerViewCell { }

    Reviewed by bilawal-liaqat at 2017-05-22 13:43
  • 12. willDisplay cell: FSPagerViewCell, forItemAt index

    pagerView(_:willDisplay:forItemAt:) This function is called 2 time

    Expected a index, not two indexes, When the transformer is crossFading

        lazy var pagerView: FSPagerView = {
            let view = FSPagerView(frame: .zero)
            view.dataSource = self
            view.delegate = self
            view.register(ExploreBannerCell.self, forCellWithReuseIdentifier: ExploreBannerCell.defaultReuseIdentifier)
            view.isInfinite = true
            view.bounces = false
            view.automaticSlidingInterval = 3
            view.interitemSpacing = 0
            view.transformer = FSPagerViewTransformer(type: .crossFading)
            view.tg_width.equal(.fill)
            view.tg_height.equal(.fill)
            return view
        }()
    
    
    
    
    
    
    
        func pagerViewDidEndDecelerating(_ pagerView: FSPagerView) {
            logDebug("\(#function ) index: \(pagerView.currentIndex)")
        }
    
    
        func pagerView(_ pagerView: FSPagerView, willDisplay cell: FSPagerViewCell, forItemAt index: Int) {
            logDebug("\(#function ) index: \(index)")
        }
    
        
        func pagerView(_ pagerView: FSPagerView, didEndDisplaying cell: FSPagerViewCell, forItemAt index: Int) {
            logDebug("\(#function ) index: \(index)")
        }
    
    
    2022-06-20 16:00:02.910161+0800 MetaRent[41044:7781035] pagerView(_:willDisplay:forItemAt:) index: 2
    2022-06-20 16:00:02.911786+0800 MetaRent[41044:7781016] pagerView(_:willDisplay:forItemAt:) index: 3
    2022-06-20 16:00:05.909641+0800 MetaRent[41044:7781030] pagerView(_:didEndDisplaying:forItemAt:) index: 0
    2022-06-20 16:00:05.910420+0800 MetaRent[41044:7781035] pagerView(_:didEndDisplaying:forItemAt:) index: 4
    2022-06-20 16:00:08.909986+0800 MetaRent[41044:7781030] pagerView(_:willDisplay:forItemAt:) index: 4
    2022-06-20 16:00:08.910604+0800 MetaRent[41044:7781016] pagerView(_:willDisplay:forItemAt:) index: 0
    2022-06-20 16:00:11.910524+0800 MetaRent[41044:7781035] pagerView(_:didEndDisplaying:forItemAt:) index: 1
    2022-06-20 16:00:11.911241+0800 MetaRent[41044:7781016] pagerView(_:didEndDisplaying:forItemAt:) index: 2
    2022-06-20 16:00:14.912001+0800 MetaRent[41044:7781016] pagerView(_:willDisplay:forItemAt:) index: 1
    2022-06-20 16:00:14.913418+0800 MetaRent[41044:7781030] pagerView(_:willDisplay:forItemAt:) index: 2
    2022-06-20 16:00:17.910743+0800 MetaRent[41044:7781035] pagerView(_:didEndDisplaying:forItemAt:) index: 3
    2022-06-20 16:00:17.911274+0800 MetaRent[41044:7781016] pagerView(_:didEndDisplaying:forItemAt:) index: 4
    2022-06-20 16:00:20.894267+0800 MetaRent[41044:7781016] pagerView(_:willDisplay:forItemAt:) index: 3
    2022-06-20 16:00:20.894750+0800 MetaRent[41044:7781030] pagerView(_:willDisplay:forItemAt:) index: 4
    2022-06-20 16:00:23.894119+0800 MetaRent[41044:7781030] pagerView(_:didEndDisplaying:forItemAt:) index: 0
    2022-06-20 16:00:23.894442+0800 MetaRent[41044:7781016] pagerView(_:didEndDisplaying:forItemAt:) index: 1
    2022-06-20 16:00:26.897322+0800 MetaRent[41044:7781016] pagerView(_:willDisplay:forItemAt:) index: 0
    2022-06-20 16:00:26.898987+0800 MetaRent[41044:7781035] pagerView(_:willDisplay:forItemAt:) index: 1
    2022-06-20 16:00:29.896391+0800 MetaRent[41044:7781030] pagerView(_:didEndDisplaying:forItemAt:) index: 2
    2022-06-20 16:00:29.896993+0800 MetaRent[41044:7781035] pagerView(_:didEndDisplaying:forItemAt:) index: 3
    2022-06-20 16:00:32.897715+0800 MetaRent[41044:7781030] pagerView(_:willDisplay:forItemAt:) index: 2
    2022-06-20 16:00:32.899324+0800 MetaRent[41044:7781033] pagerView(_:willDisplay:forItemAt:) index: 3
    2022-06-20 16:00:35.896129+0800 MetaRent[41044:7781030] pagerView(_:didEndDisplaying:forItemAt:) index: 4
    2022-06-20 16:00:35.896380+0800 MetaRent[41044:7781033] pagerView(_:didEndDisplaying:forItemAt:) index: 0
    
    
    
    Reviewed by rgmyyw at 2022-06-20 08:05
  • 13. willDisplay and didEndDisplaying's index are correct?

        func pagerView(_ pagerView: FSPagerView, willDisplay cell: FSPagerViewCell, forItemAt index: Int) {
    
        }
    
        func pagerView(_ pagerView: FSPagerView, didEndDisplaying cell: FSPagerViewCell, forItemAt index: Int) {
    
        }
    
    Reviewed by sugitatestblue at 2022-06-20 02:01
  • 14. All cell transformation to default at first in Linear mode

    Hello, i have tried to achieve like on the first run all cell transformation should be normal and on the first scroll un focused cells should be in less size.

    TIA

    Reviewed by SohaibSdq at 2022-04-27 12:00
  • 15. `*.{h,m}` should be excluded for Swift project

    FSPagerViewObjcCompat.h/m are used for compatible with ObjC. Consider splitting this into two separate subspecs: one for Swift(default spec with FSPagerViewObjcCompat.h excluded) and another for ObjC?

    Reviewed by tomisacat at 2022-04-13 07:36
Custom segue for OSX Storyboards with slide and cross fade effects (NSViewControllerTransitionOptions)
Custom segue for OSX Storyboards with slide and cross fade effects (NSViewControllerTransitionOptions)

CustomSegue Custom segue for OSX Storyboards. Slide and cross fade effects, new customized window. class MyViewController: NSViewController { overr

May 21, 2022
💻This is an open source project of the Windows 11 desktop client implemented using SwiftUI.
 💻This is an open source project of the Windows 11 desktop client implemented using SwiftUI.

?? ??This is an open source project of the Windows 11 desktop client implemented using SwiftUI.

Jun 22, 2022
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Jun 25, 2022
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Features • Guides • Installation • Usage • Miscellaneous • Contributing ?? README is available in other languages: ???? . ???? . ???? . ???? . ???? To

Jun 22, 2022
🚀 Elegant Pager View fully written in pure SwiftUI.
🚀  Elegant Pager View fully written in pure SwiftUI.

PagerTabStripView Made with ❤️ by Xmartlabs team. XLPagerTabStrip for SwiftUI! Introduction PagerTabStripView is the first pager view built in pure Sw

Jun 20, 2022
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.

SwiftUI TagView Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it. Usage: Just copy the

May 23, 2022
A simple and elegant UIKit for iOS.
A simple and elegant UIKit for iOS.

HamsterUIKit A simple and elegant UIKit(Chart) for iOS, written in Swift. ?? Curve and bar Charts. ?? Protocols are designed based on UIKit(UITableVie

May 18, 2022
Elegant Apply Style by Swift Method Chain.🌙
Elegant Apply Style by Swift Method Chain.🌙

ApplyStyleKit ApplyStyleKit is a library that applies styles to UIKit using Swifty Method Chain. Normally, when applying styles to UIView etc.,it is n

Jun 8, 2022
ElongationPreview is an elegant UI push-pop style view controller
ElongationPreview is an elegant UI push-pop style view controller

ElongationPreview is an elegant UI push-pop style view controller

Jun 19, 2022
DesafioMobile2You - This project consists of creating a replica of a TodoMovies screen
DesafioMobile2You - This project consists of creating a replica of a TodoMovies screen

DesafioMobile2You Swift IOS Este projeto consiste na criação da réplica de uma t

Feb 3, 2022
Bar Button Item that can be moved anywhere in the screen, like Android's stickers button.
Bar Button Item that can be moved anywhere in the screen, like Android's stickers button.

FlowBarButtonItem Bar Button Item that can be moved anywhere in the screen, like Android's stickers button. [![CI Status](http://img.shields.io/travis

Apr 13, 2022
A library to recreate the iOS Apple Music now playing transition
A library to recreate the iOS Apple Music now playing transition

DeckTransition DeckTransition is an attempt to recreate the card-like transition found in the iOS 10 Apple Music and iMessage apps. Hereʼs a GIF showi

May 23, 2022
:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion
:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion

FLUID SLIDER A slider widget with a popup bubble displaying the precise value selected written on Swift. We specialize in the designing and coding of

Jun 21, 2022
A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed flag
A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed flag

HidesNavigationBarWhenPushed A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed

Feb 21, 2022
⚡️ A library of widgets and helpers to build instant-search applications on iOS.
⚡️ A library of widgets and helpers to build instant-search applications on iOS.

By Algolia. InstantSearch family: InstantSearch iOS | InstantSearch Android | React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue Ins

Jun 16, 2022
A drop-in universal library helps you to manage the navigation bar styles and makes transition animations smooth between different navigation bar styles
A drop-in universal library helps you to manage the navigation bar styles and makes transition animations smooth between different navigation bar styles

A drop-in universal library helps you to manage the navigation bar styles and makes transition animations smooth between different navigation bar styles while pushing or popping a view controller for all orientations. And you don't need to write any line of code for it, it all happens automatically.

Jun 12, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Jun 22, 2022
Non-intrusive iOS UI library to implement overlay based interfaces
Non-intrusive iOS UI library to implement overlay based interfaces

OverlayContainer is a UI library written in Swift. It makes easier to develop overlay based interfaces, such as the one presented in the Apple Maps, S

Jun 16, 2022
A SwiftUI Library for creating resizable partitions for View Content.
A SwiftUI Library for creating resizable partitions for View Content.

Partition Kit Recently Featured In Top 10 Trending Android and iOS Libraries in October and in 5 iOS libraries to enhance your app! What is PartitionK

Jun 3, 2022