Skip to main content

Layers

Layers are the basic building blocks of every mos. app. Layers include basic shapes that can be colored (like the color layer), text fields (text layer) and various others like image or video layers.

By combining multiple layers so-called layouts are created which, combined with data (e.g. from templates) make up the individual views of an application.

Layouts​

Layouts are saved in the ./layouts directory of the app and each layout file should be structured as follows:

{
  "name": "myLayout",
  "layers": [
  ]
}
  • name is the name of this layout (should be identical to the filename)
  • layers contains a list of layers within this layout.

Example​

Below is the section of a layout file using a single color layer as a background:

{
  "name": "myLayout",
  "layers": [
    {
      "type": "color",
      "name": "background",
      "value": "#FFFFFF",
      "constraints": [
        {
          "type": "pos",
          "x": "0",
          "y": "0",
          "anchor": "nw",
          "relativeAnchor": "nw"
        },
        {
          "type": "pos",
          "x": "0",
          "y": "0",
          "anchor": "se",
          "relativeAnchor": "se"
        }
      ]
    },
    ...
  ]
}

This layer is positioned using constraints (see layout).
The position is defined by specifying anchor points relative to a parent layer. If the given layer has no parent it is positioned relative to the whole screen (usually not including the status and navigation/gesture bar).

Having a the layers nw and se anchors pinned to the screens nw and se anchors, the color-layer acts as a background covering the entire screen.

tip

Since nw is the default value for anchor and relativeAnchor nw anchor, this constraint can be shortened to:

"constraints": [
  {
    "type": "pos",
    "x": "0",
    "y": "0"
  },
  {
    "type": "pos",
    "x": "0",
    "y": "0",
    "anchor": "se",
    "relativeAnchor": "se"
  }
]

For an in depth documentation of layouting see layout.
Creating a button provides an example of how to use multiple layers to create a button.

Index of all layer types​

Below is a complete list of all layers: