DOCSEARCHbyAlgolia
Submit Docs

FSPagerView Documentation

repository·master·Indexed 27 days ago

https://github.com/wenchaod/fspagerview

A highly customizable screen slide library for iOS and tvOS built on UICollectionView. FSPagerView supports infinite scrolling, 3D transitions via FSPagerViewTransformer, and includes FSPageControl for page indicators. It is designed for creating banners, product showcases, and welcome pages.

Tokens
1.8K
Snippets
6
Records
7
Agent score
43%

What's inside FSPagerView

  1. Install FSPagerView via Cocoapods, Carthage, or Manually

    master

    You can integrate FSPagerView into your iOS or tvOS project using one of the following methods:

    Cocoapods

    Add the following to your Podfile:

    use_frameworks!
target '<Your Target Name>' do
    pod 'FSPagerView'
end

    Carthage

    Add the following to your Cartfile:

    github "WenchaoD/FSPagerView"

    Manual Installation

    1. Download the source code.
    2. Extract the zip file.
    3. Drag the Sources folder into your Xcode project.
    4. Ensure Copy items if needed is checked during the import process.
    use_frameworks!
target '<Your Target Name>' do
    pod 'FSPagerView'
end

  2. Get started with FSPagerView

    master

    To use FSPagerView in code, initialize it with a frame, assign a data source and delegate, and register a cell class.

    Programmatic Setup

    let pagerView = FSPagerView(frame: frame1)
pagerView.dataSource = self
pagerView.delegate = self
pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
self.view.addSubview(pagerView)

// Optional: Create a page control
let pageControl = FSPageControl(frame: frame2)
self.view.addSubview(pageControl)

    Interface Builder Setup

    1. Drag a UIView into your View Controller.
    2. Change the Custom Class to FSPagerView (or FSPageControl).
    3. Link the dataSource and delegate properties to your View Controller.
    4. Register a cell class in code (e.g., in viewDidLoad).
    let pagerView = FSPagerView(frame: frame1)
pagerView.dataSource = self
pagerView.delegate = self
pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
self.view.addSubview(pagerView)

let pageControl = FSPageControl(frame: frame2)
self.view.addSubview(pageControl)

  3. Apply 3D Transformers to FSPagerView

    master

    Change the visual transition style of the pager view by setting the transformer property with an FSPagerViewTransformer of a specific type.

    Supported types:

    • .crossFading
    • .zoomOut
    • .depth
    • .linear
    • .overlap
    • .ferrisWheel
    • .invertedFerrisWheel
    • .coverFlow
    • .cubic

    You can also create custom transitions by subclassing FSPagerViewTransformer.

    pagerView.transformer = FSPagerViewTransformer(type: .crossFading)

  4. Implement FSPagerViewDataSource

    master

    Conform to FSPagerViewDataSource to provide the number of items and the cell for each index.

    Required methods:

    • numberOfItems(in:): Return the total number of items.
    • pagerView(_:cellForItemAt:): Dequeue and configure the cell for the given index.
    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
}

  5. Implement FSPagerViewDelegate

    master

    Conform to FSPagerViewDelegate to handle interaction and display events.

    Key methods include:

    • pagerView(_:shouldHighlightItemAt:): Determine if an item should be highlighted during tracking.
    • pagerView(_:didHighlightItemAt:): Notify when an item is highlighted.
    • pagerView(_:shouldSelectItemAt:): Determine if an item can be selected.
    • pagerView(_:didSelectItemAt:): Notify when an item is selected.
    • pagerView(_:willDisplay:forItemAt:): Called before a cell is displayed.
    • pagerView(_:didEndDisplaying:forItemAt:): Called when a cell is removed.
    • pagerViewWillBeginDragging(_:): Called when scrolling starts.
    • pagerViewWillEndDragging(_:targetIndex:): Called when user finishes scrolling.
    • pagerViewDidScroll(_:): Called during scrolling.
    • pagerViewDidEndScrollAnimation(_:): Called when scroll animation finishes.
    • pagerViewDidEndDecelerating(_:): Called when deceleration ends.

  6. Configure FSPageControl

    master

    Customize the appearance and behavior of the FSPageControl indicator.

    Basic Properties

    • numberOfPages: Total number of indicators.
    • currentPage: The currently highlighted page index.
    • contentHorizontalAlignment: Alignment of content within bounds (e.g., .center, .right).

    Visual Customization

    Use the following methods to style indicators for either .normal or .selected states:

    • setStrokeColor(_:for:): Set the stroke color.
    • setFillColor(_:for:): Set the fill color.
    • setImage(_:for:): Set a custom image.
    • setPath(_:for:): Set a custom UIBezierPath for the indicator shape.
    pageControl.numberOfPages = 5
pageControl.currentPage = 1
pageControl.contentHorizontalAlignment = .right

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

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

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

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)

  7. Configure FSPagerView properties

    master

    Customize the behavior and appearance of the FSPagerView using the following properties:

    • automaticSlidingInterval: Time interval for automatic sliding. Set to 0 to disable (default is 0).
    • isInfinite: Set to true to enable infinite scrolling (default is false).
    • decelerationDistance: Determines the paging distance (number of items passed during deceleration). Use FSPagerView.automaticDistance for automatic calculation based on speed (default is 1).
    • itemSize: The size of the items. Use FSPagerView.automaticSize to fill the visible area (default is FSPagerView.automaticSize).
    • interitemSpacing: Spacing between items (default is 0).
    pagerView.automaticSlidingInterval = 3.0
pagerView.isInfinite = true
pagerView.decelerationDistance = 2
pagerView.itemSize = CGSize(width: 200, height: 180)
pagerView.interitemSpacing = 10