Git Product home page Git Product logo

wenchaod / fspagerview Goto Github PK

View Code? Open in Web Editor NEW
7.1K 105.0 939.0 2.06 MB

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

License: MIT License

Swift 74.49% Ruby 0.66% Objective-C 24.85%
swift objective-c infinite-scroll banner-view banner-slider banner uicollectionview uicollectionviewlayout ios pages

fspagerview's Introduction

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 '<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 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


fspagerview's People

Contributors

abhi21git avatar dipanshkhandelwal avatar dirtmelon avatar sereivoanyong avatar sketchk avatar waitingsnow avatar wenchaod avatar zhengrusong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fspagerview's Issues

PrepareForReuse problem

Hey,

I have a custom cell, to display my own view. But the views, that are used later in queue weren't rendered correctly. I use "prepareForReuse" to use less memory and rerender, if views are shown, but the views are stuck, like they are cached or something. In normal collectionView, it works perfectly, so I think, it just appeared, since I used FSPagerView.

Add Two ViewPager in Same ViewController

Can I add two viewpager in same class? I already did this :

public func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        
        if pagerView == self.viewPager {
            let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "TheCell", at: index)
            viewPagerControl.numberOfPages = self.arrRes.count
            
            if index < arrRes.count  {
                var dict = arrRes[index]
                print("IMAGE FROM JSON : \(dict["image"] as? String)")
                
                // Convert Optional String to String
                if let value = dict["image"] as? String {
                    print("VALUE STRING UNWRAP : \(value)")
                    
                    let imageURLString = "http://mywebsite.com"
                    print(imageURLString)
                    
                    let realUrl = URL(string: imageURLString)
                    cell.imageView?.kf.setImage(with: realUrl)
                    cell.imageView?.contentMode = .scaleAspectFill
                    cell.imageView?.clipsToBounds = true
                    
                }
                
            }
            return cell
        }
        if pagerView == self.produkPopulerViewPager {
            let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "TheProduk", at: index)
            cell.imageView?.image = UIImage(named: self.imageNames[index])
            cell.imageView?.contentMode = .scaleAspectFill
            cell.imageView?.clipsToBounds = true
            //cell.textLabel?.text = index.description+index.description
            return cell
        }
        
        return FSPagerViewCell()
        
    }

If I run the app, the only work and apear is first viewPager.

加入到自定义 UICollectionViewCell 中 ,作为UICollectionView的 headerview 则无法手动滑动

我自定义了一个headerView :UICollectionViewCell 然后在其中添加 banner: FSPagerView
但是 添加后正常显示 但是无法手动滚动 接收事件 请教会是哪里的问题呢?
部分代码如下
//
lazy var banner: FSPagerView = {
let pagerView = FSPagerView(frame: CGRect(x: 0, y: 0, width: Constant.screenWidth, height: ConstantValue.bannerH))
pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
pagerView.transformer = FSPagerViewTransformer(type: .overlap)
let transform = CGAffineTransform(scaleX: 0.7, y: 0.85)
pagerView.itemSize = pagerView.frame.size.applying(transform)
pagerView.automaticSlidingInterval = 3.0
pagerView.isInfinite = true
pagerView.delegate = self
pagerView.dataSource = self

    return pagerView
}()

//顶部容器
lazy var headerView: UIView = {
    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: ConstantValue.headerH))
    headerView.backgroundColor = UIColor.blue
    headerView.addSubview(self.banner)
    return headerView
}()

lazy var layout: UICollectionViewFlowLayout = {
    let layout = UICollectionViewFlowLayout()
    layout.minimumLineSpacing = ConstantValue.cellMargin
    layout.minimumInteritemSpacing = ConstantValue.cellMargin
    
    layout.scrollDirection = .vertical
    layout.sectionInset = UIEdgeInsets(top: ConstantValue.cellMargin, left: ConstantValue.cellMargin, bottom: ConstantValue.cellMargin, right: ConstantValue.cellMargin)
    layout.headerReferenceSize = CGSize(width: self.view.bounds.width, height: ConstantValue.sectionHeaderHeight)
    return layout
}()


lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: self.layout)
    collectionView.register(HeaderViewCell.self, forCellWithReuseIdentifier: CellIdentifier.headerCell.rawValue)
    collectionView.register(UINib(nibName: String(describing: SpreadViewCell.self), bundle: nil), forCellWithReuseIdentifier: CellIdentifier.spreadCell.rawValue)
    
    collectionView.delegate = self
    collectionView.dataSource = self
    return collectionView
}()

[_pagerView reloadData];

[_pagerView reloadData] cannot invoking the method: self.dataSource!.pagerView(self, cellForItemAt: index)

cod:

- (NSInteger)numberOfItemsInpagerView:(FSPagerView *)pagerView
{
    return self.allDataArr.count;
}
 
- (FSPagerViewCell *)pagerView:(FSPagerView *)pagerView cellForItemAtIndex:(NSInteger)index
{
    FSPagerViewCell * cell = [pagerView dequeueReusableCellWithReuseIdentifier:@"cell" atIndex:index];

        cell.imageView.image = [UIImage imageNamed:@"f1"];
        cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
        cell.imageView.clipsToBounds = YES;
 
    return cell;
}

ps:the allDataArr is net request result.

Need indexPathForItemAtPoint(_ point: CGPoint) methods

Hi,

Is it possible that you implement the following function of the UICollectionView :

func indexPathForItemAtPoint(_ point: CGPoint) -> NSIndexPath?

It is needed when you add a custom view with a target in a button for exemple to get the indexPath of the clicked button.

Thanks.

scrollToItem on viewDidLoad()

Is there a way to start the pagerView off at a certain index?
How can I do this on viewDidLoad without starting of the pagerView at index 0 ?

Custom FSPagerViewCell with a custom subview

FSPagerViewCell comes with:
textLabel
imageView

I want to use a ViewCell with a UIView inside that I can set with a custom View
Something like that:
subview

How can I do that?

LeadingSpacing

How can we create the effect there will only be be the interitem spacing before the first cell and after the last cell, rather than a full space that creates a gap?

引用异常

你好!手动拖FSPagerView 这个文件夹到工程,不能正常使用呢,找不到FSPagerView这个类,引用不了。
使用CocoaPods安装,找不到FSPagerControl 那个类,import不了。
PS:可否公开下实现方式的代码。 还有怎么实现的FSPagerView类像是系统类(在xcode 里显示是蓝色字体)的? O(∩_∩)O谢谢 开源!

FSPagerView inside UITableView : need to set pagerView currentIndex before it gets displayed

Hi,

I'm currently using FSPagerView inside a UITableView, just as it was a CollectionView from this article

However, I can't find a way to set the contentOffset of the pagerView as I would for a collectionView (collectionView.contentOffset.x = newValue), to ensure that when my tableView cells are reused, the offset are preserved and my pagerView is displayed with the right currentIndex.

Basically, I would like to set the pagerView current displayed index in my tableView WillDisplayCell method, but as I try using scrollToItem it crashes with an index out of range issue showing that numberOfItems is still 0, as its data was not loaded yet.

Any idea how to accomplish that? Hope I'm clear enough, thanks for your help!

no cellForItem for FSPagerView

@WenchaoD
this library seems does not expose the function for getting FSPagerViewCell with index, for example:

func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        pagerView.cellForItem(at: index)
}

I've added this func in my local repo, if it's not in the current development roadmap, I'm glad to create a pull request

Margin Between Item

Halo again,

If I want to give margin between the item is that posible? Or are you already give this feature in this library?

Bug: "didSelectItemAt" not called if "shouldHighlightItemAt" always false

Hi. It would be great to fix the following bug:
When I set the following:
func pagerView(_ pagerView: FSPagerView, shouldHighlightItemAt index: Int) -> Bool { return false }
then func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) is never called.
Of course this is not the normal behaviour: I want to be able to call didSelectItemAt but have no highlight when the item is tapped.
Thanks for fixing this bug!
NB: for those having the same issue as I have, you might be solving the issue with attaching a TapGesture to the items. I have not tested it yet though.

cellForItemAt not called!

Hi there
i wanna to implement fspagerview in tableHeaderView of uitableview. after pagerView.reloadData() cellForItemAt... not called but numberOfItems fired !!

