Multiple Views From A Segmented Control For iPhone

A segmented control gives us a way to choose between two or more options, much like a group of radio buttons. When the selection is changed, the Value Changed event of the control fires, and we can respond to that event via an action method. In this blog, we respond to the event by changing the visibility of a subview of the main view. Let’s see how it works!

Start Xcode, choose “Create a new Xcode project,” and select the Single View Application template. Name the project “Segmented Views” and choose options as shown here:


Click Next, choose a location to save the project, and click Create.

In ViewController.xib, Drag three views to the main view, and set the sizes of all three in the Size Inspector as shown:

The three views will overlap. Add labels and / or images to each view and change the color of each to distinguish them visually. After setting up the views, set the hidden property for the second and third views (only) to true:

Add a UISegmentedControl to the bottom of the main view. Set up its properties as shown here:

Name the segments anything you wish: the names should correspond with the subject matter of each view.

Open ViewController.h and make these changes:

 

#import <uikit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, weak) IBOutlet UIView *imageView;
@property (nonatomic, weak) IBOutlet UIView *detailView;
@property (nonatomic, weak) IBOutlet UIView *factsView;

- (IBAction)segmentedValueChanged:(UISegmentedControl *)sender;

@end

 

 

Each of the views should be wired to a single UIView properties, and the segmentedValueChanged: method should be wired to the segmented control’s Value Changed event in Interface Builder.

Open ViewController.m and make the following changes:

 

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize imageView, detailView, factsView;

- (IBAction)segmentedValueChanged:(UISegmentedControl *)sender
{
switch (sender.selectedSegmentIndex) {
case 0:
self.factsView.hidden = YES;
self.detailView.hidden = YES;
self.imageView.hidden = NO;
break;
case 1:
self.factsView.hidden = YES;
self.detailView.hidden = NO;
self.imageView.hidden = YES;
break;
case 2:
self.factsView.hidden = NO;
self.detailView.hidden = YES;
self.imageView.hidden = YES;
break;

default:
break;
}
}

 

 

After synthesizing the view properties, we proceed with the definition of the segmentedValueChanged: method. By switching on the value of the selected segment index in the segmented control, we change the hidden property of each view. In this way, only one view will be shown at a time, corresponding to the selection on the control.

Running our version of the application produces this result:

Leave a Comment:

2 comments
momolgtm says October 13, 2012

how to Multiple Views from a Segmented Control into storyboard and segue..
thnks..
momolgtm

Reply
nick says January 22, 2015

hey

I’m still fairly new to iOS dev so don’t get this part
“Each of the views should be wired to a single UIView properties, and the segmentedValueChanged: method should be wired to the segmented control’s Value Changed event in Interface Builder.”

could you explain this in a ‘dumber’ way please?
thnx 🙂

Reply
Add Your Reply