Quickstart: Build a Flexbox layout with C# / script

This is a short tutorial to build flexbox procedural UI, using FlexBuilder for Unity3D.FlexContainer

Pre-requisites:

  • Unity3D
  • FlexBuilder (from the Unity Asset Store)

See also:

Building a Layout ... in script

Everything from the Quickstart using GUI tutorial applies here - you still need to create a RootFlexContainer, add an initial FlexContainer, and then add all your child FlexContainers and FlexItems.

You can do this manually, creating each GameObject, adding each Component.

But you can also use the same internal hooks that FlexBuilder's own UI uses, saving you a lot of time and effort, and giving you automatic support for Undo, etc.

Warning

This tutorial assumes you are comfortable with writing custom scripts in C#/Unity3D, and contains only the minimal detail. If you are beginner or intermediate you would probably do better to start with the GUI-bassed tutorial.myParentContainer

Note

This is a barebones tutorial intended to get you started and point you to some key APIs you'll want to use. I'll update this in future with more details.

Fully manual approach

You must stick to the rules for constructing a Flexbox hierarchy:

  1. The topmost GameObject in your flexbox layout always has a single RootFlexContainer, and no FlexItems or FlexContainers
  2. The RootFlexContainer must be added as a child of a Unity Canvas, or of a GameObject which has a Unity RectTransform
  3. FlexItems have to be children of FlexContainers
  4. If a FlexContainer is a child of another FlexContainer, it MUST ALSO have a FlexItem attached (to control its own size)

RootFlexContainer

Create a GameObject on your Canvas that has a RectTransform -- note there is a major bug in Unity where if you do this using "new GameObject()" it will have a Transform instead of a RectTransform, so make sure you don't do that.

Attach a RootFlexContainer using AddComponent<RootFlexContainer>().

Finally: make sure you have a LayoutAlgorithm assigned to the RootFlexContainer -- since you're creating this manually, it won't pick up the project-wide default one. Several LayoutAlgorithms ship with FlexBuilder as assets in the "LayoutAlgorithms" folder.

FlexContainer

Create a GameObject and make it a child of an existing FlexContainer (or of your RootFlexContainer if this is your first FlexContainer).

Also add a FlexItem: AddComponent<FlexItem>() so that the parent FlexContainer/RootFlexContainer can control this child FlexContainer.

FlexItem

Create a GameObject and make it a child of an existing FlexContainer.

Semi-manual: using the internal APIs

These APIs are specifically designed for you to use in your own code, and be confident that they are exactly the same code as the GUI uses.

They are currently located in: NinjaTools.FlexBuilder.CreateFlexComponents

RootFlexContainer

Use the convenience method to create your RootFlexContainer:

public static RootFlexContainer AddFlexRootContainer( this RectTransform rt, IFlexboxLayoutAlgorithm initialAlgorithm, Canvas rootCanvas = null )

This method is designed as a C# Extension Method, so instead of calling it directly, you invoke it on (any) RectTransform, e.g. your Canvas, or any GameObject on your Canvas:

myCanvas.AddFlexRootContainer( layoutAlgorithm )

If you don't have a Canvas yet, or don't want to find it, there's an alternative method that will automatically find your Canvas and use it, or create a new correctly-configured one for you:

CreateFlexComponents.CreateFlexRootContainerWithCanvasEtc( layoutAlgorithm );

FlexContainer

When adding a FlexContainer, it always needs a FlexItem (because you're adding it to a parent FlexContainer/RootFlexContainer).

myParentContainer.AddChildFlexContainerAndFlexItem( "New FlexContainer", out FlexItem newFlexItem );

That method returns the created FlexContainer, and also lets you grab (and modify) its attached FlexItem via the "out" parameter.

FlexItem

This one is the simplest:

myParentContainer.AddChildFlexItem( "New FlexItem" );

Additional API methods

There are also a bunch of more complex and powerful helper methods available. See the API docs for more details.