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 Comment:

3 comments
thane says June 2, 2011

when you are saying ” Select the button and bring up Attribute Inspector and select “backbutton.png.”, ” i don’t see that anywhere on the attribute inspector?
-I’m fairly new to coding but i can usually get these small projects with ease. is it because I’m missing something in my resources??? please help this would really come in handy, and thank u so much for doing these tutorials!!

Reply
    Sushant says June 2, 2011

    What is your Xcode version? If it is 4.0.1 then first see the below link
    https://www.edumobile.org/iphone/iphone-programming-tutorials/helloworld-example-in-xcode-4-iphone-os-4-3/

    This is the simple hello world example and from here you can find out Attribute Inspector, Connection Inspector. And if you want to set images in the code or Interface Builder then you need to add resources in the resource folder first.
    You can find out so many beginning tutorials and source code in this side, see the example and if you have any kind of problem then comment us.

    Reply
Henrick Krigel says July 22, 2011

Hi,
Thank you so much for your great tutorials!
How will you incorporate 2 or more sound files so they play in sequence, so that the second file will play after the first finished playing? Do you use one player or several players, one for each file?
I think there is a lot of interest for this topic.

Thank you again
Henrick

Reply
Add Your Reply