UserGuide

Mobile Segmented Button

From Xojo Documentation

The Segmented Button 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 MobileSegmentedButton is the Language Reference for the complete list.

Events

Pressed

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 button can be tapped or if it is disabled and cannot be changed.

SegmentCount

The number of segments in the control.

SelectedSegment

Used to get or set the selected segment.

Methods

AddSegment

Add additional segments to the control.

AddSegmentAt

Insert a segment before another segment in the control.

SegmentAt

Gets the Segmented Control Item for the specified segment index.

RemoveAllSegments, RemoveSegmentAt, RemoveSegment

Removes all the segments or a specific segment.

Segment

Each segment of a Segmented Button is a Segment 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.

Caption

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 Button 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 Button:

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

You will usually want to perform an action when one of the segments is clicked. This calls the Pressed event handler. In the event handler you can check the SelectedSegmentIndex 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.SegmentAt(Me.SelectedSegmentIndex).Title

The SelectedSegmentIndex property (Me.SelectedSegmentIndex) is used to lookup the index of the selected segment (Me.SegmentAt) and then the Title property for the segment is displayed.

Example Projects

  • Examples/iOS/Controls/SegmentedControlExample

See Also

MobileSegmentedButton, MobileSegment classes; UserGuide:iOS User Interface Controls topic