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.