# FSPagerView [![Platform](https://img.shields.io/badge/platform-iOS%207-blue.svg?style=flat)](http://cocoadocs.org/docsets/FSPagerView) | [SWIFT](https://github.com/WenchaoD/FSPagerView/blob/master/README.md) | 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. * 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 | |---| |![9](https://cloud.githubusercontent.com/assets/5186464/22688057/9003d880-ed65-11e6-882e-4587c97c8878.gif) | ### automaticSlidingInterval The time interval of automatic sliding. 0 means disabling automatic sliding. Default is 0. **e.g.** ```objc pagerView.automaticSlidingInterval = 3.0; ``` ### isInfinite A boolean value indicates whether the pager view has infinite number of items. Default is false. **e.g.** ```objc pagerView.isInfinite = YES; ``` ### itemSize The item size of the pager view. .zero means always fill the bounds of the pager view. Default is .zero. **e.g.** ```objc pagerView.itemSize = CGSizeMake(200, 180); ``` ### interitemSpacing The spacing to use between items in the pager view. Default is 0. **e.g.** ```objc pagerView.interitemSpacing = 10; ``` ## Demo2 - Transformers |Cross Fading| |---| | ![1](https://cloud.githubusercontent.com/assets/5186464/22686429/1983b97e-ed5f-11e6-9a32-44c1830df7ac.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeCrossFading]; ``` --- |Zoom Out| |---| | ![2](https://cloud.githubusercontent.com/assets/5186464/22686426/19830862-ed5f-11e6-90be-8fb1319cd125.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeZoomOut]; ``` --- |Depth| |---| | ![3](https://cloud.githubusercontent.com/assets/5186464/22686430/19856c1a-ed5f-11e6-8187-9e4395b7597c.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeDepth]; ``` --- |Linear| |---| | ![4](https://cloud.githubusercontent.com/assets/5186464/22686428/198368c0-ed5f-11e6-95df-cfcfe9bc3f29.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeLinear]; ``` --- |Overlap| |---| | ![5](https://cloud.githubusercontent.com/assets/5186464/22686431/198905aa-ed5f-11e6-9312-ec371c8c4e44.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeOverlap]; ``` --- |Ferris Wheel| |------| | ![6](https://cloud.githubusercontent.com/assets/5186464/22686427/19831c08-ed5f-11e6-8bdb-30e762a85d4b.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeFerrisWheel]; ``` --- |Inverted Ferris Wheel| |------| | ![7](https://cloud.githubusercontent.com/assets/5186464/22686433/19b669a0-ed5f-11e6-8bf0-dc23edf8101f.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeInvertedFerrisWheel]; ``` --- |Cover Flow| |------| | ![8](https://cloud.githubusercontent.com/assets/5186464/22686432/19b567f8-ed5f-11e6-885d-bd660c98b507.gif) | ```objc pagerView.transformer = [[FSPagerViewTransformer alloc] initWithType:FSPagerViewTransformerTypeCoverFlow]; ``` --- > Customize your own transformer by subclassing`FSPagerViewTransformer.` ## Demo3 Page Control |Page Control| |---| |![10](https://cloud.githubusercontent.com/assets/5186464/22689720/2baabdb0-ed6d-11e6-8287-ef7a2c0f64bc.gif) | ### numberOfPages The number of page indicators of the page control. Default is 0. **e.g.** ```objc pageControl.numberOfPages = 5; ``` ### currentPage The current page, highlighted by the page control. Default is 0. **e.g.** ```objc pageControl.currentPage = 1; ``` ### contentHorizontalAlignment The horizontal alignment of content within the control’s bounds. Default is center. **e.g.** ```swift pageControl.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight; ``` ### setStrokeColor:forState: Sets the stroke color for page indicators to use for the specified state. (selected/normal). **e.g.** ```objc [pageControl setStrokeColor:[UIColor greenColor] forState:UIControlStateNormal]; [pageControl setStrokeColor:[UIColor yellowColor] forState:UIControlStateSelected]; ``` ### setFillColor:forState: Sets the fill color for page indicators to use for the specified state. (selected/normal). **e.g.** ```objc [pageControl setFillColor:[UIColor grayColor] forState:UIControlStateNormal]; [pageControl setFillColor:[UIColor whiteColor] forState:UIControlStateSelected]; ``` ### setImage:forState: Sets the image for page indicators to use for the specified state. (selected/normal). **e.g.** ```objc [pageControl setImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal]; [pageControl setImage:[UIImage imageNamed:@"image2"] forState:UIControlStateSelected]; ``` ### setPath:forState: Sets the path for page indicators to use for the specified state. (selected/normal). **e.g.** ```objc [pageControl setPath:[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 8, 8)] forState:UIControlStateNormal]; [pageControl setPath: [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 8, 8)] forState:UIControlStateSelected]; ``` ## Installation * Manually * Cocoapods ### Manually 1. ***[Download](#)*** the source code. 2. Extract the zip file, simply drag folder ***FSPagerView*** into your project. 3. Make sure ***Copy items if needed*** is checked. ### Cocoapods ```ruby use_frameworks! pod FSPagerView ``` ## Tutorial * [Get started](#get_started) * [Implement FSPagerViewDataSource](#implement_fspagerviewdatasource) * [Implement FSPagerViewDelegate](#implement_fspagerviewdelegate) ### 1. Get started * Get started with code ```objc // Create a pager view FSPagerView *pagerView = [[FSPagerView alloc] initWithFrame:frame1]; pagerView.dataSource = self; pagerView.delegate = self; [pagerView registerClass:[FSPagerViewCell class] forCellWithReuseIdentifier:@"cell"]; [self.view addSubview:pagerView]; // Create a page control FSPagerControl *pageControl = [[FSPagerControl alloc] initWithFrame:frame2]; [self.view addSubview:pageControl]; ``` * Get 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. ```objc - (void)viewDidLoad { [self.pagerView registerClass:[FSPagerViewCell class] forCellWithReuseIdentifier:@"cell"]; } ``` ### 2. Implement FSPagerViewDataSource ```objc - (NSInteger)numberOfItemsInpagerView:(FSPagerView *)pagerView { return numberOfItems; } - (FSPagerViewCell *)pagerView:(FSPagerView *)pagerView cellForItemAtIndex:(NSInteger)index { FSPagerViewCell *cell = [pagerView dequeueReusableCellWithReuseIdentifier:@"cell" atIndex:index]; cell.imageView.image = ...; cell.textLabel.text = ...; return cell; } ``` ### 3. Implement FSPagerViewDelegate ```objc - (BOOL)pagerView:(FSPagerView *)pagerView shouldHighlightItemAtIndex:(NSInteger)index; ``` > Asks the delegate if the item should be highlighted during tracking. --- ```objc - (void)pagerView:(FSPagerView *)pagerView didHighlightItemAtIndex:(NSInteger)index; ``` > Tells the delegate that the item at the specified index was highlighted. --- ```objc - (BOOL)pagerView:(FSPagerView *)pagerView shouldSelectItemAtIndex:(NSInteger)index; ``` > Asks the delegate if the specified item should be selected. --- ```objc - (void)pagerView:(FSPagerView *)pagerView didSelectItemAtIndex:(NSInteger)index; ``` > Tells the delegate that the item at the specified index was selected. --- ```objc - (void)pagerView:(FSPagerView *)pagerView willDisplayCell:(FSPagerViewCell *)cell forItemAtIndex:(NSInteger)index; ``` > Tells the delegate that the specified cell is about to be displayed in the pager view. --- ```objc - (void)pagerView:(FSPagerView *)pagerView didEndDisplayingCell:(FSPagerViewCell *)cell forItemAtIndex:(NSInteger)index; ``` > Tells the delegate that the specified cell was removed from the pager view. --- ```objc - (void)pagerViewWillBeginDragging:(FSPagerView *)pagerView; ``` > Tells the delegate when the pager view is about to start scrolling the content. --- ```objc - (void)pagerViewWillEndDragging:(FSPagerView *) pagerView targetIndex:(NSInteger)index: ``` > Tells the delegate when the user finishes scrolling the content. --- ```objc - (void)pagerViewDidScroll:(FSPagerView *)pagerView; ``` > Tells the delegate when the user scrolls the content view within the receiver. --- ```objc - (void)pagerViewDidEndScrollAnimation:(FSPagerView *)pagerView; ``` > Tells the delegate when a scrolling animation in the pager view concludes. --- ```objc - (void)pagerViewDidEndDecelerating:(FSPagerView *)pagerView; ``` > 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 * ***微博:[@WenchaoD](http://weibo.com/WenchaoD)*** * ***Twitter: [@WenchaoD](https://twitter.com/WenchaoD)*** * Other repos: * ***[FSCalendar](https://github.com/WenchaoD/FSCalendar)***