`

    let nib = UINib(nibName: "BannerViewNew", bundle: nil)
    self.newsListTableView.register(nib, forHeaderFooterViewReuseIdentifier: "BannerViewNew")
    let cell = self.newsListTableView.dequeueReusableHeaderFooterView(withIdentifier: "BannerViewNew") as! BannerViewNewCell
    cell.frame = CGRect(x: 0.0, y: 0.0, width: self.newsListTableView.frame.width, height: 250.0)
    cell.pagerView.frame = cell.frame
    cell.pagerView.delegate = self
    cell.pagerView.dataSource = self
    cell.pageControl.numberOfPages = bannerList?.count ?? 0
    cell.pagerView.reloadData()
    self.newsListTableView.tableHeaderView = cell`

tvOS support

I see podspec states this framework is only compatible with iOS. Since iOS and tvOS are very similar (especially in regard with commonly used components, such as UICollectionView) would it be possible to implement this component in a tvOS app ?

I'm talking about a behaviour Apple uses as ad banners in tvOS (App store, Movies etc..)

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 {
}

New Case "cellForItemAt not called "

I know that there'e someone also post about this issue already. But mine is also happen.
I already call :

viewPagerProduct.dataSource = self
viewPagerProduct.delegate = self

and when my data ready to get from json I call this line :

self.viewPagerProduct.reloadData()

and nothing happen. I check that by counting my value, and they are not null or 0. Any clue for this?
But the weird thing this numberOfItems function is called

RTL Support

FSPagerView doesn't support RTL (right to left languages) requires to reverse the images, page control and scrolling direction.

memory leak

too much memory leak when i used Instruments to analyze

Problem with installing with pods

  1. If just try to use: pod 'FSPagerView' we see the error in terminal:
    [!] Unable to find a specification for FSPagerView.
    Resolved with try to use pod with a link to git repository like this:
    pod 'FSPagerView', :git => 'https://github.com/WenchaoD/FSPagerView.git'

  2. And when I add this lib, and try to FSPagerView to storyboard I have a warning:

2017-03-05 1 00 15

And app will crush when try to open it. I've also resolve this problem adding module to view setting in storyboard

2017-03-05 1 07 05

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

Register custom cell

Hey,

I would like to use your library to implement centered cells with custom width, and infinite scrolling.
But trying to register my custom cell - that subclasses FSPagerViewCell - still produces a normal FSPagerViewCell. I cast the cell to my custom cell in cellForItemAt.

Also, for some reason i cannot scroll the PagerView?

Thanks :)

add next and previous button

If I want to scroll next and previous images by buttons too
what the action will be in my next & previous buttons?

Problem With Manually Scroll If Add Programmatically

I add the view pager manually into my code without using Storyboard, and the views and everything is worked, except for one thing The Scroll. I can't scroll viewpager if I scroll from the center or bottom side, I only can scroll if I touch and scroll them from the top side. Can you fix this?

EXC_BAD_ACCESS error=1 on self.pagerView.register

It is 1000% possible that I missed something obvious, however my project with just an absolute barebones "just get it to build and run even if it doesn't do anything" implementation (based on readme and glancing at examples) is giving me an EXC_BAD_ACCESS (error=1, address=0x0) on the register:

    @IBOutlet weak var pagerView: FSPagerView! {
        didSet {
            self.pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
        }
    }

I've tried to dig around this and figure it out on my own if I was missing something. Checked to ensure I added the class, it was added as a framework, checked any weird build steps etc.

I am also seeing:

2017-04-19 01:02:43.599 [18910:8372737] Unknown class FSPagerView in Interface Builder file.

In the runtime log.


XCode 8.2
Swift3

Assertion failure

Hi,

if I set:
pagerView.itemSize = CGSize(width: 100, height: 100)

I get this error:

2017-02-24 19:35:44.423 ccs[62442:3672487] *** Assertion failure in -[UICollectionViewData validateLayoutInRect:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3600.6.21/UICollectionViewData.m:433 2017-02-24 19:35:44.433 ccs[62442:3672487] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'UICollectionView received layout attributes for a cell with an index path that does not exist: <NSIndexPath: 0x600000c301e0> {length = 2, path = 1 - 0}'

if I set it to:
pagerView.itemSize = CGSize(width: 120, height: 120)
it works

Why?

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.