Programming iOS in C#

Frank A. KruegerSeattle .NET Mobile

March 4, 2014

AGENDA

• Intro to iOS APIs

• Intro to UIKit

• Demo programming with Xamarin Studio

Frank

• .NET developer since .NET 1.1

• First iOS app accepted to the App Store on Dec 11, 2008

• First apps written in Objective-C++

@praeclarumhttp://praeclarum.org

http://github.com/praeclarum

Frank

Frank

• Started using MonoTouch (Xamarin.iOS) summer 2009

• First app released with iPad in May 2010

Frank

Frank

https://github.com/praeclarum/lcars

Frank

• iCircuit released July, 2010

iOS APIs

iOS APIsCocoa Touch

UIKit, GameKit, MapKit, …

Media

CoreGraphics, CoreAudio, CoreImage, CoreText, OpenGL, SpriteKit, …

Services

Foundation, CoreLocation,

CoreMotion, PassKit, JavaScriptCore,

Multipeer Connectivity, …

Core OS

Accelerate, CoreBluetooth,

ExternalAccessory, …

Cocoa Touch• UIKit to create the UI

• iAd to get rich

• GameKit to interface with Game Center

• MapKit for interactive 2D and 3D maps

• AddressBookUI to access Contacts

• EventKitUI to access the Calendar

• MessageUI to send email or messages

Media• CoreGraphics to render vector graphics onto bitmaps

• ImageIO even supports raw images

• CoreImage hardware accelerated image processing

• CoreAnimation for high performance realtime rendering (basis for UIKit)

• GLKit for all your 3D needs

• SpriteKit is a 2D sprite game engine

• AVFoundation, AssetsLibrary, AudioToolbox, AudioUnit, CoreAudio, CoreMIDI, CoreVideo, OpenAL, Media Player. Get the picture?

Services• Foundation provides a serializable data, collections, networking, data

streams, strings (like the BCL)

• CoreLocation provides location updates

• CoreMotion provides orientation and activity tracking

• Multipeer Connectivity easily create peer-to-peer and mesh networks

• JavaScriptCore full JavaScript engine that you can embed in your app and even bridge to your object model

• CoreData full ORM and data store that even works over iCloud

• Social accesses OS-level social accounts to post messages

• PassKit to add passes to the Passbook app

Core OS

• Accelerate super fast and efficient image and matrix math library

• Security provides safe places to put data

• CoreBluetooth gives low level access to the Bluetooth hardware

• ExternalAccessory gives low level access to devices plugged into the device

iOS APICocoa Touch

UIKit, GameKit, MapKit, …

Media

CoreGraphics, CoreAudio, CoreImage, CoreText, OpenGL, SpriteKit, …

Services

Foundation, CoreLocation,

CoreMotion, PassKit, JavaScriptCore,

Multipeer Connectivity, …

Core OS

Accelerate, CoreBluetooth,

ExternalAccessory, …

https://developer.apple.com/library/ios

Objective-C Declaration

