Session 8 - Xcode 5 and interface builder for iOS 7 application


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Session 8 - Xcode 5 and interface builder for iOS 7 application

  1. 1. iOS Application Development
  2. 2. Xcode 5 and Interface Builder for iOS 7 Application These are confidential sessions - please refrain from streaming, blogging, or taking pictures Session 8 Vu Tran Lam & Nguyen Xuan Sinh IAD-2013
  3. 3. Exploring Single View App Project in Xcode 5 • Xcode 5 splash screen • Project template dialog • Project information • Project structure • Interface builder • Simulator
  4. 4. Xcode 5 Splash Screen Your recent projects Click here to create a new
  5. 5. Xcode can be used to develop both iOS and Mac OS Choose iOS Single View App project template Then click Next Project Template
  6. 6. Project Information Unique identifier of your Enter the name of your app Enter the prefix of all classes created in your Choose the iOS devices which you want Then click
  7. 7. Project Information Your local drive Choose folder to store your app Then click
  8. 8. Project source code Enter deployment info Project configuration info Xcode project file Click on Storyboard to design UI for iOS Project Structure
  9. 9. Project source is designed based on Canvas - Interface Builder UI Controls which can be dragged to Inspector bar Choose target deviceClick here to run Interface Builder Scene in
  10. 10. • Info.plist file • Identity • Deployment • App icons and launch images • Linked frameworks and libraries Setting Project Info
  11. 11. Click on General tab Identity info Deployment info Setting Identity and Deployment Info Info.plist file stores project info
  12. 12. App Icons & Launch Images Linked Framework & Setting App Icons & Launch Images Info Info.plist file stores project info Click on General tab
  13. 13. • Nib file • Storyboard • Scene and Segue • View and View controller • Inspector bar Introduction to Interface Builder for iOS 7 App
  14. 14. • A nib file is a special type of resource file that you use to store the user interfaces of iOS and Mac apps. A nib file is an Interface Builder document. You use Interface Builder to design the visual parts of your application—such as windows and views —and sometimes to configure nonvisual objects, such as the controller objects that your application uses to manage its windows and views. • In Xcode, Nib file can be created and designed in Xib document. Nib File
  15. 15. Right click on Calculator folder & Choose User Interface & Empty Xib Creating Interface Builder Xib Document
  16. 16. Then click Choose iOS Creating Interface Builder Xib Document
  17. 17. Creating Interface Builder Xib Document Drag View Controller or other UI Controls to Interface Bulder Click on Xib
  18. 18. • Introduced in iOS 5, storyboarding is an exciting feature that will save you a lot of time building user interfaces for your apps. • Unlike nib files, storyboards let you design your entire user interface in one place so you can see all of your views and view controllers and how they Storyboard • An important part of storyboards is the ability to define segues, which are transitions from one view controller to another • A single storyboard file can store all of your application’s view controllers and views and you can use multiple view storyboards to organize portions of your interface. At build time, Xcode takes the contents of the storyboard file and divides it up into discrete pieces
  19. 19. • Storyboard is a visual representation of the user interface of an iOS application, showing screens of content and the connections between those screens. • A storyboard is composed of a sequence of scenes, each of which represents a view controller and its views; scenes are connected by segue objects, which represent a transition between two view controllers. Storyboard
  20. 20. Designing User Interface using Storyboard UI View Scene Click on main View First Exit Canvas
  21. 21. • With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them. It’s easier to keep track of everything because the entire design is in a single file, rather than spread out over many separate nibs. • The storyboard describes the transitions between the various screens. These transitions are called “segues” and you create them by simply ctrl-dragging from one view controller to the next. Thanks to segues you need less code to take care of your UI. • Storyboards make working with table views a lot easier with the new prototype cells and static cells features. You can design your table views almost completely in the storyboard editor, something else that cuts down on the amount of code you have Advantages of Storyboard
  22. 22. Full Storyboard
  23. 23. Designing Prototype using Storyboard iPhone App
  24. 24. • A Scene corresponds to a Single View Controller and its views. • On iPhone, each scene corresponds to a full screen’s worth of content; on iPad, multiple scenes can appear on screen at once - for example, using popover view controllers. • Each scene has a dock, which displays icons representing the top-level objects of the scene. The dock is used primarily to make action and outlet connections between the view controller and its views. • A Segue manages the transition between two scenes. • Types of Segue: push, modal or custom • You can pass data between scenes by using the method prepareForSegue:sender:, which is invoked on the view Scene and Segue
  25. 25. Scene and Segue Segue between two Sence
  26. 26. Adding New Scene and Segue Drag View Controller to Storyboard to create a new Create a segue by Control- Dragging this button to destination
  27. 27. • Push • Modal • Custom Action Segue
  28. 28. • View Controls • View Controllers • Basic UI Controls • Other UI Controls Overview of UIControls in iOS 7
  29. 29. View Controls
  30. 30. View Controllers
  31. 31. Basic UI Controls
  32. 32. Other UI Controls
  33. 33. iOS 7 UI Transition • Appearance and behavior • Bars and Bar buttons • Content Views • Controls • Temporary Views
  34. 34. Appearance and Behavior • View Controllers use full-screen layout • UIView use tint color property window.tintColor = [UIColor purpleColor]; • iOS 7 introduces dynamic font
  35. 35. Bars and Bar Buttons • Status bar iOS 7 iOS 6 iOS 7 iOS 6 • Navigation bar • Search bar and scope bar
  36. 36. Bars and Bar Buttons • Tab bar iOS 7 iOS 6 • Toolbar iOS 7 iOS 6
  37. 37. Content Views • Activity
  38. 38. Content Views • Collection View
  39. 39. Content Views • Map View
  40. 40. Content Views • Page View Controller
  41. 41. Content Views • Popover (iPad Only) iOS 7 iOS 6
  42. 42. Content Views • Scroll View iOS 7 iOS 6
  43. 43. Content Views • Table View iOS 7 iOS 6
  44. 44. Controls • Picker iOS 7 iOS 6
  45. 45. Controls • Progress View iOS 7 iOS 6 • Refresh control iOS 7 iOS 6
  46. 46. Controls • Slider iOS 6iOS 7 • Stepper iOS 7 iOS 6 • Text field iOS 7 iOS 6
  47. 47. Temporary Views • Action sheet iOS 7 iOS 6 • Action sheet iOS 7 iOS 6
  48. 48. Understanding View, Window & View Hierarchy • In iOS, you use windows and views to present your application’s content on the screen. • Windows do not have any visible content themselves but provide a basic container for your application’s views. Views define a portion of a window that you want to fill with some content. • For example, you might have views that display images, text, shapes, or some combination thereof. You can also use views to organize and manage other views. !
  49. 49. Views Manage Your Application’s Visual Content • A view object defines a rectangular region on the screen and handles the drawing and touch events in that region • A view is an instance of the UIView class and manages a rectangular area in your application window. • Views are responsible for drawing content, handling multitouch events, and managing the layout of any subviews.
  50. 50. Window Object • A window object presents graphical content in a rectangular area of the screen and plays a role in the distribution of events. This object, which inherits from UIWindow on Cocoa Touch and NSWindow on Cocoa (OS X), represents a window appearing in an application. • A window is an instance of the UIWindow class and handles the overall presentation of your application’s user interface. Windows work with views (and their owning view controllers) to manage interactions with, and changes to, the visible view hierarchy. • In iOS, windows do not have title bars, close boxes, or any other visual adornments. A window is always just a blank container for one or more views.
  51. 51. Windows Coordinate the Display of Your Views • A window is at the root of a hierarchy of views, with uppermost views in the hierarchy enclosing other views. • When a window displays its content, it proceeds down this hierarchy, asking each view in turn to draw itself in the context of its superview. • The view at the top of the hierarchy is the content view. • The content view occupies the entire drawing area of the window, serving as the backdrop for all other views in the window.
  52. 52. View Hierarchy
  53. 53. View Hierarchy • View hierarchy defines the relationships of views in a window to each other. You can think of a view hierarchy as an inverted tree structure with the window being the top node of the tree. • From visual perspective, a view hierarchy is enclosure: one view contains one or more other views, and the window contains them all.
  54. 54. • Auto Layout concepts • Working with constraints in Interface Builder • Working with Auto Layout programmatically • Auto Layout by example Working with Auto Layout in iOS 7
  55. 55. • The fundamental building block in Auto Layout is the constraint. • Constraints express rules for the layout of elements in your interface. • For example: you can create a constraint that specifies an element’s width, or its horizontal distance from another element. Auto Layout Concepts
  56. 56. • The easiest way to add, edit, or remove constraints is to use the visual layout tools in Interface Builder. • Creating a constraint is as simple as Control-dragging between two views, or to add multiple constraints at once, you simply use the various pop-up windows. • Adding constraints with control-drag Working with constraints in Interface Builder
  57. 57. • Adding constraints with align and pin menus Working with constraints in Interface Builder
  58. 58. • Adding constraints with align and pin menus Working with constraints in Interface Builder
  59. 59. • Even though Interface Builder provides a convenient visual interface for working with Auto Layout, you can also create, add, remove, and adjust constraints through code. • If you want to add or remove views at runtime, for example, you’ll need to add constraints programmatically to ensure that your interface responds correctly to changes in size or orientation. Working with Auto Layout Programmatically NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(self.button1, self.button2); NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"[button1]-[button2]" options:0 metrics:nil views:viewsDictionary];
  60. 60. • Using scroll views with Auto Layout • Spacing and wrapping Auto Layout by Example
  61. 61. Handling Basic Interaction in iOS 7 • Introduction of Outlet and Action • Adding Actions and Outlets • Creating UI Controls’s Delegate connection • Hiding the iPhone keyboard
  62. 62. Introduction of Outlet and Action • When a user interacts with objects in the view, for example touching and releasing a button control, an event is triggered. • Target-Action pattern allow you to specify what happens when events are triggered - to define which method of which controller object gets called when a user interacts in a certain way with a view object. • Target-Action pattern specify how you connect the objects in the user interface you have designed in the Interface Builder to the back end Objective-C code you have written in Xcode project. • The process of wiring up a view object to call a specific method on a view controller object is achieved using something called an Action. • An action is a method defined within a view controller object that
  63. 63. Introduction of Outlet and Action • The opposite of an Action is the Outlet. An Action allows a view object to call a method on a controller object and an Outlet allows a view controller object method to directly access the properties of a view object. • An outlet describes a connection between two objects. When you want an object (the view controller) to communicate with an object that it contains (the text field), you designate the contained object as an outlet. When app runs, the outlet you create in Xcode is restored, which allows the objects to communicate with each other at runtime. • For example: A view controller need to set the text on a UILabel object. In order to do so an Outlet must first have been defined using the IBOutlet keyword. !
  64. 64. Adding Actions and Outlets Create action for button by Control-Dragging this button to ViewController
  65. 65. Adding Actions and Outlets Choose Action Enter the Action’s Then click
  66. 66. Adding Actions and Outlets Action methods are declared using the IBAction
  67. 67. Adding Actions and Outlets • In Hello FPT app, when the user taps the Hello button, you want it to send a “change the greeting” message (action) to the view controller (target). This message changes the string (model object) that the view controller manages. Then, the view controller updates the text that’s displayed in the label to reflect the change in the model object’s value. • Using Xcode, you can add an action to a UI element and set up its corresponding action method by Control-dragging from the element on canvas to the appropriate source file (view controller’s source file).
  68. 68. Adding Actions and Outlets • Next, you want view controller to get user’s text from the text field and then display the text in the label. To ensure that view controller can communicate with these objects, you create outlet connections between them. • The steps you take to add outlets for the text field and label are very similar to the steps you took when you added the button’s action.
  69. 69. Adding Actions and Outlets Create outlet for textfield by Control-Dragging this textfield to ViewController interface
  70. 70. Adding Actions and Outlets Enter the name of Choose Outlet Then click
  71. 71. Adding Actions and Outlets Outlet is defined using the IBOutlet keyword
  72. 72. Creating UI Controls’s Delegate Connection • In Hello FPT app, you need to connect the text field to an object that you specify as its delegate. • You need to specify a delegate object for the text field because the text field sends a message to its delegate when the user taps the Done button in the keyboard (recall that a delegate is an object that acts on the behalf of another object). In a later step, you’ll use the method associated with this message to dismiss the keyboard.
  73. 73. Creating UI Controls’s Delegate Connection
  74. 74. Creating UI Controls’s Delegate Connection Select
  75. 75. Hiding the iPhone keyboard • When the user of iPhone app is required to enter data in the textfield keyboard automatically appears on the screen. However, keyboard does not automatically go away when the user has finished typing. • There are some solutions for this case: • Hiding the keyboard when the user touches the Return key • Hiding the keyboard when the user taps the background
  76. 76. 1.Adding the UI to Hello FPT project 2.Adding Outlets and Action 3.Creating UI Controls’s Delegate connection Completing Hello FPT App
  77. 77. Developing iOS App to convert F to C degree Assignment
  78. 78. Documentation Xcode Overview About_Xcode/about.html Resource Programming Guide CocoaNibs.html Interface Builder Help View Programming Guide Introduction/Introduction.html Cocoa Application Competencies for iOS Auto Layout Guide Introduction.html UIKit User Interface Catalog
  79. 79. many thanks to please say Stanford University Developer Center xin chào
  80. 80. Next: UI/UX Design for iOS 7 Application