• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
I os user interfaces ib vs programatically
 

I os user interfaces ib vs programatically

on

  • 2,573 views

Comparison of programming a simple iOS interface using Interface Builder vs. building interface programmatically

Comparison of programming a simple iOS interface using Interface Builder vs. building interface programmatically

Statistics

Views

Total Views
2,573
Views on SlideShare
2,571
Embed Views
2

Actions

Likes
0
Downloads
19
Comments
0

1 Embed 2

http://www.verious.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

I os user interfaces ib vs programatically I os user interfaces ib vs programatically Presentation Transcript

  • 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 file into “Resources” folder, and add it to the project’s info.plist file• Open the “Classes” folder and click on the Button_FunViewController interface (header) file
  • 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 define 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 file 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 file 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 file and close IB; back in Xcode Build and Run
  • Building Interfaces in Code
  • 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 file into “Resources” folder, and add it to the project’s info.plist file• Open the “Classes” folder and click on the CodeButton_FunViewController interface (header) file
  • 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 file: - (void) createView; - (void) buttonPressed:(id)sender;• Add empty methods to implementation file
  • 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 (first two) - width, height (last two)• View: fill 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.
  • createView method
  • 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
  • statusText 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.
  • leftStatusButton method
  • rightStatusButton method
  • 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.
  • buttonPressed: method
  • loadView method• This is the method that …. loads the view• Create the view by calling the createView method• Add the subviews for statusText, leftStatusButton and rightStatusButton
  • loadView method
  • Build and Run!
  • 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