How do I use Relayering?

This lesson describes how to use the relayering functionality in LiveCode.

Introduction

Relayering allows you to manipulate the layers of controls in a dynamic fashion and shift controls relative to other controls on a card. This lesson shows two examples in which layering can be used.

The Test Stack

The Test Stack

We are using the test stack shown in this figure as a starting point to demonstrate how relayering works. The buttons b1, b2 and b3 occupy layers 1, 2 and 3 respectively. Layer 1 is the layer closest to the card with higher layers protruding closer towards the viewer.

Relayer Between Controls

Relayer Between Controls

In this example we are moving button b1 between buttons b2 and b3. We are using the following syntax to do this:

relayer button "b1" before button "b3"

We could also use the following syntax to complete the same operation:

relayer button "b1" after button "b2"

You can see how button b2 has seemingly moved onto the card.

Relayer Between Controls and Cards

Relayer Between Controls and Cards

This example demonstrates that you can also move controls relative to the card. We are using the following syntax to  move button b3 on to the card:

relayer button "b3" to back of card "Relayer"

Exception: Native Controls

Native controls are created in native layers and therefore other controls cannot be layer on top of them. Native layers are always on top.

Controls that are created in native layers are

  • Android native button
  • Browser widget
  • iOS native button
  • Mac native button
  • Mac native single line field
  • Map widget
  • Any controls created with mobileControlCreate

2 Comments

rmed

This doesn't work when trying to put a button over a browser widget.

Elanor Buchanan

Hi rmed, yes the browser widget is a different case because it is created in a native layer so other controls can't be layered on top of it.

I'll add a note to the lesson listing the exceptions.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.