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 |
---|
![]() |
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
itemSize
The item size of the pager view. .zero means always fill the bounds of the pager view. Default is .zero.
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 |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .crossfading)
Zoom Out |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .zoomout)
Depth |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .depth)
Linear |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .linear)
Overlap |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .overlap)
Ferris Wheel |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .ferrisWheel)
Inverted Ferris Wheel |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .invertedFerrisWheel)
Cover Flow |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .coverFlow)
Cubic |
---|
![]() |
pagerView.transformer = FSPagerViewTransformer(type: .cubic)
Customize your own transformer by subclassing
FSPagerViewTransformer.
Demo3 Page Control
Page Control |
---|
![]() |
|
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: .normal)
Installation
- Manually
- Cocoapods
- Carthage
Manually
- Download the source code.
- Extract the zip file, simply drag folder Sources into your project.
- Make sure Copy items if needed is checked.
Cocoapods
use_frameworks!
target '<Your Target Name>' 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 theCustom Class
toFSPagerView
. (OrFSPageControl
)
2、Link thedataSource
anddelegate
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.