A simple and easy way to keep your custom views properly layout on iPhone X

by iOS Example

ExtendedEdges

A simple and easy way to keep your custom views properly layout on iPhone X.

Requirement

  • Xcode 9.0+
  • Swift 4.0+
  • iOS 9.0+

Installation

  1. Download the project
  2. Open the project, then drag the UIView+ExtendedEdges.swift file into your project.

Usages

The APIs are simple.
Use 2 properties to configure extended edges, and 2 (optional) properties to configure separator.
Check ViewController.swift in project for detail usages.

public extension UIView {

    enum Edge {
        case top
        case leading
        case trailing
        case bottom
    }
}

public extension UIView {

    /// The view's edges that need to extended.
    ///
    /// The default value is an empty set, which means not extend any edges.
    var extendedEdges: Set<Edge> { get set }

    /// The view's background view that extend to superview's edge.
    ///
    /// The default value is a view with clear background color.
    var backgroundViewForEdgeExtension: UIView { get set }
}

public extension UIView {

    /// The view's edge to place separator.
    ///
    /// Default value is `Edge.top`, which means place separator at the view's top edge.
    ///
    /// Set a new value will create and add a new separator to the view if current don't have one.
    var separatorEdge: Edge { get set }

    /// The separator view for indicated `separatorEdge`.
    ///
    /// The default value is a view with background color `UIColor.black.withAlphaComponent(0.3)` (iOS standard separator color).
    var separator: UIView { get set }
}

Example

let yourCustomToolbar = UIView()
view.addSubview(yourCustomToolbar)

// configure Auto Layout constraints
yourCustomToolbar.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    yourCustomToolbar.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    yourCustomToolbar.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    yourCustomToolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor),
    yourCustomToolbar.heightAnchor.constraint(equalToConstant: 64),
    ])

// configure extended edges and background view
yourCustomToolbar.extendedEdges = [.leading, .trailing, .bottom]
yourCustomToolbar.backgroundViewForEdgeExtension = UIVisualEffectView(effect: UIBlurEffect(style: .extraLight))

// add a separator to view's top edge
yourCustomToolbar.separatorEdge = .top

GitHub