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

2. Chap 4
Beginning iPhone Dev book

3. Create project Single View Add images
Go to Images.xcassets in file inspector, click + in lower left corner, give it a name like ApressLogo
download the three Apress images, drag to 3 spaces.
second image should be 2x first image and third image should be 3x first image.
use for normal and retina displays

4. Create project Go to storyboard drag imageView to storyboard.
select it, go to Attributes editor, choose the ApressLogo image.
in View section, notice it says “Scale to Fill”. Scales the image.
With imageView selected, choose EditorSize to Fit Content. Now image and view are same size.
Now EditorAlignHorizontal Center in Container, then
Next fix constraints
Now notice all the attributes in the attribute editor. See pages of the iPhone Dev book.

5. Labels and Text Fields next add two labels and two text fields.
Top label should be Name:
bottom label should be Number:
use the blue lines to make everything aligned.
Drag bottom field so that it’s width goes from the number: to the right margin (blue line)
make top field same width as bottom field.
make label text aligned right.
Then select both labels and EditorPinWidths Equally

6. Labels and Text Fields For top text box Bottom text box
placeholder: “Type in a name”
Change “return key” to “Done”
In View section, check the “opaque” (means that nothing behind this subview needs to be drawn) and uncheck the “Clears Graphics Context” and “Clip Subviews” (for efficiency sake)
Bottom text box
placeholder: “Type in a number”
for “keyboard type” choose “number pad”

7. Connecting Create @IBOutlets for the two text fields
call one nameField
call the other numberField

8. Closing the keyboard Add following @IBAction method in viewController:
@IBAction func textFieldDoneEditing(sender: UITextField) {
sender.resignFirstResponder() }
Go to storyboard.
select Name field
go to connections inspector
drag from “Did End On Exit” to the yellow View Controller icon.
pop-up menu appears with name of IBAction we just created. Click it.
Repeat with other field.

9. Closing the keyboard II
need to close when background is tapped
Add to viewController
@IBAction func backgroundTap(sender: UIControl) {
nameField.resignFirstResponder()
numberField.resignFirstResponder() }
go to storyboard
choose the view
go to Identity Inspector on right panel
The field labeled Class says UIView. Change this to UIControl
all controls that can trigger an IBAction are subclasses of UIControl
now open the Connections Inspector with the View still selected
Drag from circle by “Touch Down” to the View.
in the resulting dialog box choose the backgroundTap method

10. Controls Anything you use on an interface 3 modes
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

11. 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.

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

13. Sliders Create a new “Single View” project Create a slider
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

14. Sliders Add a label below the slider Now pin all components to the top
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

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

16. 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.

17. Implement the Action Method
Go to the viewController.m file
Note that the signature of the action method is there:
@IBAction func sliderChanged(sender: UISlider) {}
Fill in the body:
@IBAction func sliderChanged(sender: UISlider) {
let progress = lroundf(sender.value)
sliderLabel.text = "\(progress)" }

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

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

20. 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

21. Switches Add switches Create two outlets for the 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
Put in constraints on the switches

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

23. Segmented control action
Control-drag from the segmented control to the assistant editor, just above
Insert a new action method called toggleControls
Set its sender parameter to UISegmentedControl

24. Implementing the action methods
Go to the viewController.m file
Add code:
−(IBAction)switchChanged:(UISwitch *)sender {
let setting = sender.on
leftSwitch.setOn(setting, animated: true)
rightSwitch.setOn(setting, animated: true) }
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 same state.

25. Add the button
Drag a rounded rectangle to the view and cover the switches completely.
Give it the name: Do Something
put in constraints

26. 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

