FrameLayoutKit

A super fast and easy-to-use layout library for iOS. FrameLayoutKit supports complex layouts, including chaining and nesting layout with simple and intuitive operand syntax.

It simplifies the UI creation process, resulting in cleaner and more maintainable code.

Why Use FrameLayoutKit?

Say NO to autolayout constraint nightmare:

<table> <tr><td> Autolayout </td> <td> FrameLayoutKit </td></tr> <tr> <td> <img alt="No" src="images/no_constraint.png"> </td> <td> <img alt="Yes!!!" src="images/frameLayoutSyntax.png"> </td> </tr> </table>

Table of Contents

• Installation
• Core Components
• Basic Usage
• DSL Syntax
• Examples
• Performance
• Requirements
• Author
• License

Installation

FrameLayoutKit is available through Swift Package Manager (Recommended) and CocoaPods:

Regardless of the method, make sure to import the framework into your project:

import FrameLayoutKit

Swift Package Manager (Recommended)

Swift Package Manager is recommended to install FrameLayoutKit.

1. Click File
2. Add Packages...
3. Enter the git URL for FrameLayoutKit:

https://github.com/kennic/FrameLayoutKit.git

CocoaPods

FrameLayoutKit can also be installed as a CocoaPod. To install, add the following line to your Podfile:

pod "FrameLayoutKit"

Core Components

FrameLayoutKit includes the following core components:

FrameLayout

The most basic class, manages a single view and adjusts its size and position based on configured properties.

StackFrameLayout

Manages multiple views in rows (horizontal) or columns (vertical), similar to UIStackView but with higher performance and more options.

• HStackLayout: Horizontal layout
• VStackLayout: Vertical layout
• ZStackLayout: Stacked layout (z-index)

GridFrameLayout

Arranges views in a grid, with customizable number of columns and rows.

FlowFrameLayout

Arranges views in a flow, automatically wrapping to the next line when there's not enough space.

DoubleFrameLayout

Manages two views with various layout options.

ScrollStackView

Combines UIScrollView with StackFrameLayout to create a scrollview that can automatically layout its child views.

Tutorial and Documentation:

See Tutorial by Codebase2Tutorial (Recommended)

Read full document by DeepWiki

Basic Usage

Creating and Configuring Layouts

// Create a vertical layout
let vStackLayout = VStackLayout()
vStackLayout.spacing = 10
vStackLayout.distribution = .center
vStackLayout.padding(top: 20, left: 20, bottom: 20, right: 20)

// Add views to the layout
vStackLayout.add(view1)
vStackLayout.add(view2)
vStackLayout.add(view3)

// Add the layout to a parent view
parentView.addSubview(vStackLayout)

// Update the layout's frame
vStackLayout.frame = parentView.bounds

Using Operator Syntax (Recommended)

FrameLayoutKit provides the + operator syntax to easily add views to layouts:

// Add a single view
vStackLayout + view1

// Add an array of views
vStackLayout + [view1, view2, view3]

// Add spacing
vStackLayout + 10 // Add 10pt spacing

// Add a child layout
vStackLayout + hStackLayout

Configuring View Properties

// Configure alignment
(vStackLayout + view1).alignment = (.center, .fill)

// Configure fixed size
(vStackLayout + view2).fixedSize = CGSize(width: 100, height: 50)

// Add a flexible view (can expand)
(vStackLayout + view3).flexible()

Chained Syntax (Recommended)

vStackLayout
    .distribution(.center)
    .spacing(16)
    .flexible()
    .fixedHeight(50)
    .aligns(.top, .center)
    .padding(top: 20, left: 20, bottom: 20, right: 20)

DSL Syntax (Experimental)

FrameLayoutKit provides a DSL (Domain Specific Language) syntax similar to SwiftUI, making layout creation more intuitive and readable:

// Create VStackLayout with DSL syntax
let vStackLayout = VStackView {
    titleLabel
    descriptionLabel
    SpaceItem(20) // Add a 20pt space
    Item(actionButton).minWidth(120) // Customize the button's minimum width
}

// Create HStackLayout with DSL syntax
let hStackLayout = HStackView {
    StackItem(imageView).fixedSize(width: 50, height: 50)
    VStackView {
        titleLabel
        subtitleLabel
    }.spacing(5)
    FlexibleSpace() // Add flexible space
    StackItem(button).align(vertical: .center, horizontal: .right)
}

Main DSL Components

• StackItem: Wraps a view to add to a stack with additional options
• SpaceItem: Adds fixed spacing
• FlexibleSpace: Adds flexible spacing (can expand)
• Item: Similar to StackItem but with more options

