Segment Control in TabBar Application in iPhone

In this application we will see how to change the background color using segmentControl, in TabBar Application . So let see how it will worked.

Step 1: Open the Xcode, Create a new project using TabBar Base application. Give the application “TabBarWithSegmentControl”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Expand classes and notice Interface Builder created the FirstViewController and SecondViewController class for you. Expand Resources and notice the template generated a separate nib, FirstView.xib and SecondView.xib for the TabBarWithSegmentControl application.

Step 4: Open the FirstViewController.h file and make the following changes:


#import <uikit/UIKit.h>
@interface FirstViewController : UIViewController {
IBOutlet UISegmentedControl *segmentControl;
IBOutlet UIView *Firstview1;
IBOutlet UIView *Secondview2;



Step 5: Double click FirstView.xib file and open it to the Interface Builder . First drag the Segmented Control from the library and place it to the view window. Select the Segmented control and bring up Connection Inspector and connect Touch Up Inside to the File Owner icon and select segmentAction: , connect File’s Owner icon to the Segmented Control and select segmentControl. Now drag the View two times from the library and place it to the Interface window. Drag the label from the library and place it to the View window and select the view and bring up Attribute Inspector , and change the background color and text into “FirstView”. Do it once more time for another view and change text into “SecondView”. Connect File’s owner icon to the View and select Firstview1. Select File’s Owner icon to the another view and select Secondview2.

Step 6: Double click the MainWindow.xib file and open it to the Interface Builder. Select the TabBar Controller from the interface window and select the First tab and bring up Attribute Inspector, change the Bar Item Title “FirstView”. Do it same for the Second tab and change the tab name “SecondView”. Now save the .xib file, close it and go back to the Xcode.

Step 7: Open the FirstView.m file and make the following changes:


#import "FirstViewController.h"
@implementation FirstViewController
- (IBAction) segmentAction:(id)sender
UISegmentedControl* control = sender ;
if( [control selectedSegmentIndex] == 0 )
[ self.view addSubview:Firstview1] ;
if( [control selectedSegmentIndex] == 1 )
[ self.view addSubview:Secondview2] ;
- (void)viewDidLoad
Firstview1.frame = CGRectMake(0, 42, 320, 420);
Secondview2.frame = CGRectMake(0, 42, 320, 420);
[super viewDidLoad];
// the segment control…
[segmentControl addTarget:self action:@selector(segmentAction:)
segmentControl.selectedSegmentIndex = 0 ;
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
- (void)didReceiveMemoryWarning
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc. that aren't in use.
- (void)viewDidUnload
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
- (void)dealloc
[super dealloc];



Step 8: Now compile and run the application on the Simulator.

You can Download SourceCode from here TabBar With Segment Control

Leave a Comment: