Creating Custom Elements

Conforming types represent a rectangular content area in a two-dimensional layout space.

---

The ultimate purpose of an element is to provide visual content. This can be done in two ways:

• By providing a view description (ViewDescription).

• By providing child elements that will be displayed recursively within the local coordinate space.

---

A custom element might look something like this:

struct MyElement: Element {

    var backgroundColor: UIColor = .red

    // Returns a single child element.
    var content: ElementContent {
        return ElementContent(child: Label(text: "😂"))
    }

    // Providing a view description means that this element will be
    // backed by a UIView instance when displayed in a `BlueprintView`.
    func backingViewDescription(with context: ViewDescriptionContext) -> ViewDescription? {
        return UIView.describe { config in
            config.bind(backgroundColor, to: \.backgroundColor)
        }
    }

}

See more

public protocol Element

Custom elements commonly use another element to actually display content. For example, a profile element might display an image and a few labels inside a Column element. The ProxyElement protocol is provided to make that task easier.

Conforming types only need to implement elementRepresentation in order to generate an element that will be displayed.

See more

public protocol ProxyElement : Element

Represents the content of an element.

See more

public struct ElementContent

Contains a description of a UIView instance. A description includes logic to handle all parts of a view lifecycle from instantiation onward.

View descriptions include:

• The view’s class.
• How an instance of the view should be instantiated.
• How to update a view instance by setting properties appropriately.
• Which subview of a view instance should be used as a contain for additional subviews.
• How to animate transitions for appearance, layout changes, and disappearance.
• Hooks to be called during lifecycle events.

A view description does not contain a concrete view instance. It simply contains functionality for creating, updating, and animating view instances.

See more

public struct ViewDescription

The transition used when layout attributes change for a view during an update cycle.

‘Inherited’ transitions: the ‘inherited’ transition is determined by searching up the tree (not literally, but this is the resulting behavior). The nearest ancestor that defines an animation will be used, following this logic:

• Ancestors with a layout transition of none will result in no inherited animation for their descendents.
• Ancestors in the tree with a layout transition of inherited will be skipped, and the search will continue up the tree.
• Any ancestors in the tree with a layout transition of inheritedWithFallback will be used if they do not themselves inherit a layout transition from one of their ancestors.
• Ancestors with a layout transition of specific will always be used for their descendents inherited animation.
• If no ancestor is found that specifies a layout transition, but the containing BlueprintView has the element property assigned from within a UIKit animation block, that animation will be used as the inherited animation.

See more

public enum LayoutTransition

The transition used when a view is inserted or removed during an update cycle.

See more

public struct VisibilityTransition