How To Use Different User Interface In iPhone Application?

We are going to build an application that will take your knowledge of controls to a whole new level. We’ll implemented an image view, a slider, two different text fields,a segmented control, a couple of switches, and an iphone button that looks more like as an iphone button.

Step 1: Open Xcode, create a project using View-Base Application template.

Step 2: You have created your project, let’s go get the image we’ll use in our image view. The image has to be imported into Xcode before it will be available for use inside interface Builder, so let’s import it now. You can find a suitable.png image in the project archives in the file. Make sure that  the image you select is a .png image sized correctly for the space available. It should be less than 100 pixels tall and not more than 300 pixels wide so that it can comfortably fit at the top of the view without being resize. And the image to the Resource folder. We need to implement the five interface elements at the top of the application’s screen. with the image view, the two text field, and the two labels. (see figure 1)

Figure 1: The image view, labels, and text fields we will implement first.

Step 3: Now double click .xib file to lunch the interface Builder. Click the View icon in the nib file’s main window , and select the library from Tools menu. Drag an image view onto the window called View, and Interface Builder automatically resize the image. Grab a text field from library and drag it over to the View window place it under the image view. After you drop the text field, grab a label from the library, and drag that over it is aligned with the left margin of the view and aligned vertically with the text field you place earlier. Next double click the label you just dropped, which will allow you to edit it. Type Name: over label, and click another label, change it to Number: . We rare now connected outlets each of the fields. Control drag from File’s Owner to each of the text fields, and connect them their corresponding outlets.

Step 4:  From the library , bring over a slider and arrange it below the number text field , and place Label left side of the view window. Select the slider and bring up the inspector, put minimum value of 1, a maximum value of 100, and an initial value of 50. Double click the Label and change it to 50. Now connect the Actions and Outlets. Control-drag from the File’s Owner icon to the label ans select sliderLabel. Next single click the slider bring up connection inspector drag it touch Up Inside to File’s Owner , and select SliderChanged. Drag asegmented control from the library and place it view window. place the cursor over the word First on the segmented control and double click, change it First to Show ,repeat the process with the Second segment rename it Hide. Drag another View from the library onto our View window, right below the segmented control. Grab a switch from library, and place it on the view, repeat the process once more time. Place one label above the each switch , and  change the text to read Left for the one on the left and Right for the one on the right. (See the figure 2)

Figure 2: Adding Slider, Segmented Controller and Switches

Step 5: We need to implement one of the UIActionSheetDelegate methods in addition to the action itself to get notified when the user taps a button on the action sheet. Here is the code we need to add to viewcontroller.m file.


UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle :
@"Are you sure?"
cancelButtonTitle:@"No Way!"
destructiveButtonTitle:@"Yes, I,m Sure!"
[actionSheet showInView:self.view];
[actionSheet release];

-(void)actionSheet:(UIActionSheet *)actionSheet
if(!buttonIndex == [actionSheet cancelButtonIndex])
NSString *msg = nil;
if(nameField.text.length > 0)
msg = [[NSString alloc] initWithFormat: @"You can breath easy, %@,
everything went OK.", nameField.text];
msg = @"You can breath easy, everything went OK.";
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:
@"Something was done"
[alert show];
[alert release];
[msg release];

      UISwitch *whichSwitch = (UISwitch *)sender;
      BOOL setting = whichSwitch.isOn;
      [leftSwitch setOn:setting animated:YES];
      [rightSwitch setOn:setting animated:YES];

      UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
       NSInteger segment = segmentedControl.selectedSegmentIndex;

      if(segment == kShowSegmentIndex) [switchView setHidden:NO];
      else [switchView setHidden:YES];

      [sender resignFirstResponder];

     UISlider *slider = (UISlider *)sender;
     int progressAsInt = (int)(slider.value + 0.5f);
    NSString *newText = [[NSString alloc] initWithFormat:@"%d", progressAsInt];
    sliderLabel.text = newText;
   [newText release];

    [nameField resignFirstResponder];
    [numberField resignFirstResponder];



Step 6: Now save the code and go to .xib file, drag a Round Rect Button to your view  from the library. Double click the button, and give it the title Do Something. Next, control drag from File’s Owner icon to the button, and connect the doSomething Button outlet to it. Then connect the Touch Up Inside event to the doSomething: action by dragging from that event on the connections inspector back to the File’s Owner icon. Save it and go back to Xcode.

Step 7: Compile your project , and run into the Simulator. (See figure 3)

Figure 3: The Control Fun appication, featuring text field, labels, a slider, and several other stock iphone controls.

Leave a Comment:

1 comment
Brian McCarthy says September 29, 2010

Thanks for the opportunity to do this example. Would you be able to give some instruction for the .h file?

Sushant it was good practice. Thanks

Add Your Reply