DOCSEARCHbyAlgolia
Submit Docs

FlexLayout Documentation

repository·master·Indexed 24 days ago

https://github.com/layoutbox/flexlayout

A highly optimized Swift interface for the Yoga flexbox implementation, providing a concise, chainable syntax for creating complex layouts in iOS applications. It serves as a high-performance alternative to UIStackView and is a companion to PinLayout. Requires iOS 13.0+, Xcode 13.0+, and Swift 5.5.

Tokens
6.1K
Snippets
19
Records
35
Agent score
80%

What's inside FlexLayout

  1. FlexLayout usage examples and implementations

    master

    The FlexLayout repository provides several example implementations to demonstrate different use cases:

    • Intro Example: A basic introduction to FlexLayout usage.
    • Ray Wenderlich Yoga Tutorial: A complete implementation of the Ray Wenderlich Yoga tutorial.
    • UITableView with variable size cells: Demonstrates how to use FlexLayout for UITableView cells with dynamic heights/sizes.
    • UICollectionView with variable size cells: Demonstrates how to use FlexLayout for UICollectionView cells with dynamic sizes.
    • Yoga's examples Implementation: A collection of implementations of the official Yoga examples across different languages (C, Obj-C, Java, C#, Android).

  2. FlexLayout Performance Overview

    master
    FlexLayout is designed for high performance, particularly in complex list scenarios like UICollectionView and UITableView. Benchmarks indicate that FlexLayout (and its companion PinLayout) are significantly faster than Auto Layout—often between 8x and 12x faster across various iPhone models. It performs comparably to manual layout (setting UIView frames directly), making it suitable for performance-critical UI components.

  3. Relationship between FlexLayout and PinLayout

    master

    FlexLayout is a companion to PinLayout. While they share similar syntax and method names, they serve different purposes:

    • FlexLayout: Best for laying out many views using CSS Flexbox principles. It is highly optimized and versatile.
    • PinLayout: Inspired by CSS absolute positioning. It is best for fine-grained control, animations, and layouting one view at a time.

    Interoperability:

    • A view can be laid out using FlexLayout, PinLayout, or both.
    • A view laid out with PinLayout can be embedded inside a FlexLayout container, and vice versa.

  4. Keep view size in the main-axis direction

    master
    By default, FlexLayout sets the view's flex shrink value to 1, meaning the view will reduce its size (height in a column, width in a row) if it is larger than its container. To maintain the original view size in the main-axis direction, set shrink to 0.

  5. Understand FlexLayout axes and directions

    master

    FlexLayout operates on two axes: the main axis and the cross axis. The main axis is determined by the container's direction property, and the cross axis runs perpendicular to it.

    • If direction is .column (default), the main axis is vertical.
    • If direction is .row, the main axis is horizontal.

  6. Understand FlexLayout's variations from CSS Flexbox

    master

    FlexLayout uses more concise naming conventions than CSS and React Native by removing the flex prefix from properties.

    Property Name Mapping

    FlexLayout NameCSS NameReact Native Name
    directionflex-directionflexDirection
    wrapflex-wrapflexWrap
    growflex-growflexGrow
    shrinkflex-shrinkflexShrink
    basisflex-basisflexBasis
    startflex-startflexStart
    endflex-endflexEnd

    Default Value Differences

    PropertyFlexLayout defaultCSS defaultReact Native default
    directioncolumnrowcolumn
    justifyContentstartstartstart
    alignItemsstretchstretchstretch
    alignSelfautoautoauto
    alignContentstartstretchstart
    grow000
    shrink010
    basis0auto0
    wrapnoWrapnowrapnoWrap

    Note: FlexLayout does not support the order property. Item order is determined by the container's UIView.subviews array.

  8. How to use FlexLayout containers

    master

    Using a FlexLayout container involves two primary steps:

    1. Setup the container: Initialize your flexbox structure using a chainable syntax. You can define containers and their children (items) using .define { (flex) in ... } blocks. This structure can be altered later.
    2. Layout the container: The layout logic should typically be called from layoutSubviews() (or lifecycle methods like viewWillTransition(to: ...)).
      • First, position the container itself (e.g., using PinLayout or setting its frame).
      • Second, call flex.layout(mode: .adjustHeight) (or another mode) to layout the flexbox children within that container.

    Example of a basic column and row structure:

    // 1. Setup the container structure
rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in
     // Row container
     flex.addItem().direction(.row).define { (flex) in
         flex.addItem(imageView).width(100).aspectRatio(of: imageView)
         
         // Column container
         flex.addItem().direction(.column).paddingLeft(12).grow(1).define { (flex) in
             flex.addItem(segmentedControl).marginBottom(12).grow(1)
             flex.addItem(label)
         }
     }
     
     flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)
     flex.addItem(bottomLabel).marginTop(12)
}

// 2. Layout the container in layoutSubviews()
override func layoutSubviews() {
    super.layoutSubviews()

    // Position the container (using PinLayout here)
    rootFlexContainer.pin.top().left().width(100%).marginTop(topLayoutGuide)

    // Layout the flexbox children and adjust height automatically
    rootFlexContainer.flex.layout(mode: .adjustHeight)
}

  9. Install FlexLayout via Carthage

    master

    To integrate FlexLayout using Carthage, follow these steps:

    1. Add the dependency to your Cartfile:
    github "layoutBox/FlexLayout"
    1. Run the following commands to resolve dependencies and build:
    carthage update --no-build
(cd ./Carthage/Checkouts/FlexLayout && pod install)
carthage build --use-xcframeworks
    1. Add the resulting FlexLayout.xcframework to your Xcode project under the Embedded Binaries section.

  11. Install FlexLayout via Swift Package Manager

    master

    For Swift Packages

    To include FlexLayout as a dependency in another Swift Package, add this to your Package.swift:

    .package(url: "https://github.com/layoutBox/FlexLayout.git", from: "1.3.18")

    For Xcode Targets

    Use the Xcode menu: File -> Swift Packages -> Add Package Dependency and provide the repository URL.