ITP 342 Mobile App Dev Connections
User Interface Interactions First project displayed information to the user, but there was no interaction. We want the users of our app to touch UI components such as buttons and have stuff happen. What happens when a text field is touched? The keyboard is displayed. The user can enter info. 2
User Interface Interactions What happens when a text field is touched? The keyboard is displayed. The user can enter info. The Swift class for that View Controller scene needs access to the UI component. How? 3
Connections We need to connect the UI components in Interface Builder with our Swift classes. We create IBOutlets and IBActions. 4
IBOutlets & IBActions Outlets Instance variables that are declared using the keyword IBOutlet A reference from code to an object in Interface Builder Any instance variable that you create and want to connect to an object in IB must be preceded by the IBOutlet keyword Create when you want to access or modify properties of an interface builder element Actions Methods that are part of your controller class and declared with the keyword IBAction Tells Interface Builder that this method is an action and can be triggered by a control A method you want a user interface object to be able to call Create when you want to respond to user interaction with an interface builder element 5
Example Label Text Field Button Label 6
Text Field Examples of IBOutlets When you want to get input from a text field in code Label When you want to update the label in code 7
IBOutlets From Interface Builder (storyboard file), click on the Assistant Editor For the right panel, select the class file (ViewController) Control drag from an element in IB to a line inside class Enter a name for the IBOutlet (ivar) and select weak 8
Property Attributes IBOutlets (Interface Builder components) Use weak // IBOutlets @IBOutlet weak var nametextfield: UITextField! @IBOutlet weak var messagelabel: UILabel! 9
IBOutlets Memory Allocation We are pointing to an object created by the storyboard Do not alloc & init those objects Use them to access and set info 10
Steps 1. Drag an object into Interface Builder 2. Connect the object with an outlet 3. Get and set the object's attributes and/or call methods on that object class USCViewController : UIViewController { @IBOutlet weak var messagelabel: UILabel! } @IBAction func buttontouched(_ sender: UIButton) { // There is an attribute named text on UILabel self.messagelabel.text = "Hello Trojan" } 11
Text Field A text field accepts a single line of user input (shown here with a purpose description and placeholder text). A text field is a fixed-height field with rounded corners. When users tap a text field, a keyboard appears. When users tap Return in the keyboard, the text field handles the input in an application-specific way. 12
13
Text Field Attributes Inspector Text - default value Placeholder - text that will be displayed in grey inside the text field when the field has no value Text Input Traits For Capitalize, select Words For Return Key, select Done When having the user enter a number For Keyboard under Text Input Traits, select Number Pad Setting these kinds of attributes can greatly improve the user s experience 14
IBOutlet for TextField Example of creating an IBOutlet for the TextField 15
IBOutlet Getting the Text Variable name such as nametextfield To get the values of the text fields, use the text property on the text field in the implementation file self.varname.text You may also get the length of the text self.varname.text.count 16
UITextField Apple Documentation https://developer.apple.com/library/ios/docum entation/uikit/referen ce/uitextfield_class/ 17
text Property The text property is of type String String also has properties and methods that we want to use i.e. count https://developer.apple.com/documentation/swift/ string 18
Example class ViewController : UIViewController { @IBOutlet weak var nametextfield: UITextField! @IBAction func buttontouched(_ sender: UIButton) { let name: String = self.nametextfield.text?? "" } if name.count > 0 { self.messagelabel.text = "Fight on, \(name)" } else { self.messagelabel.text = "Fight on!" } 19
UILabel Apple Documentation https://developer.apple.com/library/ios/docum entation/uikit/referen ce/uilabel_class/ 20
UILabel UILabel has a property named text Just like UITextField It s a String It allows us to change the text of the UILabel 21
IBOutlet for Label Example of creating an IBOutlet for the Label 22
IBOutlets Example of IBOutlets in the class file class ViewController : UIViewController { } @IBOutlet weak var nametextfield: UITextField! @IBOutlet weak var messagelabel: UILabel! 23
Button Example of IBActions When you want to execute code when the user touches the button 24
IBActions From Interface Builder (storyboard file), click on the Assistant Editor For the right panel, select the swift file (ViewController.swift) Control drag from an element in IB to a line inside the implementation file under class Enter a name for the IBAction (method) and select the event 25
IBActions for Button Example of creating an IBAction for the Button 26
IBActions for Button Example of IBAction in the implementation file Now need to implement the method class ViewController : UIViewController { } @IBAction func buttondidpressed(_ sender: UIButton) { // Fill in code to get text from TextField // Set the message Label } 27
Making the Keyboard Go Away When the user taps the Done button, a did end on exit event will be generated Need to add an action method to our controller class such as textfieldexit: The first responder is the control that the user is currently interacting with When a text field yields first responder status, the keyboard associated with it goes away When the user taps the Done button on the ios keyboard, the Did End on Exit event will fire Make a connection from that event to textfieldexit: action @IBAction func textfieldexit(_ sender: UITextField) { sender.resignfirstresponder() } 28
Touch Background When the user touches anything, but the text field, the keyboard needs to go away Multiple ways to make this happen 2 common ways: Background button Touch events Need to implement one of the two ways 29
Background Button Since the keyboard for the number text field doesn t have a Done button, we will create an invisible button Drag a Button to your view s window Resize it to fill the entire screen Put this button behind everything by selecting Editor Arrange Send to Back Change the button s Type to Custom Create a method called backgroundtouched: to have the text fields resign first responder Make a connection from the Touch Up Inside event to the new method @IBAction func textfieldexit(_ sender: UIButton) { self.nametextfield.resignfirstresponder() } 30
Touch Events The second mechanism for hiding the keyboard involves wiring up an event to be called when the user touches the background view of the screen (or any view other than the text field). To achieve this, we will implement the touchesbegan event handler method on the view controller. This method will need to check that the object being touched by the user is not the text field itself. The method will then simply call the resignfirstresponder method of the text field to hide the keyboard. 31
touchesbegan: func touchesbegan(_ touches: Set<UITouch>, with event: UIEvent?) { let touch = event!.alltouches?.first! if self.nametextfield.isfirstresponder && touch.view!= self.nametextfield{ self.nametextfield.resignfirstresponder() } } super.touchesbegan(touches, with: event) 32
Buttons Add 2 Buttons to the View Clear the text Display images (if you want to use images) IBActions Event Touch Up Inside Methods leftbuttontouched & rightbuttontouched (or you can use one method) 33
Note: Interface Builder Everything we do in Interface Builder can be done in code. The reverse is not true. 34
Helpful Hints To open documentation in Xcode, hold the option key and double click a keyword or method name To change the name of a variable or method (such as an IBOutlet or IBAction) Select the text Right click (control click) Select Refactor à Rename To correct the indentation Select the code Select Editor à Structure à Re-Indent To auto complete code, use the Tab key 35
Resources https://developer.apple.com/library/ios/docum entation/stringstextfonts/conceptual/textan dwebiphoneos/keyboardmanagement/keyb oardmanagement.html 36