ButtonView in iPhone

This is the ButtonView example. In this example we will see how to mewView will come after pressing button. So let see how it will work.

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

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: We need to add three ViewController class in the project. So select the project -> New File -> Cocoa Touch ->ViewController class and give the class name “PickerView”,”SoundView” and “ImageView”.

Step 4: We need to add images in the resource folder.

Step 5: Open the ButtonViewViewController.h file , make the following changes in the file:

#import <UIKit/UIKit.h>

@class PickerView;
@class SoundView;
@class ImageView;

@interface ButtonViewViewController : UIViewController {

PickerView *pickerView;
SoundView *soundView;
ImageView *imageView;

UIButton *pickerbutton;
UIButton *songbutton;
UIButton *imagebutton;
}

@property(nonatomic, retain) IBOutlet  PickerView *pickerView;
@property(nonatomic, retain) IBOutlet  SoundView *soundView;
@property(nonatomic, retain) IBOutlet  ImageView *imageView;

@property(nonatomic, retain) IBOutlet  UIButton *pickerbutton;
@property(nonatomic, retain) IBOutlet  UIButton *songbutton;
@property(nonatomic, retain) IBOutlet  UIButton *imagebutton;

(IBAction)FirstButton:(id)sender;
(IBAction)SecondButton:(id)sender;
(IBAction)ThirdButton:(id)sender;

@end

Step 6: Double click the ButtonViewViewController.xib file and open it to the Interface Builder. First drag three Round Rect Button and place it to the view window.Give the button name PickerView, SoundView and ImageView (See the figure 1). Select PickerView button from the View and bring up Connection Inspector now connect Touch Up Inside to the File’s Owner icon and select FirstButton: method, do the same thing for other two button and select SecondButton: and ThirdButton: method. Now save the .xib file, close it and go back to the Xcode.

Figure 1

Step 7: In the ButtonViewViewController.m file make the following changes in the file:

#import "ButtonViewViewController.h"
#import "PickerView.h"
#import "SoundView.h"
#import "ImageView.h"

@implementation ButtonViewViewController
@synthesize pickerbutton,songbutton,imagebutton,pickerView,soundView,imageView;

(IBAction)FirstButton:(id)sender
{
pickerView = [[PickerView alloc]initWithNibName:@"PickerView"bundle:nil];
[self.view addSubview:pickerView.view];

}
(IBAction)SecondButton:(id)sender
{
soundView = [[SoundView alloc]initWithNibName:@"SoundView"bundle:nil];
[self.view addSubview:soundView.view];

}
(IBAction)ThirdButton:(id)sender
{
imageView = [[ImageView alloc]initWithNibName:@"ImageView"bundle:nil];
[self.view addSubview:imageView.view];

}
(void)dealloc
{
[super dealloc];
[pickerView.view release];
[soundView.view release];
[imageView.view release];
}

(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.
}

#pragma mark – View lifecycle

(void)viewDidUnload
{
[super viewDidUnload];
}

(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

Step 8: Open the PickerView.h file and make the following changes in the file:

#import <UIKit/UIKit.h>
@interface PickerView : UIViewController
{
IBOutlet UIPickerView *singlePicker;
NSArray *pickerData;
}

@property(nonatomic , retain) UIPickerView *singlePicker;
@property(nonatomic , retain) NSArray *pickerData;

(IBAction)buttonPressed;
(IBAction)BackButton:(id)sender;

@end

Step 9: Double click the PickerView.xib file and open it to the Interface Builder. First drag the Picker View, Navigation Bar and Round rect button from the library and place it to the view window (See figure 2). Select the Picker View from the view window and bring up Connection Inspector connect dataSource and delegate to the File’s Owner icon. Connect File’s Owner icon to the Picker view and select singlePicker. Drag the Round Rect button place it on the Navigation Bar. Select the button and bring up Attribute Inspector and select “backbutton.png”.  Now select the back button and bring up Connection  Inspector connect Touch Up Inspector to the File’s Owner icon select BackButton: method. Now save the .xib file, close it and go back to the Xcode.

Figure 2

Step 10: In the PickerView.m file and make the following changes in the file:

#import "PickerView.h"

@implementation PickerView

@synthesize singlePicker;
@synthesize pickerData;

// The designated initializer. Override to perform setup that is required before the view is loaded.
(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
// Custom initialization
}
return self;
}

(IBAction)BackButton:(id)sende
{
[self.view removeFromSuperview];
}