Examples

Here are some examples of how FrameLayoutKit works:

<table> <tr><td> Source </td> <td> Result </td></tr> <tr> <td>

let frameLayout = HStackLayout()
frameLayout + VStackLayout {
   ($0 + earthImageView).alignment = (.top, .center)
   ($0 + 0).flexible() // add a flexible space
   ($0 + rocketImageView).alignment = (.center, .center)
}
frameLayout + VStackLayout {
   $0 + [nameLabel, dateLabel] // add an array of views
   $0 + 10 // add a space with a minimum of 10 pixels
   $0 + messageLabel // add a single view
}.spacing(5.0)

frameLayout
.spacing(15)
.padding(top: 15, left: 15, bottom: 15, right: 15)
.debug(true) // show dashed lines to visualize the layout

</td> <td> <img alt="result 1" src="images/helloWorld.png"> </td> </tr> </table> <table> <tr><td> Source </td> <td> Result </td></tr> <tr> <td>

let frameLayout = VStackLayout {
  ($0 + imageView).flexible()
  $0 + VStackLayout {
     $0 + titleLabel
     $0 + ratingLabel
  }
}.padding(top: 12, left: 12, bottom: 12, right: 12)
 .distribution(.bottom)
 .spacing(5)

</td> <td> <img alt="result 1" src="images/example_1.png"> </td> </tr> </table> <table> <tr><td> Source </td> <td> Result </td></tr> <tr> <td>

let posterSize = CGSize(width: 100, height: 150)
let frameLayout = ZStackLayout()
frameLayout + backdropImageView
frameLayout + VStackLayout {
 $0 + HStackLayout {
  ($0 + posterImageView).fixedSize(posterSize)
    $0 + VStackLayout {
      $0 + titleLabel
      $0 + subtitleLabel
    }.padding(bottom: 5).flexible().distribution(.bottom)
  }.spacing(12).padding(top: 0, left: 12, bottom: 12, right: 12)
}.distribution(.bottom)

</td> <td> <img alt="result 2" src="images/example_2.png"> </td> </tr> </table> <table> <tr><td> Source </td> <td> Result </td></tr> <tr> <td>

let buttonSize = CGSize(width: 45, height: 45)
let cardView = VStackLayout()
  .spacing(10)
  .padding(top: 24, left: 24, bottom: 24, right: 24)

cardView + titleLabel
(cardView + emailField).minHeight = 50
(cardView + passwordField).minHeight = 50
(cardView + nextButton).fixedHeight = 45
(cardView + separateLine)
  .fixedContentHeight(1)
  .padding(top: 4, left: 0, bottom: 4, right: 40)
cardView + HStackLayout {
 ($0 + [facebookButton, googleButton, appleButton])
  .forEach { $0.fixedContentSize(buttonSize) }
}.distribution(.center).spacing(10)

</td> <td> <img alt="result 2" src="images/example_3.png"> </td> </tr> </table>

Key Properties

FrameLayout

• targetView: The view managed by this layout
• edgeInsets: Padding around the view
• contentAlignment: Content alignment (top, center, bottom, left, right, fill, fit)
• Size & Content Size:
  • minSize/maxSize, fixedSize: Minimum/maximum/fixed size of the layout.
  • minContentSize/maxContentSize, fixedContentSize: Minimum/maximum/fixed size of the targetView.
  • extendSize (extendWidth, extendHeight): Additional size for the contentSize.
  • heightRatio: Defines height based on width.
  • isIntrinsicSizeEnabled: Controls if sizeThatFits uses targetView's intrinsic size.
• Flexibility & Layout Behavior:
  • isFlexible, flexibleRatio: For flexible layouts within a stack.
  • allowContentVerticalGrowing/Shrinking, allowContentHorizontalGrowing/Shrinking: Controls how targetView adapts to FrameLayout's bounds.
• View Hierarchy & State:
  • parent: The containing FrameLayout.
  • bindingViews, bindingEdgeInsets, lazyBindingViews: For binding other views to targetView's frame.
  • ignoreHiddenView, isEnabled, isEmpty: Control layout behavior based on visibility and enabled state.
• Positioning:
  • translationOffset (translationX, translationY): For manual position adjustments.
• Callbacks:
  • willSizeThatFitsBlock: A block that will be called before sizeThatFits is called.
  • willLayoutSubviewsBlock: A block that will be called before layoutSubviews is called.
  • didLayoutSubviewsBlock: A block that will be called after layoutSubviews has finished.
• Debugging:
  • debug, debugColor: For visualizing layout frames.
• **S