ITP 342 Mobile App Dev. Interface Builder in Xcode

Transcription

1 ITP 342 Mobile App Dev Interface Builder in Xcode

2 New Project From the Main Menu, select the File à New à Project option For the template, make sure Application is selected under ios on the left-hand side Select the Single View Application option For the options, enter the following: Product Name: Lab# Organization Name: FirstName LastName Company Identifier: edu.usc Language: Objective-C Devices: iphone Uncheck Use Core Data

3 New Project 3

4 Xcode

5 Xcode

6 Xcode

7 Interface Builder To access Interface Builder, select one of the following files:.storyboard.nib.xib

8 Interface Builder

9 Interface Builder

10 IBOutlets & IBActions Outlets Instance variables/properties that are declared using the keyword IBOutlet A reference from code to an object in Interface Builder Any instance variable/property that you create and want to connect to an object in IB must be preceded by the IBOutlet keyword 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 10

11 IBOutlets From Interface Builder (storyboard file), click on the Assistant Editor For the right panel, select the implementation file (ViewController.m) Control drag from an element in IB to a line inside the implementation file Enter a name for the IBOutlet (ivar) and select weak 11

12 IBActions From Interface Builder (storyboard file), click on the Assistant Editor For the right panel, select the implementation file (ViewController.m) Control drag from an element in IB to a line inside the implementation file Enter a name for the IBAction (method) and select the event 12

13 ios Controls All ios controls are subclasses of UIControl Capable of triggering action methods Most controls can also be used passively All of them can be made inactive when they are created or changed from active to inactive at runtime Some controls (like buttons) really don t serve much purpose unless they are used in an active manner to trigger code Because of the multi-touch interface, all ios controls can trigger multiple actions depending on how they are touched ios keyboard is actually just a view filled with a series of button controls 13

14 3 Forms of UI Controls Static (or inactive) Examples labels & images User doesn t do anything to it Don t need IBOutlets or IBActions Passive Examples text field & labels that change Simply hold on to a value that the user has entered until you re ready to use it Use IBOutlets Active Example buttons Touch them & something happens (a piece of code fires) Use IBActions 14

15 Image View Best to use PNG images Xcode automatically optimizes.png images at build time to make them the fastest & most efficient image type for use in ios apps Make sure the size of the image is the size that you want it displayed Yes, you can resize it in Interface Builder, but it takes up persistent storage & is slower at runtime (ios will do the scaling at runtime) If you want to display the same image at multiple sizes, it s better to have multiple copies of the image at different sizes For the higher resolution devices, create alternate images Twice the size in pixels and to the name 3 times the size in pixels and to the name Example world.png (200x200) and world@2x.png (400x400) 15

16 Import an Image To use an image in Interface Builder, you need to add it to your Xcode project Choose one of the two ways: 1. Add to the Images.xcassets 2. In the Navigator panel, create a Resources folder by control-clicking (or right-clicking) on the project's folder and selecting the New Group option. Control-click on the Resources' folder and select the Add Files to "Project Name" option. You may also access this option from the Main Menu under File. Make sure that the Destination checkbox is checked 16

17 Image View in Interface Builder Bring up the Attributes Inspector ( 1), select the Image from the pull-down Resize your image view so it is the same size as your image & center the image view Select Editor Size To Fit Content ( =) Choose Editor Align Horizontal Center in Container Alpha slider defines how transparent your image is If less than 1.0, the ios will draw this view as transparent so that any objects underneath it show through Always set to 1.0 (unless you have a very good reason) Select the Drawing checkbox labeled Opaque Tells the ios that nothing below your view should be drawn and allows its drawing methods to do some optimizations 17

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

19 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 19

20 IBOutlet Getting the Text ivar such as nametextfield To get the values of the text fields, use the text property on the text field in the implementation file self.ivar.text You may also get the length of the text self.ivar.text.length 20

21 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 21

22 textfieldexit: - (IBAction)textFieldExit:(id)sender { [sender resignfirstresponder]; } 22

23 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 23

24 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 24

25 backgroundtouched: - (IBAction) backgroundtouched:(id)sender { [self.nametextfield resignfirstresponder]; } 25

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

27 touchesbegan: - (void) touchesbegan: (NSSet *)touches withevent:(uievent *)event { UITouch *touch = [[event alltouches] anyobject]; if ([self.nametextfield isfirstresponder] && [touch view]!= self.nametextfield) { } [self.nametextfield resignfirstresponder]; } [super touchesbegan:touches withevent:event]; 27

28 Buttons Add 2 Button to the View Clear the text Display images IBActions Event Touch Up Inside Methods leftbuttontouched & rightbuttontouched (or you can use one method) 28

29 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, use the Tab key 29