Latest 1.0.1
Homepage https://github.com/fiveagency/ios-five-ui-components
License MIT
Platforms ios 9.0
Authors

CI Status
Version
License
Platform

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:

Using CocoaPods

To install it, simply add the following line to your Podfile:

# Podfile
use_frameworks!

target 'YOUR_TARGET_NAME' do
    pod 'FiveUIComponents'
end

Replace YOUR_TARGET_NAME and then, in the Podfile directory, type:

$ pod install

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.

Latest podspec

{
    "name": "FiveUIComponents",
    "version": "1.0.1",
    "summary": "Five's commonly used iOS UI components.",
    "description": "A collection of various UI components we tend to re-use on our projects at Five (http://five.agency).",
    "homepage": "https://github.com/fiveagency/ios-five-ui-components",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "iOS libraries team": "[email protected]"
    },
    "source": {
        "git": "https://github.com/fiveagency/ios-five-ui-components.git",
        "tag": "1.0.1"
    },
    "platforms": {
        "ios": "9.0"
    },
    "source_files": "FiveUIComponents/Classes/**/*",
    "pushed_with_swift_version": "3.0"
}

Pin It on Pinterest

Share This