UISegmentedControl in iPhone & iPad

 

So today we are going to create a simple app that is going to use UISegmentedControl . In our previous tutorials we created simple iPhone app. This time we are going to create an iPad application. The process and code is exactly same for both of these, we just need to initially select it in the Xcode.

 

Basically our app will have a menu with name of some colors written on each menu. Whenever a menu is selected, the color of the text is changed to that represented by the menu.

Given below is the snapshot of what will our app look like.

 

So lets get started :-

1.) Creating a new project

The first step is to create a new project. For this we need to :-

a.) launch Xcode.
b.) click on File -> New Project.
c.) select Application (under iOS).
d.) select View-Based Application project template.
e.) Under Product , choose iPad.
f.) click on choose.
g.) save the project and  name it “menu”.

 

This is how the list of files look like in Xcode.

 

2.)Building the Interface

Go to “Resources” folder and click “menuViewController.xib” file. This will launch the “Interface Builder” which consists of few windows.

a.)Now we will go to the “Library window” and from there we will select the “Text View” and drag it to the “View window”.

b.)Same way we are going to drag  ”Segmented Control” .

c.) We will make the interface as shown in the figure and name the objects according to it.

 

3.)Writing Code

a.)So Code for “menuViewController.h” file

There would be a piece of code that Xcode has already written for you. Here’s what the whole code will look like.

#import <UIKit/UIKit.h>

@interface menuViewController : UIViewController {
	IBOutlet UISegmentedControl *mycolors;
	IBOutlet UITextView *sampleText;

}

@property(nonatomic,retain) IBOutlet UISegmentedControl *mycolors;
@property(nonatomic,retain) IBOutlet UITextView *sampleText;

-(IBAction) colorChanged;

@end

Here we declare a  “SegmentedControl” object and a “TextView” object and set their property.

We declare a function “colorChanged” which when called will change the color of the “TextView.”

 

b.)Code for “menuViewController.m” file:

#import "menuViewController.h"

@implementation menuViewController

@synthesize mycolors,sampleText;

-(IBAction) colorChanged {

if (mycolors.selectedSegmentIndex==0)
{
sampleText.textColor = [UIColor blackColor];
}
if (mycolors.selectedSegmentIndex==1)
{
sampleText.textColor = [UIColor greenColor];
}
if (mycolors.selectedSegmentIndex==2)
{
sampleText.textColor = [UIColor blueColor];
}
if (mycolors.selectedSegmentIndex==3)
{
sampleText.textColor = [UIColor brownColor];
}
if (mycolors.selectedSegmentIndex==4)
{
sampleText.textColor = [UIColor redColor];
}
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return YES;
}

- (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 {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

- (void)dealloc {
[mycolors release];
[sampleText release];
[super dealloc];
}

@end

Here we synthesize the “mycolors” and “sampleText” objects.

Now we define the “colorChanged” method. It checks for the index value of the  “SegmentedControl” and changes the color of  “sampleText” according to it.

 

4.)Building the Connections

Our next step is to build the connections between the code we have written with our Interface elements.

a.)So we click on the “menuViewController.xib” in the “Resources” folder to launch “Interface Builder.

b.)There in the “Document window” we select “File’s Owner” and right click it.

c.)Now a window pops up which shows all the “Outlets and Actions” defined by us.

d.)Do the connections as shown below.

 

5.)Build and Run

Now finally we have to go to the Xcode and there at the top bar we see “Build and Run”. Just click it to run the application. Make sure we have saved our application before doing this.

So finally our app will look something like this:-