Segmented Control

Segmented control is the native iOS Design Element that displays a horizontal collection of segments. Each segment can contain an Image or a Text and triggers an Event when tapped.
Tip: If you want to use a Tabbar at the bottom of the screen to navigate between different Screens, you should use a TabBar screen navigation.

Segment Control Properties

Number of segments

The total number of segments that will be displayed.

Selected Segment Index

The index of the segment that will be displayed as selected during the load of the segmented control. The user can change the selected segment by tapping on it.
Note: You can programmatically change it using Event Actions or Code Blocks.

Selected Segment Color

The background color of the selected segment.

Title Color Selected

The text color of the selected segment.

Title Color Unselected

The text color of the not-selected segments.

Is Momentary

When enabled, segment control will not maintain the selected segment after the user taps on it.
Default value: false

Proportional Width

If enabled, segmented control attempts to adjust segment widths based on their text length.

Each Segment Properties

This section is repeated for each segment to change segment properties.

Title

The title of the specific segment.
Tip: Setting a title to the segment will remove image.

Image

The image of the specific segment.
Tip: Setting an image to the segment will remove title.

Segment Width

Override the width of the specific segment.
Set this property to 0 to take its automatic value.
Default value: 0

Vertical content offset

Adjusts the vertical position of the content (image or text) of the specific segment.
Set to 0 to align the content vertically to the segment.
Default value: 0

Horizontal content offset

Adjusts the horizontal position of the content (image or text) of the specific segment.
Set to 0 to align the content horizontally to the segment.
Default value: 0

View

Alpha

Alpha is a number that alters the transparency of the segmented control. It ranges between 0.0 and 1.0, where 0.0 makes segmented control totally transparent and 1.0 totally opaque.
Default value: 1.0

Background Color

The background color of the whole view, “behind” the segments.

User Interaction Enabled

User Interaction Enabled indicates whether the segmented control can receive touches from the user.

Hidden

If enabled, it hides the segmented control and all of the design elements inside of it.

Code

Display Name

You can use this text to identify the Segmented Control in the Code Blocks Editor and in the List of the Screen’s elements. It is not visible to the users.

Visible In Code

It makes the Segmented Control visible in the Code Blocks Editor in order to connect it to other Code Blocks.