Container Relative Frame Modifier

Overview

Use the Container Relative Frame modifier to size a layer such that multiple layers will be visible in the container. When using this modifier:

• Axis is used to specify a size for a layer’s width, height, or both that is dependent on the size of the nearest container.
• Count refers to the total number of rows or columns that the length of the container size in a particular axis should be divided into.
• Span refers to the number of rows or columns that the modified layer should actually occupy.
• Spacing refers to the amount of blank space placed between each layer.

Different things can represent a container including:

• The screen of a device on iOS
• A Navigation Stack
• A tab of a Tab View
• A scrollable layer like Scroll View

The size provided to the modifier is the size of a container, like the ones listed above, subtracting any safe area insets that might be applied to that container.

Take for example, this Rectangle in a vertical Container Relative Frame. With a Count of 3 and a Span of 1, this Rectangle takes up one-third of the screen.

If you duplicate the Rectangle several times and embed all of the layers in a Scroll View container, you’ll find that each Rectangle takes up a third of the screen.

With a Span of 2, the Rectangle now takes up two-thirds of the screen as it comprises of two of the one-third Rectangles in one Count.

If you duplicate the Rectangle several times and embed all of the layers in a Scroll View container, you’ll find that each Rectangle now takes up two-thirds of the screen, with the second one cut out of the frame.

Check to see if the second layer actually takes up two-thirds of the screen by changing the Span of the first Rectangle to 1.