27. Segmented Control Action
Add body func toggleControls method
@IBAction func toggleControls(sender: UISegmentedControl) {
if sender.selectedSegmentIndex == 0 {
leftSwitch.hidden = false
rightSwitch.hidden = false
doSomethingButton.hidden = true
} else {
leftSwitch.hidden = true
rightSwitch.hidden = true
doSomethingButton.hidden = false }

28. Background color
change background color of view to match the yellow in the image
go to storyboard
select main content view
choose attributes inspector
click the color swatch labeled background
click other open to OS X color picker
click on magnifying glass icon
click the Apress image

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

30. Alerts
Alerts appear as a 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.
both action sheets and alerts are modal views

31. Action Sheet Part I
Allocate and initialize a UIAlertController. This can display either an Action Sheet or an Alert
let controller = UIAlertController(title: "Are You Sure?", message:nil, preferredStyle: .ActionSheet) let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) let noAction = UIAlertAction(title: "No way!", style: .Cancel, handler: nil) controller.addAction(yesAction) controller.addAction(noAction) if let ppc = controller.popoverPresentationController { ppc.sourceView = sender ppc.sourceRect = sender.bounds } presentViewController(controller, animated: true, completion: nil)
Must create the buttons. If you only need 1, use an Alert
UIAlertController parameters:
title to display
message to be displayed below the title
preferredStyle is either ActionSheet or Alert
button parameters: title, style, handler to be called when button is pressed (or nil)
Styles: UIAlertActionStyle.Destructive button triggers a destructive, dangerous action like deleting files
UIAlertActionStyle.Default normal use like an OK button.
UIAlertActionStyle.Cancel used with a Cancel button.
Add buttons to controller

32. Action Sheet Part II
Allocate and initialize a UIAlertController. This can display either an Action Sheet or an Alert
let controller = UIAlertController(title: "Are You Sure?", message:nil, preferredStyle: .ActionSheet) let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) let noAction = UIAlertAction(title: "No way!", style: .Cancel, handler: nil) controller.addAction(yesAction) controller.addAction(noAction) if let ppc = controller.popoverPresentationController { ppc.sourceView = sender ppc.sourceRect = sender.bounds } presentViewController(controller, animated: true, completion: nil)
Alert/Actionsheet always comes from bottom in iPhone, but from a control in iPad. A popover is only necessary in iPad. See pages in the iPhone Dev book
causes the alert or actionsheet to be displayed on top of the current view

33. Alert Part I
handler: is the code that is executed when this button is clicked.
Change let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) To style: .Destructive, handler: { action in let msg = self.nameField.text.isEmpty ? "You can breathe easy, everything went OK." : "You can breathe easy, \(self.nameField.text)," + " everything went OK." let controller2 = UIAlertController(title:"Something Was Done", message: msg, preferredStyle: .Alert) let cancelAction = UIAlertAction(title: "Phew!", style: .Cancel, handler: nil) controller2.addAction(cancelAction) self.presentViewController(controller2, animated: true, completion: nil) })
This is an if statement that puts a string in msg.

34. Alert Part II
handler: is the code that is executed when this button is clicked.
Change let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) To style: .Destructive, handler: { action in let msg = self.nameField.text.isEmpty ? "You can breathe easy, everything went OK." : "You can breathe easy, \(self.nameField.text)," + " everything went OK." let controller2 = UIAlertController(title:"Something Was Done", message: msg, preferredStyle: .Alert) let cancelAction = UIAlertAction(title: "Phew!", style: .Cancel, handler: nil) controller2.addAction(cancelAction) self.presentViewController(controller2, animated: true, completion: nil) })
Now create a new actionsheet with type alert

35. Alert Part III
handler: is the code that is executed when this button is clicked.
Change let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) To style: .Destructive, handler: { action in let msg = self.nameField.text.isEmpty ? "You can breathe easy, everything went OK." : "You can breathe easy, \(self.nameField.text)," + " everything went OK." let controller2 = UIAlertController(title:"Something Was Done", message: msg, preferredStyle: .Alert) let cancelAction = UIAlertAction(title: "Phew!", style: .Cancel, handler: nil) controller2.addAction(cancelAction) self.presentViewController(controller2, animated: true, completion: nil) })
Create a cancel button for the alert.

36. Alert Part IV
handler: is the code that is executed when this button is clicked.
Change let yesAction = UIAlertAction(title: "Yes, I'm sure!", style: .Destructive, handler: nil) To style: .Destructive, handler: { action in let msg = self.nameField.text.isEmpty ? "You can breathe easy, everything went OK." : "You can breathe easy, \(self.nameField.text)," + " everything went OK." let controller2 = UIAlertController(title:"Something Was Done", message: msg, preferredStyle: .Alert) let cancelAction = UIAlertAction(title: "Phew!", style: .Cancel, handler: nil) controller2.addAction(cancelAction) self.presentViewController(controller2, animated: true, completion: nil) })
Present the alert