Building your first iOS app using Xamarin

76

Transcript of Building your first iOS app using Xamarin

Page 1: Building your first iOS app using Xamarin
Page 2: Building your first iOS app using Xamarin

Building your first iOS app using XamarinGill Cleeren - @gillcleeren

Page 3: Building your first iOS app using Xamarin

Hi, I’m Gill!

Gill CleerenMVP and Regional Director.NET Practice Manager @ OrdinaTrainer & speaker

@gillcleeren

[email protected]

Page 4: Building your first iOS app using Xamarin

I’m a Pluralsight author!

• Courses on Windows 8, social and HTML5• http://gicl.me/mypscourses

Page 5: Building your first iOS app using Xamarin

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

Page 6: Building your first iOS app using Xamarin

Targets of this talk

• Understanding the fundamentals of iOS app development with Xamarin• See how a fully working app can be built

Page 7: Building your first iOS app using Xamarin

The demo scenario

• iOS Coffee Store Manager• List of coffee• Navigation to details page

Page 8: Building your first iOS app using Xamarin

DEMOLooking at the finished application

Page 9: Building your first iOS app using Xamarin

Overview of Xamarin and Xamarin.iOS

Page 10: Building your first iOS app using Xamarin

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

Page 11: Building your first iOS app using Xamarin

Write Everything in C#

iOS, Android, Windows, Windows Phone, Mac

Billions of Devices covered!

Page 12: Building your first iOS app using Xamarin

The Xamarin platform

Xamarin

Xamarin.Android Xamarin.iOS Xamarin Forms

Page 13: Building your first iOS app using Xamarin

Xamarin.iOS

Anything you can do in Objective-C/Swift/XCode can be done in C# and Visual Studio (or Xamarin Studio) with Xamarin!

Page 14: Building your first iOS app using Xamarin

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

Page 15: Building your first iOS app using Xamarin

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

Page 16: Building your first iOS app using Xamarin

Target architecture for a Xamarin app

Page 17: Building your first iOS app using Xamarin

Preparing for iOS development

Page 18: Building your first iOS app using Xamarin

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

Page 19: Building your first iOS app using Xamarin

Installing Xamarin.iOS

Page 20: Building your first iOS app using Xamarin

iOS development on Windows

• Required: a Mac with latest OSX!• There are no iOS simulators on Windows!

WindowsVisual Studio

Xamarin iOS plugin in

Visual Studio

Mac with OSX

Xamarin Build Host

iOS SDKXCode

Interface Builder

Device iOSSimulator

Page 21: Building your first iOS app using Xamarin

Connecting Windows & Mac

Page 22: Building your first iOS app using Xamarin

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

Page 23: Building your first iOS app using Xamarin

Xamarin setup

DEMOA quick look at the development setup for Xamarin.iOS

Page 24: Building your first iOS app using Xamarin

Xamarin.iOS fundamentals

Page 25: Building your first iOS app using Xamarin

File New Project

Page 26: Building your first iOS app using Xamarin

File New Project

Page 27: Building your first iOS app using Xamarin

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

Page 28: Building your first iOS app using Xamarin

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• Don’t edit this file yourself!

Page 29: Building your first iOS app using Xamarin

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…

Page 30: Building your first iOS app using Xamarin

Main.cs

• Entry point for the application• Contains static Main• Creates the app• Passes name of application delegate

Page 31: Building your first iOS app using Xamarin

Application delegate

Page 32: Building your first iOS app using Xamarin

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 application’s

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

Page 33: Building your first iOS app using Xamarin

Storyboard designer

Page 34: Building your first iOS app using Xamarin

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!

Page 35: Building your first iOS app using Xamarin

The *.designer.cs file

Page 36: Building your first iOS app using Xamarin

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• …

Page 37: Building your first iOS app using Xamarin

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”

Page 38: Building your first iOS app using Xamarin

Types of view controllers

Page 39: Building your first iOS app using Xamarin

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()

Page 40: Building your first iOS app using Xamarin

Responding to user interaction

Page 41: Building your first iOS app using Xamarin

DEMOCreating our first iOS application together!

Page 42: Building your first iOS app using Xamarin

Adding a list using UITableView

I’d like an app for this please.

Page 43: Building your first iOS app using Xamarin

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

Page 44: Building your first iOS app using Xamarin

