iOS: User Interfaces: Interface Builder vs. Programatically Tennessee Valley Apple Developers Saturday CodeJam: February 26, 2011
Before We Start• Download the icon image at: https://github.com/lhridley/AppleDev/blob/ master/Button_Fun/Icon.png Save this image to your desktop.
Create Your Project• Create a View-based Application for the iPhone and name it “Button_Fun”• Pull downloaded icon ﬁle into “Resources” folder, and add it to the project’s info.plist ﬁle• Open the “Classes” folder and click on the Button_FunViewController interface (header) ﬁle
UIViewController• All user-created view controllers are subclasses of UIViewController• Part of UIKit• Provides a great deal of preprogrammed functionality
What is a “View”?• A “view” is any iOS application screen that the user utilizes to interact with the application – it’s the user’s “portal” to your app• General rule: Views are designed in Interface Builder• General rule: every view has its own view controller• Note: There are generally exceptions to every rule
Code to User Interface• User interface objects and view controllers must send and receive messages to and from each other• View controllers send messages to the user interface (and the user) through outlets• Outlets point to user interface objects• Outlets are designated as properties with an IBOutlet designation
User Interface to Code• Certain user interface objects also send messages (from users) to the view controller• Those messages are sent using actions• Actions are designated as methods of type IBAction• IBAction methods are essentially void (returning no data)• Actions are triggered through certain events (like a button click) on a user interface object
What is the “IB”?• IB stands for Interface Builder• IBAction and IBOutlet are hints for Interface Builder to identify properties and methods that are to be tied in some way to user interface objects
Adding IBOutlets/IBActionsto the View Controller header
Accessors / Mutators• Otherwise known as getters and setters
Xcode Builds these for you• By using the compiler designations @property and @synthesize together, you are telling the compiler to automatically deﬁne and compile into your app the standard getters and setters for the designated properties.
Adding Actions and Outlets to the View Controller implementation
Adding Actions and Outlets to the View Controller implementation
Application Delegate• Very simply, delegates are classes that take responsibility for doing certain tasks on behalf of another class instance.• Application Delegate performs certain tasks on behalf of the UIApplication class instance
UIApplication• Standard component of UIKit• Responsible for your application’s event loop and routing input to the appropriate controller class• Interaction with your code happens through the Application Delegate
Button_FunApplication Delegate• Conforms to UIApplicationDelegate protocol• Popup overview is available by holding down option key and double-clicking• Detailed documentation on UIApplicationDelegate is available by clicking upper left icon in the right-hand corner; header ﬁle can be viewed by clicking upper right icon
Button_FunApplication Delegate• Two methods from the UIApplicationDelegate protocol are included in your application by default: - application:didFinishLaunchingWithOptions: - applicationWillTerminate:
MainWindow.xib• Open in Interface Builder by double- clicking• Causes your application delegate, main window, and view controller instances to get created at runtime• Close it without saving any changes
Button_FunViewController.xib• Open in Interface Builder by double- clicking ﬁle in Xcode• Make sure the View window is open• Make sure the Library is visible
Button_FunViewController.xib• Drag the following elements from the Library over to the view window: One (1) label Two (2) Round Rect Buttons• Position the buttons on either side of the view, approximately centered vertically• Position the label along the bottom, expanded the width of the window, using the blue interface guidelines
Label• Bring up the Inspector• Change text alignment to centered• Remove the “Label” text
Buttons• Change button text to “Left” and “Right” respectively• Show touch on highlighted• One more thing before we go: On the View object, change the background color of the view to red
Connecting Interface to Code• Connect File’s Owner to Label• Connect File’s Owner to View window’s “statusText” outlet• Connect each button’s “Touch Up Inside” event to the File’s Owner’s “buttonPressed:” Received Action• Save nib ﬁle and close IB; back in Xcode Build and Run
Before We Start• Download icon located at: https://github.com/lhridley/AppleDev/blob/ master/CodeButton_Fun/Icon.png Save to desktop
Create Your Project• Create a View-based Application for the iPhone and name it “CodeButton_Fun”• Pull downloaded icon ﬁle into “Resources” folder, and add it to the project’s info.plist ﬁle• Open the “Classes” folder and click on the CodeButton_FunViewController interface (header) ﬁle
View Properties• Add the following properties: statusText of type UILabel leftStatusButton of type UIButton rightStatusButton of type UIButton• Make sure you generate accessors and mutators, and do proper memory management coding - Setting properties to nil in viewDidUnload - Releasing in dealloc
View methods• Add signatures for the following methods in header ﬁle: - (void) createView; - (void) buttonPressed:(id)sender;• Add empty methods to implementation ﬁle
createView method• Every View object is contained in a CGRect object• CGRectMake function is used to create a CGRect object - parameters passed are: x,y location of the upper left corner (ﬁrst two) - width, height (last two)• View: ﬁll the view frame, starting at point 0,0. Make view frame 320 points wide, 480 points tall. Initializes as a UIView, autoreleased. Make background color red.
statusText method• We’re overloading the standard getter• First we’ll test to see if statusText exists; if not, we’ll create it: - frame: starting at point 20, 380, make it 280 points wide, 80 points tall - initialize as a UILabel instance, autoreleased, with text centered, background color transparent, and an empty string in the label’s text - return statusText object from method
leftStatusButton method• Again, we’re overloading the standard getter method• Test for the existence of leftStatusButton; if false: - Create button text string (NSString) as “Left” - Create leftStatusButton as instance of UIButton (hint: use convenience method, make rounded button) - Set frame starting point 20, 220, 80 points wide, 40 points tall - Set button title to button text from above, set control state to normal - Have button visually show touch when highlighted - Add target as self, action as @selector (buttonPressed:), when Control Event “TouchUpInside” is triggered - return button• Repeat steps for right button (in new method), changing text from “Left” to “Right”, and starting coordinates for frame to 220, 220.
buttonPressed: method• This method is exactly the same as the method in the prior project.• The method captures the title of the button, builds a new string object in the format of “<title> button pressed.”, and sets the statusText’s text to the new string object.• Don’t forget to release any temporary objects created.
Creating Views• If possible, views should be created using Interface Builder • Less code to maintain • IB is a quasi WYSiWYG view editor• Some functionality is not possible using Interface Builder; in those cases building some or all of a user interface in code is necessary• IB interfaces have overhead; if your app needs performance tuning, building some or all interfaces in code may be necessary
• Projects are available on Github if you want to download and/or check your code:• https://github.com/lhridley/AppleDev/tree/ master/Button_Fun• https://github.com/lhridley/AppleDev/tree/ master/CodeButton_Fun