UserGuide

iOS Segmented Control

From Xojo Documentation

The SegmentedControl is a horizontal button made up of multiple segments. Each segment can be clicked independently of the others. Segments can contain text or icons, but do not typically contain both text and icons.

To edit the properties of the segments (Label, Icon and Selected) in the control, use the Segments button on the Inspector properties for the control. This displays the Segment Dialog where you can edit the Label, choose an Icon and choose a segment to be selected by default. You can also add additional segments and reorder the segments.

iOS Segmented Control Library Icon

Below is a list of commonly used events, properties and methods. Refer to iOSSegmentedControl is the Language Reference for the complete list.

Events

ValueChanged

Called when one of the segments is tapped, passing in the index of the newly selected segment.

Properties

Enabled

A boolean that indicates if the segmented control can be tapped or if it is disabled and cannot be changed.

Value

Used to get or set the selected segment.

Methods

Add

Add additional segments to the control.

Count

The number of segments in the control.

Insert

Insert a segment before another segment in the control.

Item

Gets the Segmented Control Item for the specified segment index.

RemoveAll, RemoveByIndex, RemoveByValue

Removes all the segments or a specific segment.

Segmented Control Item

Each segment of a Segmented Control is a Segmented Control Item (SegmentedControlItem) and has these properties:

Properties

Icon

An icon to display for the segment. If you have both an icon and a title, iOS uses only the icon.

Selected

The selected segment. Only one segment should be set as a selected.

Title

The text to display for the segment. If you have both an icon and a title, iOS uses only the icon.

Width

The width of the segment. If you leave this blank, then all the segments will divide the available space equally.

Usage

iOS Segmented Control

You can set up the Segmented Control using the Inspector and Segment Dialog, but you can also do everything in code. This code (in the Open event handler) adds segments to a Segmented Control:

Me.Add(New iOSSegmentedControlItem("Earth"))
Me.Add(New iOSSegmentedControlItem("Sun"))
Me.Add(New iOSSegmentedControlItem("Moon"))

You will usually want to perform an action when one of the segments is clicked. This calls the ValueChanged event handler. In the event handler you can check the Value property to see what the index of the newly selected segment is. This code displays the title for the selected segment in a Label:

SegmentedControlLabel.Text = "You selected " + Me.Item(Me.Value).Title

The Value property (Me.Value) is used to lookup the index of the selected item (Me.Item) and then the Title property for the item is displayed.

Example Projects

  • Examples/iOS/Controls/SegmentedControlExample

See Also

iOSSegmentedControl, iOSSegmentedControlItem classes; UserGuide:iOS UI topic