FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView.

Overview

FlightLayout

Cocoapods Compatible Carthage compatible Platform License Join the chat at https://gitter.im/AntonTheDev/FlightLayout

alt tag

Introduction

FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView. Functionally, it lives somewhere in between the manual process of laying out views from the old days, and the flexibility of Autolayout's dynamic constraint approach.

Some use cases for this framework include the ability to animate views with core animation. Without the overhead of Autolayout's constraints system, we are free to apply animations without the hassle of disabling constraints to perform parametric animations to a layer's properties.

Demo

Since the scope of the documentation is limited to a handful of examples, once you have finished with the reading the documentation below, feel free to clone the project and run the demo app with the project. The demo app provides the ability to pick different options in the method call, once selected, the app will align a demo view on the screen to it's final frame, and provide a code example to reflect it.

An example of how the view controller is laid out in the demo app is can be found here

Installation

Basic Use

The UIView Extension which contains the align method, when called by a view, the calling view will set it's own frame relatively as specified by the parameters in the method call . The method constraints 6 optional parameters with assigned defaults, thus creating very powerful and flexible method signature with lots of possibilities. See below for an in-depth examples below for definitions of each parameter.

There are two enumerators defined for horizontal and vertical alignment. These are the magic options that allow you to align the calling view relative to another frame.


func align(toFrame frame    : CGRect? = nil,
           withSize size    : CGSize? = nil,        
           horizontal       : HorizontalAlign,  
           vertical         : VerticalAlign,
           horizontalOffset : CGFloat = 0.0,
           verticalOffset   : CGFloat = 0.0)

When performing animations, there often comes a need to calculate the frame to perform an animation. The following method returns a pre-calculate the frame based on the method parameters included, without actually setting it on the calling view. The align method actually this to calculate it's final value.

func rectAligned(toFrame frame    : CGRect  = CGRectZero,
                 withSize size    : CGSize? = nil,
                 horizontal       : HorizontalAlign,
                 vertical         : VerticalAlign,
                 horizontalOffset : CGFloat = 0.0,
                 verticalOffset   : CGFloat = 0.0) -> CGRect

Horizontal Alignment

The following horizontal options align the calling view on the horizontal plane, with illustrations below

public enum HorizontalAlign {
    case left           // Align horizontally to the Left
    case leftEdge       // Align horizontally to the Left Edge
    case center         // Align center.y horizontally
    case rightEdge      // Align horizontally to the Right Edge
    case right          // Align horizontally to the Right
}

alt tag

Vertical Alignment

The vertical options align the calling view on the vertical plane, with illustrations below

public enum VerticalAlign {
    case above          // Align vertically Above
    case top            // Align vertically to the top
    case center         // Align center.y vertically
    case base           // Align vertically to the base
    case below          // Align vertically Below
}

alt tag

Example 1

In the following example, first we add the a new view named bigView as a subview, and say you want to align it dead center relative to the superview's bounds. It's as calling align against the view with the following method. This call with align the big bigView against the view's bounds that it was added to, with a horizontal, and vertical, alignment of .center.

view.addSubview(bigView)

bigView.align(toFrame   : view.bounds,     
   			     withSize   : CGSize(width : 140.0, height : 140.0),        
             horizontal : .center,  
             vertical   : .center)

Note: In the case that the calculated frame is the same as the calling views frame, it will not actually set the frame on the caller, it will just exit. This helps avoid glitches during animations, i.e setting the frame on the view that is currently animating, will flicker the view to it's final position.

Example 2

The call in Example 1 can also be expressed by omitting toFrame parameter. In the absence of the toFrame parameter from the method call, the framework automatically assumes that you are intending to align the calling view against the it's superview's bounds.

view.addSubview(bigView)

bigView.align(withSize   : CGSize(width : 140.0, height : 140.0),        
              horizontal : .center,  
              vertical   : .center)
Example 3

What if we implemented a sizeToFit() method on our calling view. In the absence of the withSize parameter from the method call, the framework automatically assumes that you are intending to use the current size of the calling view.

view.addSubview(bigView)

bigView.sizeToFit()
bigView.align(horizontal : .center,  
              vertical   : .center)
Example 4

The above example, can also be expressed by omitting horizontal and vertical parameters. In the absence of the horizontal and vertical parameters from the method call, the framework automatically assumes that you are intending to align the calling view's to the center horizontally, and vertically, by defaulting to .Center.

view.addSubview(bigView)

bigView.sizeToFit()
bigView.align()

Horizontal & Vertical Offset

The horizontalOffset and verticalOffset parameters adjust the calling view's final frame on the horizontal and vertical alignment parameters.

Lets assume we want to center the view and adjust it 20px right, and 20px upward. We can do this by including the horizontalOffset and verticalOffset and update the offset as follows.

view.addSubview(bigView)

bigView.sizeToFit()
bigView.align(horizontal       : .center,  
              vertical         : .center,
              horizontalOffset : 20.0,
              verticalOffset   : -20.0)

License


The MIT License (MIT)
 Copyright (c) 2016 Anton Doudarev  

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:  

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.  

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.  
You might also like...
WHAT WILL YOU LEARN? Onboarding Screen with Page Tab View, state of the app with the new App Storage