Typical visualizations of the UITableView

Plain Index Grouped Edit

Page 45: Building your first iOS app using Xamarin

Participating classes

• UITableView• UITableViewCell• UITableViewSource• UITableViewController

Page 46: Building your first iOS app using Xamarin

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

Page 47: Building your first iOS app using Xamarin

DEMOLoading a list of data

I’d like an app for this please.

Page 48: Building your first iOS app using Xamarin

Changing the appearance of the cells• iOS comes with 4 built-in styles• We can create our own styles as well

Page 49: Building your first iOS app using Xamarin

Built-in styles

Default Subtitle Value1 Value2

Page 50: Building your first iOS app using Xamarin

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);

Page 51: Building your first iOS app using Xamarin

Creating your own cell layout

• It’s 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 cell’s properties

• LayoutSubviews • Set the location of the UI controls• Possible to have more than one layout and create them based on content being displayed

Page 52: Building your first iOS app using Xamarin

DEMOChanging our table view

Page 53: Building your first iOS app using Xamarin

Navigation

Page 54: Building your first iOS app using Xamarin

Navigation with the UINavigationController• NavigationController is a lookless controller (UINavigationController)• Is special type of UIViewController• Allows navigating from one screen to another

• Doesn’t 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

Page 55: Building your first iOS app using Xamarin

Navigation with the UINavigationController• Allows us to navigate to second screen• New views are pushed on the stack

Add tostack

Page 56: Building your first iOS app using Xamarin

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 fromstack

Page 57: Building your first iOS app using Xamarin

The NavigationController

• Automatically provides a title bar• Can be used to display controller title

Page 58: Building your first iOS app using Xamarin

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

Page 59: Building your first iOS app using Xamarin

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

Page 60: Building your first iOS app using Xamarin

Actual navigation: Segues

• Adding segues can be done in the storyboard designer• Gives choice of desired action

Page 61: Building your first iOS app using Xamarin

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

Page 62: Building your first iOS app using Xamarin

DEMOAdding a second screen and navigation

Page 63: Building your first iOS app using Xamarin

Optimizing the application

Page 64: Building your first iOS app using Xamarin

Application properties: info.plist

Page 65: Building your first iOS app using Xamarin

Application image resources

Page 66: Building your first iOS app using Xamarin

Icon sizes

• Icons (and other images) are required to be added in different resolutions

iOS 5/6 iOS 7/8 iOS 8 (6plus)

1x 2x 1x 2x 3x

App icon 57x57 114x114 Not supported 120x120 180x180

Spotlight 29x29 58x58 80x80 120x120

Settings 29x29 58x58 - - 87x87

Page 67: Building your first iOS app using Xamarin

entitlements.plist

Page 68: Building your first iOS app using Xamarin

DEMO

Adding application icons

Page 69: Building your first iOS app using Xamarin

Store deployment

Page 70: Building your first iOS app using Xamarin

Deploying your apps to the store

• Store deployment involves 3 major parts• Provisioning

• Creating a profile that includes code-signing information used to publish the app• iTunes Connect information settings

• Online tool to add information that will be used for the application’s page in the App Store

• Application Submission• Signed binary can be uploaded to Apple for review• Will be published in the store soon after that

Page 71: Building your first iOS app using Xamarin

Things to do before submitting

• App needs to meet Apple’s guidelines for quality and content• Can be rejected• Must be fixed and resubmitted

• Guidelines can be found at https://developer.apple.com/app-store/review/guidelines/ • Test the app for crashes under normal circumstances• Make sure the description matches what the app does!

Page 72: Building your first iOS app using Xamarin

Summary

• Xamarin.iOS leverages your C# knowledge to build apps for Android• iOS is further from regular .NET development• Getting your head around UI paradigms will take time!

Page 73: Building your first iOS app using Xamarin

Thanks!

Page 74: Building your first iOS app using Xamarin

Q&A

Page 75: Building your first iOS app using Xamarin

Building your first iOS app using XamarinGill Cleeren - @gillcleeren

Page 76: Building your first iOS app using Xamarin

Your feedback is important!Scan the QR Code and let us know via the TechDays App.

Laat ons weten wat u van de sessie vindt via de TechDays App!Scan de QR Code.

Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT-Professionals en Ontwikkelaars.