FiveUIComponents 1.0.1

FiveUIComponents 1.0.1

DocsDocumented
TestsTested
LangLanguage SwiftSwift
License MIT
ReleasedLast Release Mar 2017
SwiftSwift Version 3.0
SPMSupports SPM

Maintained by Miran Brajsa.


GitHub

Stars0
Watchers4
Forks0
Issues0
Contributors1
Pull Requests0

Code

Files15
SizeIntegration Size 108 kb
LOCLines of Code 924


  • By
  • iOS libraries team

FiveUIComponents

About

This bundle contains Swift UI components we tend to re-use on many of our projects (us being Five Agency’s iOS Team). We expect there’ll be many more added, but in the mean time, you’re free to use/re-use/upgrade all of the existing code here. Everything and anything regarding animators, custom views, layouts and other nice to have snippets. Try it out!

Requirements

  • Xcode 8.0+
  • Swift 3.0
  • iOS 9.0+

Installation

There are no additional dependencies.

Currently supported installation options:

Manually using git submodules

  • Add FiveUIComponents as a submodule
$ git submodule add https://github.com/fiveagency/ios-five-ui-components.git
  • Drag FiveUIComponents.xcodeproj into Project Navigator.

  • Go to Project > Targets > Build Phases > Link Binary With Libraries, click + and select FiveUIComponents.framework target.

Examples

To run the example project do the following.

  • Clone the repo by typing:
$ git clone https://github.com/fiveagency/ios-five-ui-components.git YOUR_DESTINATION_FOLDER
  • Open FiveUIComponents.xcworkspace, choose Example scheme and hit run. This method will build everything and run the sample app.

Usage

GradientView module

/**
 Color at the start of the gradient.
 */

@IBInspectable public var startColor: UIColor

/**
 Color at the end of the gradient.
 */

@IBInspectable public var endColor: UIColor

/**
 Start point for gradient vector in normalized coordinates.
 */

@IBInspectable public var startPoint: UIColor

/**
 End point for gradient vector in normalized coordinates.
 */

@IBInspectable public var endPoint: UIColor

Example usage:

let frame = CGRect(x: 0, y: 0, width: 200, height: 200)
let gradientView = GradientView(frame: frame)

gradientView.startColor = UIColor.white
gradientView.endColor = UIColor(red: 218.0 / 255.0,
                                green: 50.0 / 255.0,
                                blue: 40.0 / 255.0,
                                alpha: 1.0)
gradientView.startPoint = CGPoint(x: 0, y: 0)
gradientView.endPoint = CGPoint(x: 0.5, y: 1)
    

SmoothPageControl module

/**
 Number of page indicators.
 */

@IBInspectable public var numberOfPages: Int

/**
 Spacing between page indicators.
 */

@IBInspectable public var pageIndicatorSpacing: CGFloat

/**
 Radius of page indicators that do not represent the current page.
 */

@IBInspectable public var pageIndicatorRadius: CGFloat

/**
 Color of page indicators that do not represent the current page.
 */

@IBInspectable public var pageIndicatorColor: UIColor

/**
 Index of the page indicator that is highlighted.
 If this number if not an integer, size and color of two neighboring indicators
 are interpolated accordingly to represent the page.
 */

@IBInspectable public var currentPage: CGFloat

/**
 Radius of page indicator that represents the current page.
 */

@IBInspectable public var currentPageIndicatorRadius: CGFloat

/**
 Color of page indicator that represents the current page.
 */

@IBInspectable public var currentPageIndicatorColor: UIColor

/**
 Duration of the animation that updates the current page once the control was tapped.
 */

public var animationDuration: TimeInterval

Example usage:

let frame = CGRect(x: 0, y: 0, width: 200, height: 50)
let pageControl = SmoothPageControl(frame: frame)
pageControl.numberOfPages = 5

// now tap the control
    

DelayedCellLoadingAnimator module

/**
 Creates the animator with custom animation.

 - parameter collectionView: Collection view that needs to be animated.
 - parameter setupInitialCellState: Block that sets up the cell before it is animated.
 - parameter setupFinalCellState: Block that sets up the final state for the cell. This block is animated.
 */

public init(collectionView: UICollectionView, setupInitialCellState: @escaping SetupDelayedCellClosure, setupFinalCellState: @escaping SetupDelayedCellClosure)

/**
 Creates the animator with one of the default animations.

 - parameter collectionView: Collection view which needs to be animated.
 - parameter animation: The animation to perfom on the cell.
 */

public convenience init(collectionView: UICollectionView, animation: DelayedCellAnimation)

/**
 Duration of the animation for individual cell.
 */

public var animationDuration: TimeInterval

/**
 Delay between animations of individual cells.
 */

public var nextCellAnimationDelay: TimeInterval

/**
 Animates individual cell.

- parameter cell: Cell to animate.
- parameter indexPath: Index path of the cell.
 */

public func animate(_ cell: UICollectionViewCell, at indexPath: IndexPath)

/**
 Invalidates the animator. Call this before reloading the collection view.
 */

public func invalidate()

Example usage:

// view controller properties
@IBOutlet weak var collectionView: UICollectionView!
var cellAnimator: DelayedCellLoadingAnimator!

