CPSegmentedControl: A Better Choice Than CPRadio

We addressed CPRadio buttons in a previous post (CPRadio Button Tutorial).  In my personal opinion, the CPSegmentedControl provides a much simpler interface, which is also more user friendly.

While we have learned to use radio buttons and are never surprised when we see them as users, they do cause problems for layout and design.  One particular problem is the association of the radio button and the text that describes it.  If there is space to display the options as a vertical list, the choice is clear, but if all the choices must fit horizontally on a single line, then there becomes issue with which choice a button is associated with.  We overcome this difficulty often by placing additional visual space between various options so that there is a closeness between the button and the associated text that is not present on the other options.

With the CPSegmentedControl, we present the user with a grouped list of options, of which the user can select one.  The default behavior of this control is to deselect all options when a new option is selected.  While this behavior can likely be overridden, it provides us with a very useful and very simple implementation that can replace radio box arrangements.

As an added benefit to users familiar with the iOS interface, this control is much more familiar, as it is used regularly in iOS applications.

A Simple Example

In a new project, remove the "Hello World" label, and add the following to applicationDidFinishLaunching:

    var segmentedControl = [[CPSegmentedControl alloc] initWithFrame:CGRectMake(10,10,200,30)];
    [contentView addSubview:segmentedControl];
[segmentedControl setSegmentCount:3];
[segmentedControl setLabel:@"Option 1" forSegment:0];
[segmentedControl setLabel:@"Option 2" forSegment:1];
    [segmentedControl setLabel:@"Option 3" forSegment:2];
  
    var genderSelection = [[CPSegmentedControl alloc] initWithFrame:CGRectMake(10,50,200,30)];
    [contentView addSubview:genderSelection];
    [genderSelection setSegmentCount:2];
    [genderSelection setLabel:@"Male" forSegment:0];
    [genderSelection setLabel:@"Female" forSegment:1];

Load you project to see this:

 The code creates two segmented controls.  Each control, sadly, must be defined with a frame.  This is problematic, only because a frame that is too small will clip the control's images providing an ugly appearance, and a frame that is too large makes positioning difficult for right-aligned or centered layouts.  To overcome these problems, I would recommend creating a subclass of the CPSegmentedControl, that has a sizeToFit method, which should loop through the various segments and creates a new frame based on the frame of each segment contained within the object.

The segments are automatically sized to match any label value that is inserted into them, or they can be set directly by calling setWidth:(int)forSegment:(int).

The CPSegmentedControl is a CPControl object, which means that all the usual setTarget, setAction options are available for this object as well as various other responder functions to handle clicks, hovering, etc.