WHAT WILL YOU LEARN? Onboarding Screen with Page Tab View, state of the app with the new App Storage Onboarding or a Home screen Understand how the new App Life Cycle works Link View 
 Group Box View Disclosure View Dynamically List View with a loop

An easy way to create and layout UI components for iOS (Swift version).
An easy way to create and layout UI components for iOS (Swift version).

Introduction Cupcake is a framework that allow you to easily create and layout UI components for iOS 8.0+. It use chaining syntax and provides some fr

Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.
Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.

QuickLayout QuickLayout offers an additional way, to easily manage the Auto Layout using only code. You can harness the power of QuickLayout to align

An extension that simplifies the work with Swift AutoLayout by writing cleaner, more natural and easy-reading code.

Installation For now you're able to clone repo in your project or download ZIP folder manually. git clone https://github.com/votehserxam/AutoLayout.gi

Auto Layout made easy
Auto Layout made easy

EasyPeasy is a Swift framework that lets you create Auto Layout constraints programmatically without headaches and never ending boilerplate code. Besi

Auto Layout In Swift Made Easy

Swiftstraints Swiftstraints can turn verbose auto-layout code: let constraint = NSLayoutConstraint(item: blueView, attr

An flexbox layout aimed at easy to use, which depend on Yoga.
An flexbox layout aimed at easy to use, which depend on Yoga.

DDFlexbox A flexbox framework for easy using. Install pod 'DDFlexbox' Template install Recommend using templates to create flexbox views. cd Script/

Easy Auto Layout

RKAutoLayout Easy AutoLayout TL;DR let view1: UIView = UIView() let view2: UIView = UIView() view1.addSubview(view2) /// Add all view1.rk_alAdd(

An example project showing how to use `overrideUserInterfaceStyle` to build an in-app light/dark mode switch

OverrideDarkMode A sample project to show how using overrideUserInterfaceStyle enables having a dark / light mode switch directly in the app, while st

Comments
  • What relations between views?

    What relations between views?

    Let's say I want to align a view called B on a view called A. Does these view have parentship for the framework to work?

    I tried the following code but results are not as expected.

    view.addSubview(A)
    view.addSubview(B)
    
    A.center = view.center
    
    B.align(toFrame : A.bounds,
                 horizontal : .leftEdge,
                 vertical   : .above,
                 verticalOffset:-10)
    

    expected

    But Bis not displayed because it is placed on the top outside of the main view.

    opened by ghost 3
  • A lot of errors in readme

    A lot of errors in readme

    There are a lot of errors in readme.

    Some examples.

    FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView. Functionally, it lives somewhere in between the manual process of laying out views from the old days, and the flexibility of Autolayout's dynamic contstraint approach.

    The UIView Extension which contains the align method, when called by a view, the calling view will set it's own frame relatively, as specified by the parameters in the method call . The method containts 6 optional paramaters with assigned defaults, thus creating very poweful and flexible method signature with lots of possibilities. See below for an indepth examples below for definitions of each parameter.

    opened by ghost 2
Owner
Anton
Lead Mobile Architect / Engineer
Anton
Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button to button when the user presses on them.

Swift-Underlined-Button-Bar Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button

Justin Cook 3 Aug 4, 2022
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

Malith Nadeeshan 1 Jan 16, 2022
(Swift) iOS UIView layout reimagined

<UIViewprint/> iOS view layout completely reimagined Blueprint /ˈbluːˌprɪnt/ : a detailed outline or plan of action: a blueprint for success. class Vi

Alex Winston 8 Aug 26, 2022
UIView extension that adds dragging capabilities

YiViewDrag Installation YiViewDrag is available through CocoaPods. To install it, simply add the following line to your Podfile: pod 'YiViewDrag' Usag

coderyi 1 Jan 20, 2022
Auto Layout (and manual layout) in one line.

Auto Layout (and manual layout) in one line. Quick Look view.bb.centerX().below(view2).size(100) It’s equivalent to iOS 9 API: view.centerXAnchor.cons

Javier Zhang 74 Oct 19, 2022
AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift

AppStoreClone Understanding the complex layout of app store using UICompositiona

Dheeraj Kumar Sharma 8 Dec 28, 2022
A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.

WrapLayout A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewF

Hiroshi Kimura 6 Sep 27, 2022
MyLayout is a simple and easy objective-c framework for iOS view layout

MyLayout is a powerful iOS UI framework implemented by Objective-C. It integrates the functions with Android Layout,iOS AutoLayout,SizeClass, HTML CSS float and flexbox and bootstrap. So you can use LinearLayout,RelativeLayout,FrameLayout,TableLayout,FlowLayout,FloatLayout,PathLayout,GridLayout,LayoutSizeClass to build your App 自动布局 UIView UITableView UICollectionView RTL

欧阳大哥2013 4.2k Dec 30, 2022
🇰🇷 An app that helps non Korean speakers to learn Hangul easily and effectively.

?? HangulKing HangulKing is the fastest way to the throne of Hangul, the Korean alphabets! HangulKing helps the users learn Hangul easily, providing m

개발자아카데미_포스텍 7 Nov 26, 2022
Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.

CGLayout Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Has cross-hierarchy coordinate space. Implemen

Koryttsev Denis 45 Jun 28, 2022