Page tree
Skip to end of metadata
Go to start of metadata

This guide explains what Layout means in Smartface and see how it works with examples and usage analysis.

What is Layout ?

In computing, Layout is the process of calculating the position of objects in space subject to various constraints. For further information click here
In mobile apps, there are some types of Layouts to design an app in an acceptable quality. Layout helps to arrange objects in a proper way. There are much more than you think about Layout usage. One of the recommended Layout usage is with Dynamic Objects which are created in the runtime. Layout means less code and better view.

First of all, Layout only can be used with objects which can contain another objects inside them. These objects are container, scrollview, repeatbox in Smartface.

There are three types of Layouts in Smartface and these are:

  • SMF.UI.LayoutType.ABSOLUTE;
  • SMF.UI.LayoutType.LINEAR;
  • SMF.UI.LayoutType.FLOW;

Default Layout of objects is “absolute”. Every object you added in the JavaScript area positioned as you locate. There are some cases like both label and button should move or both should be invisible. When you come across with these kinds of examples, you should use some container objects that decide the action for both of them.

Another point is alignment. You can use “px”, “dp” and “%” values in Smartface. These are dimensional and positional units of an object which has x and y coordinates on view and width, height values. You may want to use a container object which will have same positioning and dimensions in every devices, then you should use a container object for user interaction objects (objects that cannot be parents, i.e non-container objects). Thus, you will get a better solution on all devices.

We will now give examples on how to use a container object with different layouts with the Smartface. The first example is about how to use the absolute layout.

Absolute Layout

In this example, there is a container and it covers three different TextButtons. Leaving dimension unit as percentage will lead the design objects align the same for all devices. This is the basic use of a container and absolute Layout. You will be able to see every object where you placed before.

Changing the visibility of an object means another type of layout. With some Layout types you want to use, this action automatically works in every device even if there are design corruptions. If you use absolute Layout and if you set visibility of object false, due to the behavior of absolute Layout it will disappear and there will be a gap remained in that area. However, we don’t want a gap between two objects, because changing the positions of other objects may cost more. In that situation, using Linear Layout property of container objects will fit better.

Linear layout

      

All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high.

Flow Layout

Flow layout arrange the objects by their size. ( adding order is important. ) It tries to put all the objects into a row or column depens on the orientation. If any object overflows the row or column than, It adds that object to a new row or column.