Containers & Layouts

Yes, yes we have layout managers for general use, can you believe it?.

If you need to show raw data in a traditional way, you can use a simple grid… talk to your designer. Come one, you can implement a really impressive and unique user experience with these basics controls that can contain others.

They are standards and works like in other frameworks/libraries. Let me show you. First thing you need is to declare a Container and specify what Layout you want to use. In CellSDK we have:

- GridLayout

- FlowLayout

- BorderLayout

- CoordLayout

Important: A Container defaults Size is 320×320.

To see everyone in action, you know what to do, create a new project and name it “Containers”. Now, we are going to see how every Layout works:

1 GridLayout

A GridLayout places components in a grid of cells. Each cell is the same size, and the component added uses all the available space. By default, the distance between cells is 5 pixels, but you can change this with the constructor. Let see the constructors:

- GridLayout(int rows, int columns): Create a grid with the rows and columns indicated, so the number of available cells is: rows*columns. The distances between cells are 5 pixels.

- GridLayout(int rows, int columns, int hgap, int vgap):the only difference with the other constructor is that you can specify the distances between cells.

Let prove this by opening the Application.cs and add these lines at the end of the Initialize() method:

//Add your code here 
Container<GridLayout> gridContainer = new Container<GridLayout>(new GridLayout(6,2)); 
gridContainer.BackgroundColor = Color.Transparent; 
gridContainer.Layout.AddComponent(new Label("One")); 
gridContainer.Layout.AddComponent(new Label("Two")); 
gridContainer.Layout.AddComponent(new Label("Three")); 
gridContainer.Layout.AddComponent(new Label("Four")); 
gridContainer.Layout.AddComponent(new Label("Five")); 
gridContainer.Layout.AddComponent(new Label("Six")); 
gridContainer.Layout.AddComponent(new Label("Seven")); 
gridContainer.Layout.AddComponent(new Label("Eight")); 
gridContainer.Layout.AddComponent(new Label("Nine")); 
gridContainer.Layout.AddComponent(new Label("Ten")); 
gridContainer.Layout.AddComponent(new Label("Eleven")); 
gridContainer.Layout.AddComponent(new Label("Twelve")); 
gridContainer.Size = new Vector2(400, 400);
 
AddComponent(gridContainer, 50, 50);

We are creating a grid with 3 rows and 12 columns, and modifying the container’s default size (320×320) to 400×400. If we build and run this code we will get this:

containers1

To modify the distance between the cells modify the gridContainer constructor in this way:

Container<GridLayout> gridContainer = new Container<GridLayout>(new GridLayout(3,4,20,20));

2 FlowLayout

Now we will learn to use the FlowLayout one, which is very similar but it has only a constructor without parameters. Just because in a Flowlayout you just add components in a row, sized at their preferred size. If the horizontal size space in the container is too small to put the components in a row, the FlowLayoutuses multiple rows.

Comment the code from GridView sample and add this instead:

Container<FlowLayout> flowContainer = new Container<FlowLayout>(new FlowLayout()); 
flowContainer.BackgroundColor = Color.Transparent; 
flowContainer.Size = new Vector2(150, 10); 
flowContainer.Layout.AddComponent(new Label("One")); 
flowContainer.Layout.AddComponent(new Label("Two")); 
flowContainer.Layout.AddComponent(new Label("Three")); 
flowContainer.Layout.AddComponent(new Label("Four")); 
flowContainer.Layout.AddComponent(new Label("Five")); 
flowContainer.Layout.AddComponent(new Label("Six")); 
flowContainer.Layout.AddComponent(new Label("Seven"));
 
AddComponent(flowContainer, 100, 400);

Note that the size is 150×10, and the added components exceed the size, so new rows are added:

containers2

3 BorderLayout

A BorderLayout has five sections:

- North

- East

- Center

- West

- South

You can specify the distance between the five cells in the same way you did with GridLayout. Borderlayout has two constructors:

- BorderLayout(): Creates a default border layout with 5 pixels for the distance between cells, and a 33% of space reserved for east and west positions, and a 20% for north and south, the rest is for the center position.

- BorderLayout(float hgap, float vgap): The only difference with the parameter-less constructor is that with hgap and vgap you are modifying de distance between cells.

Come on and see it in action, comment the code from FlowLayout sample and add these lines:

Label lblCenter;
Label lblEast;
Label lblNorth;
Label lblSouth;
Label lblWest;
lblCenter = new Label("Center");
lblEast = new Label("East");
lblNorth = new Label("North");
lblSouth = new Label("South");
lblWest = new Label("West");
lblCenter.Align = Label.AlignType.MIDDLECENTER;
lblEast.Align = Label.AlignType.MIDDLECENTER;
lblNorth.Align = Label.AlignType.MIDDLECENTER;
lblSouth.Align = Label.AlignType.MIDDLECENTER;
lblWest.Align = Label.AlignType.MIDDLECENTER;
Container<BorderLayout> borderContainer = new Container<BorderLayout>(new BorderLayout());
borderContainer.BackgroundColor = Color.Transparent;
borderContainer.Layout.AddComponent(BorderLayout.Organization.CENTER, lblCenter);
borderContainer.Layout.AddComponent(BorderLayout.Organization.EAST, lblEast);
borderContainer.Layout.AddComponent(BorderLayout.Organization.NORTH, 25, lblNorth);
borderContainer.Layout.AddComponent(BorderLayout.Organization.SOUTH, 25, lblSouth);
borderContainer.Layout.AddComponent(BorderLayout.Organization.WEST, lblWest);
AddComponent(borderContainer, 0, 0);
borderContainer.Size = new Vector2(Width, Height/2);

Build and run and you will see:

containers3

4 CoordLayout

The last one, but not less important is the Coordlayout. In this one we can tell exactly where we want to place a component in the Layout.AddComponent() with a X and Y coordinate taking as the 0,0 the left upper corner.

So comment the code from BorderLayout sample and add these lines:

Container<CoordLayout> coordContainer = new Container<CoordLayout>(new CoordLayout());
coordContainer.BackgroundColor = Color.Transparent;
coordContainer.Layout.AddComponent(new Label("One"), 0, 0);
coordContainer.Layout.AddComponent(new Label("Two"), 200, 1);
coordContainer.Layout.AddComponent(new Label("Three"), 20, 200);
coordContainer.Layout.AddComponent(new Label("Four"), 100, 150);
coordContainer.Layout.AddComponent(new Label("Five"), 200, 280);
AddComponent(coordContainer, 10, 10);

If you build and run the simple you can see:

containers4