UI Control UISegmentedControl with sample “Show” & “Hide”

April 20, 2009 § Leave a comment

UISegmentedControl is replacement of radio button on iPhone. It appears simple but it can be very tricky to implement in each unique situation.

Initialize a segmented control with frame:

UISegmentControl *control = [[UISegmentedControl alloc];
control.segmentedControlSyle = UISegmentedControlStyleBar;

3 style options:

  • UISegmentedControlStylePlain
  • UISegmentedControlStyleBordered
  • UISegmentedControlStyleBar

You can assign a label or image to each segment within a segmented control. You would have to create a segment for each selectable item. You can create as many but the user can select only one segment within a segmented control. The concept is similar to radio button html form. Each segment is assigned an index number starting with 0 (0,1,2,…) The index value serves for ordering and as a segment identifier.

[control insertSegmentWithTitle: @”Hide” atIndex: 0 animated: NO];
[control insertSegmentWithTitle: @”Show” atIndex: 1 animated: NO];

Segmented controls can display image inside the buttons other than text. Drag the image into Xcode project’s Resources folder.

Add a new segment containing an image:

UIImage *image = [UIImage applicationImageNamed: @”image.png”];
[segmentedControl insertSegmentWithTitle:image atIndex:0 animated:NO];

Display an image on existing segment, not a new one:
[segmentedControl setImage:[UIImage applicationImageNamed:@”image.png”] forSegmentAtIndex:0];

Read a segment’s image:
UIImage *image = [segmentedControl imageForStateAtIndex:0];

Manually set the segment’s width:
[segmentedControl setWidth:64.0 forSegmentAtIndex:0];

Release the button automatically after it is pressed:
segmentedControl.momentary = YES;

Display the segment:
[self addSubview: segmentedControl];

Read value from segment:
int value = segmentedControl.selectedSegmentIndex;

Here I am showing how to use Segmented Control to show and hide a image using CGRectMake. Use setAlpha: method to adjust the transparency from opaque 1.0 to semi-transparent 0.5. Use animationImages property to trigger animation on UIImageView as needed.

If user selects “Show” button, Segmented Control’s index is 1 as selectedSegmentIndex == 1, then it shows an image. If user selects “Hide” button, then it hides the image.

– (void)viewDidLoad {
[super viewDidLoad];
UISegmentedControl *control = [ [ UISegmentedControl alloc ] initWithFrame:       CGRectMake(100, 100, 125, 35) ];
[control insertSegmentWithTitle: @”Hide” atIndex: 0 animated: NO];
[control insertSegmentWithTitle: @”Show” atIndex: 1 animated: NO];
control.selectedSegmentIndex = 0; // Show Hide as default
control.tag = 0;
[control addTarget:self action:@selector(showNote:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:control];
[control release];

– (void)showNote: (id)sender {
if (noteControl.selectedSegmentIndex == 1) {
imageNote = [UIImage imageNamed:@”note.png”];
imageNoteView = [[UIImageView alloc] initWithFrame:CGRectMake(10.0, 10.0, 200.0, 200.0)];
[imageNoteView setAlpha:0.5];
imageNoteView.animationImages = [NSArray arrayWithObjects:imageNote, nil];
[imageNoteView startAnimating];
[self.view addSubview:imageNoteView];
[imageNoteView release];
else {
imageNoteView.hidden = YES;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading UI Control UISegmentedControl with sample “Show” & “Hide” at Web Builders.


%d bloggers like this: