EEC-492/693/793 iPhone Application Development Lecture 5 Wenbing Zhao & Nigamanth Sridhar 5/15/2019 EEC492/693/793 - iPhone Application Development
Outline Control Fun App (part II) 5/15/2019 5/15/2019 EEC492/693/793 - iPhone Application Development EEC492/693/793 - iPhone Application Development 2
Implementing the Slider and Label Determining outlets The label will need to be changed when the slider changes => need an outlet for the label When the slider is changed, we want to be able to retrieve the slider’s value Normally would need an outlet for the slider However, we could reuse the outlet for the label and avoid introducing another outlet 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing the Slider and Label Determining actions We need one for the slider to call when it is changed Adding outlets and actions: Control_FunViewController.h #import <UIKit/UIKit.h> @interface Control_FunViewController : UIViewController { UITextField *nameField; UITextField *numberField; UILabel *sliderLabel; } @property (nonatomic, retain) IBOutlet UITextField *nameField; @property (nonatomic, retain) IBOutlet UITextField *numberField; @property (nonatomic, retain) IBOutlet UILabel *sliderLabel; - (IBAction)textFieldDoneEditing:(id)sender; - (IBAction)backgroundTap:(id)sender; - (IBAction)sliderChanged:(id)sender; @end 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing the Slider and Label Adding outlets and actions: Control_FunViewController.m #import "Control_FunViewController.h" @implementation Control_FunViewController @synthesize nameField; @synthesize numberField; @synthesize sliderLabel; - (IBAction)sliderChanged:(id)sender { UISlider *slider = (UISlider *)sender; int progressAsInt = (int)(slider.value + 0.5f); NSString *newText = [[NSString alloc] initWithFormat:@"%d", progressAsInt]; sliderLabel.text = newText; [newText release]; } - (IBAction)backgroundTap:(id)sender { ... - (void)dealloc { [nameField release]; [numberField release]; [sliderLabel release]; [super dealloc]; } 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing the Slider and Label Adding the slider and label Double-click Control_FunViewController.xib to launch Interface Builder Blue guideline means: don’t get any closer than this From the library, drag a slider and put it below the number text field Single-click the slider, and go to the inspector Set the range: min of 1, max of 100, and init value 50 Bring over a label and place it next to the slider Use blue guidelines to align it Double-click it and change its text to 100 Resize the label: select Size to Fit from Layout Menu (⌘=) Then change the label text to 50 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing the Slider and Label Connecting the actions and outlets Control-drag from File’s Owner icon to the label you just added, and select sliderLabel Single-click the slider, then bring up the connections inspector (⌘2), drag Value Changed to File’s Owner, and select sliderChanged Save the nib Go back to Xcode, and try out the slider 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control What we will add Two switches: each can only have two states: on and off Segmented control: hide and show the switches A button: will be shown when switches are hidden Determining outlets One outlet for left switch One outlet for right switch One outlet for button Determining actions Segmented control will trigger an action: hide or show two difference views (switches and button) Another action required when either switch is tapped Yet one more action when button is pushed 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.h #import <UIKit/UIKit.h> // constant defined for better readability #define kSwitchesSegmentIndex 0 @interface Control_FunViewController : UIViewController { UITextField *nameField; UITextField *numberField; UILabel *sliderLabel; UISwitch *leftSwitch; UISwitch *rightSwitch; UIButton *doSomethingButton; } 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.h @property (nonatomic, retain) IBOutlet UITextField *nameField; @property (nonatomic, retain) IBOutlet UITextField *numberField; @property (nonatomic, retain) IBOutlet UILabel *sliderLabel; @property (nonatomic, retain) IBOutlet UISwitch *leftSwitch; @property (nonatomic, retain) IBOutlet UISwitch *rightSwitch; @property (nonatomic, retain) IBOutlet UIButton *doSomethingButton; - (IBAction)textFieldDoneEditing:(id)sender; - (IBAction)backgroundTap:(id)sender; - (IBAction)sliderChanged:(id)sender; - (IBAction)toggleControls:(id)sender; - (IBAction)switchChanged:(id)sender; - (IBAction)buttonPressed; @end 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m #import "Control_FunViewController.h" @implementation Control_FunViewController @synthesize nameField; @synthesize numberField; @synthesize sliderLabel; @synthesize leftSwitch; @synthesize rightSwitch; @synthesize doSomethingButton; 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m - (IBAction)toggleControls:(id)sender { if ([sender selectedSegmentIndex] == kSwitchesSegmentIndex) { leftSwitch.hidden = NO; rightSwitch.hidden = NO; doSomethingButton.hidden = YES; } else leftSwitch.hidden = YES; rightSwitch.hidden = YES; doSomethingButton.hidden = NO; 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m - (IBAction)switchChanged:(id)sender { UISwitch *whichSwitch = (UISwitch *)sender; BOOL setting = whichSwitch.isOn; [leftSwitch setOn:setting animated:YES]; [rightSwitch setOn:setting animated:YES]; } - (IBAction)buttonPressed { // TODO: Implement Action Sheet and Alert - (IBAction)sliderChanged:(id)sender { ... 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Releasing the outlets in Control_FunViewController.m - (void)dealloc { [nameField release]; [numberField release]; [sliderLabel release]; [leftSwitch release]; [rightSwitch release]; [doSomethingButton release]; [super dealloc]; } 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Adding switches and segmented control to UI Go to interface builder Drag a segmented control from library and place it on the View windows slightly below the slider Stretches it from the view’s left margin to right Double-click the control to rename the default texts: First => Switches, and Second => Button Adding two labeled switches from library Could option-drag the 1st switch to create the 2nd switch 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Connecting the switch outlets and actions Control-drag from File’s Owner to each of the switches, and connect them to the leftSwitch or rightSwitch outlet Select left switch and press ⌘2 to bring up the connections inspector, and drag from Value Changed event to the File’s Owner icon, and select the switchChanged: action Repeat with the other switch Select segmented control and bring up the connections inspector, and drag from Value Changed event to the File’s Owner icon, and select the toggleControls: action 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Adding the Button Drag a Round Rect Button from the library to the view Add it right on top of the left switch Align it with the left margin and vertically align its center with switches Grab right center resize handle and drag all the way to the right until you reach the blue guideline The button should completely cover the two switches Double-click the button and give a text of Do Something Bring up the attribute inspector and click the Hidden checkbox so that the button is hidden initially 5/15/2019 EEC492/693/793 - iPhone Application Development
Implementing Switches, Button, & Segmented Control Connecting the Button outlet and action Control-drag from File’s Owner to the button Select the doSomethingButton outlet Go back to the connections inspector Drag from the circle next to the Touch Up Inside event to the File’s Owner, and select the buttonPressed: action Save your work Go back to Xcode, build and run 5/15/2019 EEC492/693/793 - iPhone Application Development