Cookbook

This page describes some common usage of Baya with short code snippets.

Layout groups of BayaLayoutables

Create a Linear layout

Align BayaLayoutables in a single direction, either vertically or horizontally. Specify the direction with the orientation attribute.

let layout = [view1, view2, view3].layoutLinearly(
    orientation: .vertical)

Split a frame into equal segments

Distribute the available space evenly among a group of BayaLayoutables. Use the orientation to specify if the space is split vertically or horizontally.

let layout = [view1, view2, view3].layoutAsEqualSegments(
    orientation: .horizontal)

Place a header and a footer around a BayaLayoutable

Layout a BayaLayoutable as flexible content with a vertical orientation. The header and footer are optional.

let layout = view1.layoutFlexible(
    orientation: .vertical,
    elementBefore: view2,
    elementAfter: view3)

In most cases you want to strech the content to cover the available height. Use it in combination with LayoutMatchingParentHeight().

let content = view1.layoutMatchingParentHeight()
let layout = content.layoutFlexible(
    orientation: .vertical,
    elementBefore: view2,
    elementAfter: view3)
    .layoutMatchingParentHeight()

Just group BayaLayoutables together

Use layoutAsFrame() to group BayaLayoutables without applying any specific layout. This might be handy if you just want to align some element differently in a given space.

let group = [
    view1.layoutGravitating(horizontally: .right, vertically: .top),
    view2.layoutGravitating(horizontally: .centerX, vertically: .bottom)]
let layout = group.layoutAsFrame()

Layout a single BayaLayoutable

Match the size of the parent BayaLayoutable

By default a BayaLayoutable asks only for the minimal amount of space needed. If you want the layout to take as much space as the parent use layoutMatchingParent().

let layout = view1.layoutMatchingParent()

To match only the with or the height of the parent us either layoutMatchingParentWidth() or layoutMatchingParentHeight()

Align a BayaLayoutable within the parent

You can graviate a BayaLayoutable horizontally and vertically. To gravitate while using the maximum available size, specifiy matching parent.

let layout = view1
    .layoutGravitating(to: .right)
    .layoutMatchingParentWidth()

let layout = view1
    .layoutGravitating(horizontally: .right, vertically: .bottom)
    .layoutMatchingParent()

Fixed size

Layout a BayaLayoutable with a fixed size. Useful for profile pictures. You can either specifiy a fixed width or height or both.

let layout = view1.layoutWithFixedSize(
    width: 48,
    height: 48)

let layout = view2.layoutWithFixedSize(
    width: 100)

Layout as square

Layout an BayaLayoutable as a square. You can optionally specify the reference side based on which the square will be calculated.

let layout = view1.layoutAsSquare()

let layout = view2.layoutAsSquare(referenceSide: .vertical)

Layout a view with a third of its parent's width

To layout a BayaLayoutable using a percentage of the parent frame use layoutWithPortion(ofWidth:ofHeight:). For a third of the parents width use:

let layout = view1.layoutWithPortion(ofWidth: 0.33)

Common cases

Layout a UIScrollView and its contents

Use layoutScrollContent(container:orientation:) to layout a BayaLayoutable if its UIViews are contained within a UIScrollView.

let scrollView = UIScrollView()
scrollView.addSubview(view1)
scrollView.addSubview(view2)

let layout = [view1, view2]
    .layoutLinearly(orientation: .vertical)
    .layoutScrollContent(container: scrollView)

Layout pages using a UIScrollView

Set the size of the UIScrollView's content to a given number of pages using layoutPagedScrollContent(container:pages:spacing:orientation:). Equally distribute the space to BayaLayoutables with layoutAsEqualSegments(orientation:)

let layout = [view1, view2, view3]
    .layoutAsEqualSegments(orientation: .horizontal)
    .layoutPagedScrollContent(
        container: scrollView,
        pages: 2,
        orientation: .horizontal)

Layout using a UIView with subviews.

Baya assumes a flat view hierarchy. If you want to layout the subviews and the container using Baya you need to reset the origin.

view1.addSubView(view2)
view1.addSubView(view3)

let subLayout = [view2, view3]
    .layoutLinearly(orientation: .vertical)
    .layoutResettingOrigin()

let layout = [view1, subLayout]
    .layoutAsFrame()
    .layoutGravitating(horizontally: .centerX, vertically: .centerY)
    .layoutMatchingParent()