Coder Social home page Coder Social logo

sanengineer / advancedpagecontrol Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mohn93/advancedpagecontrol

0.0 0.0 0.0 3.34 MB

A simple yet powerful page control indicator animations library for iOS.

License: MIT License

Ruby 2.85% Swift 97.15%

advancedpagecontrol's Introduction

AdvancedPageControl

Version License Platform

Buy Me A Coffee

A simple yet powerful page control indicator animations library for iOS, Written in Swift.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

AdvancedPageControl is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'AdvancedPageControl'

Effects

  • Color Blend
  • Drop
  • ExtendedDot
  • Jump
  • Scale
  • Slide
  • Swap
  • Worm
  • ThinWorm
  • ThinWormHead
  • Scrolling
  • Infinite

Usage

I'm using it with expanded UICollectionView, create a collection view and link the DataSource and Delegate to your ViewController, and add UICollectionViewDeleageFlowLayout

class ViewController: UIViewController,
    UICollectionViewDataSource,
    UICollectionViewDelegate,
    UICollectionViewDelegateFlowLayout { ....

Then add these methods:

   func numberOfSections(in collectionView: UICollectionView) -> Int {
       return 5
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return 1
   }
   
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       return collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
   }
   
   
   func collectionView(_ collectionView: UICollectionView,
                       layout collectionViewLayout: UICollectionViewLayout,
                       sizeForItemAt indexPath: IndexPath) -> CGSize {
       return CGSize(width: collectionView.frame.width, height: 250) // This is to restric the item width and heigth to achive the single item preview
   }

Tick 'Scrolling enabled' and 'Paging enabled' Checkboxes in storyboard UICollectionView properties

Then add this method and pass the offset of the scrolling for UICollectionView, and width of the UICollectionView, to the pageControl , setCurrentItem, Method

func scrollViewDidScroll(_ scrollView: UIScrollView) {
      let offSet = scrollView.contentOffset.x
      let width = scrollView.frame.width
      
      pageControl.setPageOffset(offSet/width)
      
      // OR
      let index = Int(round(offSet/width))
      pageControl.setPage(index) // This will animate the page controll transition, whenever the index is changed, no need to pass an offset of every scroll offset

  }

Then set any drawer you like in viewDidLoad Method :

pageControl1.drawer = ColorBlendDrawer()

or you can pick one of these

ColorBlendDrawer()
DropDrawer()
ExtendedDotDrawer()
JumpDrawer()
ScaleDrawer()
SlideDrawer()
SwapDrawer()
ThinWormDrawer()
ThinWormHeadsDrawer()
WormDrawer()
Scrolling()
Infinite()

Alt Text

Customization

ScaleDrawer(numberOfPages:Int? = 5,
            height: CGFloat? = 16,
            width: CGFloat? = 16,
            space: CGFloat? = 16,
            radius: CGFloat? = 16,
            currentItem: CGFloat? = 0,
            indicatorColor: UIColor? = .red,
            dotsColor: UIColor? = .lightGray)

Author

Mohanned Binmiskeen, [email protected]

License

AdvancedPageControl is available under the MIT license. See the LICENSE file for more info.

advancedpagecontrol's People

Contributors

ganeshmynewcar avatar georgeivanov avatar mohn93 avatar uuttff8 avatar

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.