// inside viewDidLoad
cellAnimator = DelayedCellLoadingAnimator(collectionView: collectionView, animation: .pop)

// inside collectionView(:cellForItemAt:)
let cell = // dequeue cell
cellAnimator.animate(cell, at: indexPath)
    

SectionedCollectionViewLayout module

/**
 The margins used to lay out content in a section.
 */

public var sectionInset: UIEdgeInsets

/**
 The size to use for cells.
 */

public var itemSize: CGSize

DynamicSpacingCollectionViewLayout has additional properties:

/**
 The translation amount that will be added to the leading cell of a section.
 */

public var expansion: CGFloat

/**
 The factor by which translation of the next cell in section is multiplied, starting from the leading cell.
 */

public var nextCellExpansionFactor: CGFloat

Example usage:

// view controller properties
@IBOutlet weak var collectionView: UICollectionView!

// inside viewDidLoad
let layout = DynamicSpacingCollectionViewLayout()
layout.itemSize = CGSize(width: 40, height: 60)
layout.sectionInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
layout.expansion = 500
layout.nextCellExpansionFactor = 0.5
collectionView.collectionViewLayout = layout

// inside delegate implementation of scrollViewDidScroll:
collectionView.collectionViewLayout.invalidateLayout()

// now scroll through the collection view


  

SnappingCollectionView module

/**
 The value indicating how fast will the collection view be scrolled.
 */

public var scrollSensitivity: CGFloat

/**
 The layout used to organize the collection view’s items.
 */

public var collectionViewLayout: SnappableCollectionViewLayout

public protocol SnappableCollectionViewLayout

/**
 Calculates snapped content offset for given offset inside content view.
 - parameter offset: The point in the content view.
 */

func snappedContentOffset(for offset: CGPoint) -> CGPoint

public class CenteredCellCollectionViewLayout: SnappableCollectionViewLayout

/**
 The size to use for cells.
 */

public var itemSize: CGSize

/**
 Layout attributes for cell in the center.
 */

public var cellAttributesInCenter: CenteredCellCollectionViewLayoutAttributes

/**
 Layout attributes for cell on an edge.
 */

public var cellAttributesOnEdge: CenteredCellCollectionViewLayoutAttributes

public class CenteredCellCollectionViewLayoutAttributes

/**
 The scale of the item.
 */

public var scale: CGFloat

/**
 The rotation angle of the item expressed in radians.
 */

public var rotationAngle: CGFloat

/**
 The transparency of the item. Possible values are between 0.0 (transparent) and 1.0 (opaque).
 */

public var alpha: CGFloat

Example usage:

// view controller properties
@IBOutlet weak var collectionView: SnappingCollectionView!

// inside viewDidLoad
let layout = CenteredCellCollectionViewLayout()
layout.itemSize = CGSize(width: 100, height: 100)
layout.cellAttributesOnEdge.scale = 0.5
layout.cellAttributesOnEdge.alpha = 0.5
snappingCollectionView.collectionViewLayout = layout

// now scroll through the collection view


  

PageTitlesControl module

/**
 Titles of buttons.
 Size of array determines how many buttons will be present.
 */

public var titles: [String]!

/**
 Integer index of selected button.
 */

public var currentIndex: Int = 0

/**
 Relative index.
 It is used for updating underline indicator and interpolation of buttons' colors.
 */

public var currentRelativeIndex: CGFloat = 0

/**
Visual appearance of buttons.
Use PageTitlesAppearance struct.
 */

public var appearance: PageTitlesAppearance

public struct PageTitlesAppearance

/**
 Visual appearance of buttons.
 */

public struct PageTitlesAppearance {
    public var activeTitleColor: UIColor
    public var inactiveTitleColor: UIColor
    public var indicatorColor: UIColor
    public var indicatorHeight: CGFloat
    public var font: UIFont
}

public protocol PageTitlesControlDelegate

/**
Used to inform delegate of PageTitlesControl about index of selected button.
 */

func pageTitlesControl(_ pageTitlesControl: PageTitlesControl, didSelectButtonAtIndex index: Int)

Example usage:

let frame = CGRect(x: 0, y: 0, width: 375, height: 50)
let pageControl = PageTitlesControl(frame: frame)
pageControl.titles = ["Controller 1", "Controller 2", "Controller 3", "Controller 4", "Controller 5"]


  

PageViewController module

@IBOutlet public weak var datasource: PageViewControllerDatasource? @IBOutlet public weak var pageControlDelegate: PageControlDelegate?

public protocol PageViewControllerDatasource

/**
 Datasource.
 */

func viewControllers(for pageViewController: PageViewController) -> [UIViewController]

public protocol PageControlDelegate

/**
 Provides information about current relative index so that delegate can update page control.
 */

func updatePageControlsRelativeIndex(_ relativeIndex: CGFloat) func updatePageControlsIndex(from relativeIndex: CGFloat)

Examples:

It is best used in combination with PageTitlesControl or SmoothPageControl.

 
  

Authors

Five UI Components library team (listed alphabetically)

  • Denis Mendica

  • Ivan Vranjić

  • Mario Radonić

  • Miran Brajša

  • Niko Mikuličić

License

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