FSPagerView

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.

Demo1 - Banner

Banner
9003d880-ed65-11e6-882e-4587c97c8878

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
1983b97e-ed5f-11e6-9a32-44c1830df7ac
pagerView.transformer = FSPagerViewTransformer(type: .crossfading)

Zoom Out
19830862-ed5f-11e6-90be-8fb1319cd125
pagerView.transformer = FSPagerViewTransformer(type: .zoomout)

Depth
19856c1a-ed5f-11e6-8187-9e4395b7597c
pagerView.transformer = FSPagerViewTransformer(type: .depth)

Linear
198368c0-ed5f-11e6-95df-cfcfe9bc3f29
pagerView.transformer = FSPagerViewTransformer(type: .linear)

Overlap
198905aa-ed5f-11e6-9312-ec371c8c4e44
pagerView.transformer = FSPagerViewTransformer(type: .overlap)

Ferris Wheel
19831c08-ed5f-11e6-8bdb-30e762a85d4b
pagerView.transformer = FSPagerViewTransformer(type: .ferrisWheel)

Inverted Ferris Wheel
19b669a0-ed5f-11e6-8bf0-dc23edf8101f
pagerView.transformer = FSPagerViewTransformer(type: .invertedFerrisWheel)

Cover Flow
19b567f8-ed5f-11e6-885d-bd660c98b507
pagerView.transformer = FSPagerViewTransformer(type: .coverFlow)

Cubic
8875080c-fec5-11e6-8db6-6d8864acfcc1
pagerView.transformer = FSPagerViewTransformer(type: .cubic)

Customize your own transformer by subclassingFSPagerViewTransformer.

Demo3 Page Control

Page Control
2baabdb0-ed6d-11e6-8287-ef7a2c0f64bc

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 '<Your Target Name>' do
    pod 'FSPagerView'
end

Carthage

github "WenchaoD/FSPagerView"

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.

GitHub