iOS components

1. iOS components Sliders, switches, segmented controls, pop-ups

2. Controls • Anything you use on an interface • All controls are subclasses of UIControl • All can trigger action methods • There are many different types of events • On event on a control can trigger many action methods • Can be visible or hidden • 3 modes • Active • Static (or inactive): no interaction possible (UIimage usually) • Passive • Like UIImageView or UITextfield. • Hold a value until the program is ready to use it • Most are just containers of data; users don’t interact • Most controls can be used in all 3 modes

3. Control States • Every control has 4 possible control states. Is always in exactly one state: • Normal: default, not in any other state. • Highlighted: control is currently being used. Example: finger is on the button. • Disabled: control has been turned off (enable box unchecked in IB or enabled property to NO) • Selected: Usually used to indicate that a control is turned on. Similar to Highlighted, but the control can continue to be selected when the user is no longer directly using that control. Only used by some controls.

4. Control States • Certain controls can take on different attribute values depending on their state. • Example: different images for different states.

5. Sliders • Create a new “Single View” project • do not use storyboards • Create a slider • Drag slider from library • Size it • Left and right close to borders • Then choose EditorAlignHorizontal Center in Container • In attributes inspector set • Minimum to 1 • Maximum to 100 • Current to 50 • Leave update events, continuous checked For the code for these slides, see the class web site, References->Examples->Components

6. Sliders • Add a label below the slider • Change text to 100 • Choose Editor-Size to Fit Content • Now pin all components to the top • Select all components • Choose Editor-PinTop space to Superview • This will ensure that there is the same space no matter what orientation you have

7. Outlets • Shortcut for adding IBOutlets • In IB bring up the assistant editor • Control-drag from the slider to just above the @end declaration in the interface. • In the pop-up window choose • Action in the connection box • Type sliderChangedin the field • UISlider for the Type • hit return

8. Outlets • Now drag from the label to the interface (above the method you added). • Type sliderLabel into the Name text field • Hit return • Note the “weak” reference. This is a memory management reference. A pointer is kept to the object, but the object is not retained.

9. Implement the Action Method • Go to the viewController.m file • Note that the signature of the action method is there: −(IBAction)sliderChanged:(UISlider *)sender {} • Fill in the body: −(IBAction)sliderChanged:(UISlider *)sender { int progress = lround(sender.value); self.sliderLabel.text = [NSStringstringWithFormat:@"%d", progress]; }

10. Initialize the slider • Add to the viewDidLoad method: − (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.sliderLabel.text = @"50” ;}

11. Run • Run the app • May have to go back to IB and pin the slider width • EditorPinWidth

12. Segmented Controls • Back to IB • Drag a segmented control from the library to the interface. • Size to take up the width • Change names to Switches and Button

13. Switches • Add switches • Drag a switch from library to close to the left border • Option-drag the switch to create another one. Place it by the right border. • Create two outlets for the switches. • Control-drag from the switches to the assistant editor • Name them leftSwitch and rightSwitch

14. Switches • Create actions for the switches • Control-drag from the left switch to just above the @end • Make it Action, with name switchChanged and type UISwitch • Hit return • Then control-drag from the right switch to the switchChangedmethod in the assistant editor. • We’ll use a single method to respond to both switches.

15. Segmented control action • Control-drag from the segmented control to the assistant editor, just above the @end • Insert a new action method called toggleControls • Set it’s sender parameter to UISegmentedControl

16. Implementing the action methods • Go to the viewController.m file • Add code: −(IBAction)switchChanged:(UISwitch *)sender { BOOL setting = sender.isOn; [self.leftSwitchsetOn:settinganimated:YES]; [self.rightSwitchsetOn:settinganimated:YES]; } This sets both boxes. The sender parameter is a reference to the switch that was clicked. By clicking it, the button changed its state. We now change both buttons to that state. See net slide for another method of doing this.

17. Implementing the action methods • First change the tag of the right button to 1 • Then change the code: −(IBAction)switchChanged:(UISwitch *)sender { BOOL setting = sender.isOn; if (sender.tag == 0) { [self.rightSwitchsetOn:settinganimated:YES]; } else [self.leftSwitchsetOn:settinganimated:YES]; }

18. Add the button • Drag a rounded rectangle to the view and cover the switches completely. • Give it the name: Do Something

19. Add outlet/action • Add an outlet for the button called doSomethingButton • Add an action for the button called buttonPressed • when these are added, make the button hidden by clicking the checkbox in the attributes inspector in IB

20. Action Sheets • Used to force the user to choose between two or more items. • It comes up from the bottom of the screen and dispays a series of buttons. • Users cannot continue until they tap one of the buttons.

21. Alerts • Alerts appear as a blue rounded rectangle in the middle of the screen • User must respond to continue • Used to inform the user • Only have a single button (usually), but you can add more.

22. Delegates • Used to provide a “call back” ability • A class that is a delegate must implement certain methods (some methods are optional) • When an object wants to do something, it calls one of it’s methods in its delegate. • A delegate class must declare that it implements the delegate methods of a particular class in the interface • When the instance is created, it must say who it’s delegate is.

23. delegates Main class That is a delegate Creates an instance. The instance names the main Class as it’s delegate When something happens, the object calls a method in its delegate Object that Has a delegate

24. Action Sheet • Want our viewController class to act as the delegate for the action sheet • This way it will be notified when the action sheet completes • viewController must conform to the UIActionSheetDelegate protocol • So must add to the interface declaration: @interface CMPViewController : UIViewController <UIActionSheetDelegate>

25. Action Sheet • Create the action sheet when the button is pressed: - (IBAction)buttonPressed:(id)sender { UIActionSheet *actionSheet = [[UIActionSheetalloc] initWithTitle:@"Are you sure?” delegate:selfcancelButtonTitle:@"No Way!" destructiveButtonTitle:@"Yes I'm sure!” otherButtonTitles:nil]; [actionSheetshowInView:self.view]; } The parameters to initWithTitle: set up the look of the Action Sheet We make the delegate self, i.e., the ViewController.m code that we’re in. Must have at least 2 buttons. If you only need 1, use an Alert Must use self.viewor [self view] since the view is only available via the getter. End of the call to initWithTitle: If we had wanted 2 more buttons (last item must be nil): otherButtonTitles:@”Foo”,@”Bar”,nil

26. buttonIndex contains the number of the button that was pressed. We ask the actionSheet for the number of the cancelButton Action Sheet This method is called when the action sheet is dismissed. It’s defined in the Action Sheet protocol • Add a new method to conform to the ActionSheet protocol: - (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex { if (buttonIndex != [actionSheetcancelButtonIndex]) { NSString *msg = nil; if (self.nameField.text.length > 0) msg = [NSStringstringWithFormat: @"You can breathe easy, %@, everything went OK.", self.nameField.text]; else msg = @"You can breathe easy, everything went OK."; UIAlertView *alert = [[UIAlertViewalloc] initWithTitle:@"Something was done" message:msg delegate:nil cancelButtonTitle:@"Phew!" otherButtonTitles:nil]; [alert show]; } } You’ll have to add a text field and connect it to the property nameField for this code to work. Here we create an alert Looks similar to the Action Sheet. We don’t want to know when the Alert is dismissed. If we did, we could make self the delegate. But then our ViewController class will have to conform to the UIAlertViewDelegate