- (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion

[self presentViewController:vc animated:YES completion:^{ // Do stuff after it’s been presented}];

Objective-C Declaration in C#

- (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion

Task PresentViewControllerAsync ( UIViewController viewControllerToPresent, bool animated)

await PresentViewController (vc, true);// Do stuff after it’s been presented

UIKit

Single Screen App

UIWindow

UIApplication

UIApplicationDelegate

Delegate

Window

Single Screen App

UIWindow

UIApplication

UIApplicationDelegate

Delegate

Window

Created by OS

Subclassed

by your app

Created by you

Single Screen App

UIWindowUIViewControlle

r

RootViewController

UIViewController

• The Controller in MVC responsible for

- monitoring and coordinating user interactions

- to view and edit model data

UIViewControlleris an MVC controller

Cloud DataUser DataServices

Device Sensors

VIEW

LabelTable

Edit Box

CONTROLLER

Model

UIViewController• A Screen of UI

- on iPhone, takes up the majority of the screen

- on iPad, can take up the whole screen or have children view controllers in a layout

- designed to work with parent UINavigationController with navigation actions and toolbar actions

- present or otherwise transitions to other view controllers

Single Screen App

UIWindowUIViewControlle

r

RootViewController UIView

View

Model

Single Screen App

UIWindowUIViewControlle

r

RootViewController UIView

View

ModelUILabel

UIButton…

Subviews

Multi Screen AppUIWindow

RootViewController

UIViewController

Model

UIViewController

UIViewView

UILabelUIButton

Subviews

UIViewController

UIViewView

UILabelUIButton

Subviews

ChildViewControllers

UIView• “Dumb” - should not interact with the Model

directly

• Responsible for drawing itself

• Contains subviews to layout

• Receives touch events, can be assigned gesture recognizers

• Participates in the responder chain for user input (keyboard, pop-up menus)

UIViews• Output

• Input

• Big Scrolling Complicated Things

• Custom

UILabelDisplays rich-

text

Output Views

UIImageViewDisplays images

UIBezierPathDisplays vector graphics

UIActivityIndicatorView

Animates a circle toindicate activity

UIProgressViewA linear progress

bar

Input Views

UISliderDiscrete or continuous

number selection

UIStepperTwo-button

action

UISegmentedControl

Modern radio buttons

UITextFieldSingle-line text

input

UIButtonYou know what it

does

UISwitchOn/Off toggle

UIScrollView• Scroll and zoom subviews

• Responsible for velocity scroll and bounce effects

• Can also page through views

• Scroll views within scroll views are supported

• Basis for many full screen views

UITableView

• Scroll view designed to display a long vertical list of cells

• Used everywhere in iOS from login forms, status feeds, episode lists…

• MonoTouch.Dialog simplifies the interface

UICollectionView• Versatile and efficient view

to display large amount numbers of views arranged and sized in any fashion

• Introduced in iOS 6, these are meant to replace UITableViews to create richer UIs

• Pluggable layout engine with built-in flow layout

• Advanced transition and physical animations built into iOS 7

UIWebView

• Practically an entire web browser in a UIView

• You can control its cookies and cache

• You can execute JavaScript code against the DOM

• You can feed it raw HTML or point it to a URL

UITextView

• Multiline rich text editor

UIPickerView

• UIDatePicker is a ready-to-use UIPickerView

Custom UIViews

Composition through Subviews

• Need to layout using auto layout constraints or old-fashioned rectangle setting

class MyView : UIView {

public MyView () {

AddSubviews (Time, Progress, Title, Author);

Time.Frame = new RectangleF (20, 20, 300, 40);

Progress.Frame = new RectangleF (20, 200, 300, 40);

Title.Frame = new RectangleF (20, 300, 300, 80);

Author.Frame = new RectangleF (20, 380, 300, 80);

}}

class MyView : UIView {

public MyView () {

AddSubviews (Time, Progress, Title, Author);

this.ConstrainLayout (() =>

Time.Frame.Left == this.Frame.Left + 20 &&Time.Frame.Right == this.Frame.Right - 20 &&Time.Frame.Top == this.Frame.Top + 20 &&

Progress.Frame.GetMidX () == Time.Frame.GetMidX () &&Progress.Frame.Top == Time.Frame.Bottom &&

Title.Frame.GetMidX () == this.Frame.GetMidX () &&Title.Frame.Top == PlayPause.Frame.Bottom &&Title.Frame.Width <= TitleMaxWidth &&

Author.Frame.GetMidX () == this.Frame.GetMidX () &&Author.Frame.Top == Title.Frame.Bottom &&Author.Frame.Width <= TitleMaxWidth);

}}

EasyLayout https://gist.github.com/praeclarum/6225853

Custom UIViewsCustom Drawing

public override void Draw (RectangleF rect){

var c = UIGraphics.GetCurrentContext ();

var b = Bounds;c.SetLineWidth (1.0f);

c.SetRGBStrokeColor (202/255.0f, 202/255.0f, 202/255.0f, 1);

c.MoveTo (0, 0);c.AddLineToPoint (0, b.Height);c.StrokePath ();

c.MoveTo (b.Width, 0);c.AddLineToPoint (b.Width, b.Height);c.StrokePath ();

c.SetRGBStrokeColor (176/255.0f, 176/255.0f, 176/255.0f, 1);

c.MoveTo (0, b.Height);c.AddLineToPoint (b.Width, b.Height);c.StrokePath ();

}

UIGestureRecognizer

• Easy recognition of single and multitouch events

• Multiple recognizers can be added to a view

• Can coordinate with other gesture recognizers

UIXGestureRecognizer

• LongPress

• Pan

• Pinch

• Rotation

• ScreenEdgePan

• Swipe

• Tap

UIMyGestureRecognizer

• Making your own is easy

• Just Respond to these events:

TouchesBegan

TouchesMoved

TouchesEnded

TouchesCancelled

UIViewController

• To implement a screen of your app, inherit from UIViewController

• But there are built-in view controllers

UINavigationController

• Maintains a stack of UIViewController like a web browser

• Provides a navigation bar and a toolbar for actions

• Fundamental controller for iPhone UI

• UIViewControllers are designed to work well within a UINavigationController

UITabBarController

• Up to 5 discrete view controllers accessible by buttons at the bottom of the screen

• Often these view controllers are UINavigationControllers

UISplitViewController

• Only available on iPad

• Must be the window’s RootViewController

• Provides automatic handling of master-detail type UIs

UIPageViewController

• Built-in page turn effect

UITableViewController &UICollectionViewControlle

r

UIPopoverController

• Not a UIViewController, not a UIView, but works with them

• Only works on the iPad (crash on iPhone)

Reacting to events

UIViewController

UIViewView

ModelUILabel

UIButton…

Subviews

User EventsUser EventsUser EventsUser EventsService Service EventsEventsService Service EventsEvents

Many event sources• .NET events

• Overridable methods

• Async tasks

• NSNotificationCenter

• Responder Chain

• Delegate objects

Delegate objects

• Instead of many events that can be subscribed to by many different objects,

• Events are overridable methods on an object that get called as if they were events

• Can also be used to pass data back to the calling object

Delegate objects UISplitViewController splitVC = …;

splitVC.Delegate = new SplitDelegate ();

class SplitDelegate : UISplitViewControllerDelegate{

public override bool ShouldHideViewController (UISplitViewController svc, UIViewController viewController, UIInterfaceOrientation inOrientation)

{return true;

}

public override void WillHideViewController (UISplitViewController svc, UIViewController aViewController, UIBarButtonItem barButtonItem, UIPopoverController pc)

{}

public override void WillShowViewController (UISplitViewController svc, UIViewController aViewController, UIBarButtonItem button)

{}

}

Reusable Views

In order to be fast and lean,

views with potentially many subviews

recycle offscreen views

(Virtual list mode in WinForms)

Reusable Views

Usually these views have a

DataSource

property that is responsible for creating and data binding reusable subviews

UITableView.DataSource

When a cell goes offscreen, it is removed from the view hierarchy and stored in a cache

When the table view needs a new cell to display, your code should take from this cache

public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath){

var cell = tableView.DequeueReusableCell (EpisodeTableViewCell.ReuseId) as EpisodeTableViewCell;

if (cell == null) {cell = new EpisodeTableViewCell ();

}

cell.Episode = Controller.episodes [indexPath.Row];

return cell;}

UICollectionView.DataSource

collectionView.RegisterClassForCell (typeof(EpisodeCell), EpisodeCell.ReuseId);

public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)

{var cell = (EpisodeCell)collectionView.DequeueReusableCell (

EpisodeTableViewCell.ReuseId, indexPath)

cell.Episode = Controller.episodes [indexPath.Row];

return cell;}

UIPageView&

UIPickerView

Theming

• Theming is supported at the OS level

• Meant to be set once

• Appearance attributes can be set per class or per object

Theming

UINavigationBar.Appearance.SetTitleVerticalPositionAdjustment (-1, UIBarMetrics.Default);UINavigationBar.Appearance.SetTitleVerticalPositionAdjustment (-4, UIBarMetrics.LandscapePhone);

UINavigationBar.Appearance.SetTitleTextAttributes (new UITextAttributes {TextColor = BarTextColor,TextShadowColor = BarTextShadowColor,TextShadowOffset = BarTextShadowOffset,Font = UIFont.FromName (TitleFontName, BarTitleFontSize),

} );

MapsView Controller Hierarchy

UINavigationController MapViewController

View Hierarchy

UIWindow

UINavigationBar UIButton UISearchBar UIButton

MKMapView MKMapOverlay[]

UIToolbar UIButton[]

View Controller Hierarchy

UINavigationController MapViewController

View Hierarchy

UIWindow

UINavigationBar UIButton UISearchBar UIButton

MKMapView MKMapOverlay[]

UIToolbar UIButton[]

Maps

Mapsclass MapViewController : UIViewController{

override void ViewDidLoad (){

base.ViewDidLoad ();

// Set our View to the interactive mapView = new MKMapView ();

// Set (top) navigation bar buttonsNavigationItem.LeftBarButtonItem =

new UIBarButtonItem (UIImage.FromBundle ("Directions.png"),HandleDirections);

// Set (bottom) toolbar buttonsToolbarItems = new[] {

new UIBarButtonItem (UIImage.FromBundle ("Location.png"),HandleLocation);

} ;}

}

Window.RootViewController = new UINavigationController (

new MapViewController ());

Demo