Building your first iOS app using Xamarin

  • Published on

  • View

  • Download

Embed Size (px)


1. Building your first iOS app using Xamarin Gill Cleeren - @gillcleeren 2. Hi, Im Gill! Gill Cleeren MVP and Regional Director .NET Practice Manager @ Ordina Trainer & speaker @gillcleeren 3. Im a Pluralsight author! Courses on Windows 8, social and HTML5 4. Agenda Overview of Xamarin and Xamarin.iOS Preparing for iOS development Xamarin.iOS fundamentals TableViews in iOS Adding navigation Optimizing the application Preparing for store deployment 5. Targets of this talk Understanding the fundamentals of iOS app development with Xamarin See how a fully working app can be built 6. The demo scenario iOS Coffee Store Manager List of coffee Navigation to details page 7. DEMO Looking at the finished application 8. Overview of Xamarin and Xamarin.iOS 9. Hello Xamarin Xamarin enables developers to reach all major mobile platforms! Native User Interface Native Performance Shared Code Across Platforms C# & .NET Framework Toolset on top of Visual Studio Enables VS to create native iOS and Android apps Commercial product 10. Write Everything in C# iOS, Android, Windows, Windows Phone, Mac Billions of Devices covered! 11. The Xamarin platform Xamarin Xamarin.Android Xamarin.iOS Xamarin Forms 12. Xamarin.iOS Anything you can do in Objective-C/Swift/XCode can be done in C# and Visual Studio (or Xamarin Studio) with Xamarin! 13. iOS Runtime model Native ARMx code no JIT is being used here Mono runtime provides system services such as Garbage Collection Full access to iOS frameworks such as MapKit as well as .NET BCL 14. A word on code-sharing Xamarin brings development time through the use of code-sharing Possible (currently!) using Shared projects: allows organizing the shared code #if directives for platform specific code PCL include the platforms we want to support Abstract to interfaces where platforms have specific implementations 15. Target architecture for a Xamarin app 16. Preparing for iOS development 17. What you need for Xamarin.iOS development Xamarin license (Xamarin.iOS) PC or Mac or Mac only Visual Studio or Xamarin Studio (Mac) XCode SDK (free) Optionally, a VM (VMWare or Parallels) with Windows 7 or 8 Optionally, a device Optionally, a developer account 18. Installing Xamarin.iOS 19. iOS development on Windows Required: a Mac with latest OSX! There are no iOS simulators on Windows! Windows Visual Studio Xamarin iOS plugin in Visual Studio Mac with OSX Xamarin Build Host iOS SDK XCode Interface Builder Device iOS Simulator 20. Connecting Windows & Mac 21. Developing on the Mac? Xamarin Studio! Optimized for cross-platform mobile development Explore native APIs with code completion World class Android and iOS designers Powerful debugging on simulator or device 22. DEMO A quick look at the development setup for Xamarin.iOS 23. Xamarin.iOS fundamentals 24. File New Project 25. File New Project 26. Fundamental #1: Application structure Main.cs Entry point of the application Main app class is passed: AppDelegate AppDelegate.cs Main application class Builds the window Listens for OS events MainStoryboard.storyboard Visual design of the app and the flow between the screens 27. Application structure ****ViewController.cs Powers the view of the app View controller handles the interactions between the user and the view ****ViewController.designer.cs Auto-generated file Glue between controls in the View and representations in View controller Dont edit this file yourself! 28. Application structure Info.plist Property list file Contains app properties such as app name, icons, splash screen images Entitlements.plist Allows specifying with capabilities the app is receiving PassKit, iCloud 29. Main.cs Entry point for the application Contains static Main Creates the app Passes name of application delegate 30. Application delegate 31. Fundamental #2: Views & Storyboards Views are most commonly created using a Storyboard Alternatives: code or *.xib files (XCode) Designer can be used to edit the Storyboard A Storyboard is a file that contains the visual designs of our applications screens as well as the transitions and relationships between the screens A screen inside a Storyboard is a Scene Each Scene represents a controller and the views it manages (content view hierarchy) Most templates create a new storyboard automatically An app can have more than one storyboard 32. Storyboard designer 33. Auto-generation of the *.designer.cs file Controller.cs contains our code Handles all that happens in the View Controller.designer.cs maps Storyboard controls to C# objects Glue to make controls available in code Never edit this file manually! 34. The *.designer.cs file 35. Fundamental #3: Controllers iOS apps follow MVC pattern Actual code lives in View Controller classes Each ViewController inherits from UIViewController Different base view controllers exist NavigationViewController TabViewController SplitViewController 36. Linking the view and the view controller When selecting a screen, we can select the black bar at the bottom Points to the View Controller Is an instance of UIViewController Code behind 37. Types of view controllers 38. Handling events in the view controller Controller needs to respond to user interaction Button press, navigation We need to wire up code in the controller to listen for interaction with a control To write code against controls, they are wired up in the *.designer.cs From then, we can work with them in the controller classes Controls are available for wiring up in the ViewDidLoad() 39. Responding to user interaction 40. DEMO Creating our first iOS application together! 41. Adding a list using UITableView Id like an app for this please. 42. The UITableView Lists of data can be visualized using the UITableView Can also be used for detail screens Contains cells (individual rows) Can have index and grouping (headers and footers) Can be placed in editing mode to allow data management Similar to Android: works with intermediate: UITableViewSource 43. Typical visualizations of the UITableView Plain Index Grouped Edit 44. Participating classes UITableView UITableViewCell UITableViewSource UITableViewController 45. Loading data in the UITableView Each UITableView is assigned a UITableViewSource Table queries the source to learn how it should be rendered How many rows How high are the rows (if not default) Source supplies each cell view, populated with data 2 methods are required to show data RowsInSection returns an int count of the total number of rows of data the table should display GetCell return a UITableCellView populated with data for the corresponding row index passed to the method 46. DEMO Loading a list of data Id like an app for this please. 47. Changing the appearance of the cells iOS comes with 4 built-in styles We can create our own styles as well 48. Built-in styles Default Subtitle Value1 Value2 49. Using a built-in styles cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier); cell = new UITableViewCell (UITableViewCellStyle.Subtitle, cellIdentifier); cell = new UITableViewCell (UITableViewCellStyle.Value1, cellIdentifier); cell = new UITableViewCell (UITableViewCellStyle.Value2, cellIdentifier); 50. Creating your own cell layout Its possible to provide an entirely different cell Different color Different control layout We need to create a new UITableViewCell Implements Constructor Creates the UI controls and sets the custom style properties UpdateCell Method for UITableView.GetCell to use to set the cells properties LayoutSubviews Set the location of the UI controls Possible to have more than one layout and create them based on content being displayed 51. DEMO Changing our table view 52. Navigation 53. Navigation with the UINavigationController NavigationController is a lookless controller (UINavigationController) Is special type of UIViewController Allows navigating from one screen to another Doesnt really manage a Content View Hierarchy Instead manages other View controllers + A specific, own view hierarchy including a navigation bar, title, back button VERY common pattern in iOS 54. Navigation with the UINavigationController Allows us to navigate to second screen New views are pushed on the stack Add to stack 55. Navigation with the UINavigationController Can provide a back button on the title bar Pops the current controller off the back stack Loads previous one again Remove from stack 56. The NavigationController Automatically provides a title bar Can be used to display controller title 57. Concept of the root view controller Navigation controller is lookless Needs to be paired with a Root View Controller Root view controller is first controller in the stack Loads the first content view hierarchy into the window 58. Actual navigation: Segues Navigation/transition to another view is done (mostly) through the use of Segues (pronounced Segways) Shown using arrow between views A storyboard can contain a segue with no source: Sourceless segue This view will get loaded when the application starts 59. Actual navigation: Segues Adding segues can be done in the storyboard designer Gives choice of desired action 60. Passing data with segues PrepareForSegue is called before transition is executed We can access the next view controller using the DestinationViewController property on the Segue 61. DEMO Adding a second screen and navigation 62. Optimizing the application 63. Application properties: info.plist 64. Application image resources 65. Icon sizes Icons (and other images) are required to be added i