(IBAction)buttonPressed
{
NSInteger row = [singlePicker selectedRowInComponent:0];
NSString *selected = [pickerData objectAtIndex:row];
NSString *title = [[NSString alloc] initWithFormat:
@"you selected %@!", selected];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title
message : @"Thank you for choosing."
delegate:nil
cancelButtonTitle :@"You are Welcome"
otherButtonTitles :nil];
[alert show];
[alert release];
[title release];
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
(void)viewDidLoad {
NSArray *array = [[NSArray alloc] initWithObjects:@"Luke",@"Leia",@"Han",@"Chewbacca",@"Artoo",
@"Threepio",@"lando",nil];
self.pickerData = array;
[array release];
[super viewDidLoad];
}

// Override to allow orientations other than the default portrait orientation.
(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 {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

(void)dealloc {
[singlePicker release];
[pickerData release];
[super dealloc];
}

#pragma mark Picker data source methods
(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}

(NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component
{
return [pickerData count];
}

#pragma mark Picker delegate method
(NSString *)pickerView:(UIPickerView *)pickerView
titleForRow:(NSInteger)row
forComponent:(NSInteger)component
{
return[pickerData objectAtIndex:row];
}
@end

Step 11: Open the SoundView.h file and make the following changes in the file:

#import <UIKit/UIKit.h>
@interface SoundView : UIViewController {

IBOutlet UIButton *Soundstart;
}

@property(nonatomic,retain)IBOutlet UIButton *Soundstart;

(IBAction) soundplay:(id) sender;
(IBAction) soundstop:(id) sender;
(IBAction) BackButton:(id) sender;

@end

Step 12: Double click the SoundViewxib file and open it to the Interface Builder. Drag two Round Rect Button and Navigation Bar on the view window. Give the Round Rect button name “Play Sound” and “Stop Sound” . Now select “Play Sound” button and bring up Connection Inspector, connect touch Up Inside to the File’s Owner icon and select soundplay: method, do the same thing for another button and select soundstop: method. Drag the Round Rect Button and place it on the Navigation Bar. Select the Round Rect Button and select “backbutton.png”(See figure 3). Now select the back button and bring up Connection Inspector and connect Touch Up Inside to the File’s Owner icon and select  BackButton: method. Now save the .xib file, close it and go back to the Xcode.

Figure 3

Step 13: We need to add two framework in the FrameWork folder. So add “AudioToolbox.framework” and “AVFoundation.framework”.

Step 14: In the SoundView.m file make the following changes in the file:

#import "SoundView.h"
#import <AVFoundation/AVFoundation.h>

@implementation SoundView

@synthesize Soundstart;
AVAudioPlayer *player;

(IBAction)soundplay:(id)sender
{

NSString* resourcePath = [[NSBundle mainBundle] resourcePath];
resourcePath = [resourcePath stringByAppendingString:@"/sound.wav"];
NSError* err;

//Initialize our player pointing to the path to our resource
player = [[AVAudioPlayer alloc] initWithContentsOfURL:
[NSURL fileURLWithPath:resourcePath] error:&amp;err];

if( err ){
//bail!
NSLog(@"Failed with reason: %@", [err localizedDescription]);
}
else{
//set our delegate and begin playback
player.delegate = self;
[player play];
}
}

(IBAction)soundstop:(id)sender
{
if (player != nil &amp;&amp; [player isPlaying])
{
[player stop];
}
}

(IBAction) BackButton:(id) sender
{
[self.view removeFromSuperview];
}

(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

(void)dealloc
{
[super dealloc];
}

(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.
}

#pragma mark – View lifecycle

(void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}

(void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

Step 15: Open the ImageView.h file and make the following changes in the file:

#import <UIKit/UIKit.h>
@interface ImageView : UIViewController {
UIImageView *image;
}

@property(nonatomic, retain) IBOutlet  UIImageView *image;
(IBAction)BackButton:(id)sender;
@end

Step 16: Double click the ImageView.xib file and open it the Interface Builder. First drag the navigation bar and image view from the library and place it to the view window. And drag the Round rect Button and place it on the Navigation bar. Select the Button and bring up Attributes Inspector and select “backbutton.png”. Select the Image view and bring up Attribute Inspector select the “image006.png” file (See figure 4). Now save the .xib file, close it and go back to the Xcode.

Figure 4

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

You can Download SourceCode from here ButtonView

Leave a Reply

Your email address will not be published. Required fields are marked *