Programming iOS in C#
Frank A. Krueger
Seattle .NET Mobile
March 4, 2014
AGENDA
•

Intro to iOS APIs

•

Intro to UIKit

•

Demo programming with Xamarin Studio
Frank
@praeclarum
http://praeclarum.org
http://github.com/praeclarum
•

.NET developer since .NET 1.1

•

First iOS app ac...
Frank
Frank
•

Started using MonoTouch (Xamarin.iOS)
summer 2009

•

First app released with iPad in May 2010
Frank
Frank
https://github.com
/
praeclarum/lcar
s
Frank

•

iCircuit released
July, 2010
iOS APIs
iOS APIs
Cocoa Touch
UIKit, GameKit, MapKit, …

Services
Foundation, CoreLocation,
CoreMotion, PassKit,
JavaScriptCore, Mu...
Cocoa Touch
•

UIKit to create the UI

•

iAd to get rich

•

GameKit to interface with Game Center

•

MapKit for interac...
Media
•

CoreGraphics to render vector graphics onto bitmaps

•

ImageIO even supports raw images

•

CoreImage hardware a...
Services
•

Foundation provides a serializable data, collections, networking, data streams,
strings (like the BCL)

•

Cor...
Core OS
•

Accelerate super fast and efficient image and
matrix math library

•

Security provides safe places to put data...
iOS API
Cocoa Touch
UIKit, GameKit, MapKit, …

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

h...
Objective-C Declaration
- (void)presentViewController:(UIViewController *)viewControllerToPresent
animated:(BOOL)flag
comp...
Objective-C Declaration in C#
Task PresentViewControllerAsync (
UIViewController viewControllerToPresent,
bool animated)

...
UIKit
Single Screen App
UIApplication
Delegate

UIApplicationDelegate
Window

UIWindow
Single Screen App
UIApplication

Created by OS

Delegate

UIApplicationDelegate

Subclassed
by your app

Window

UIWindow
...
Single Screen App
UIWindow

RootViewControlle
r

UIViewController
UIViewController
•

The Controller in MVC responsible for
-

monitoring and coordinating user interactions

-

to view and...
UIViewController
is an MVC controller
is an MVC controller
Model

VIEW
CONTROLLER

Cloud Data
User Data
Services
Device Se...
UIViewController
•

A Screen of UI
-

on iPhone, takes up the majority of the screen

-

on iPad, can take up the whole sc...
Single Screen App
UIWindow

RootViewControlle
r

UIViewController

Model

View

UIView
Single Screen App
UIWindow

RootViewControlle
r

UIViewController

View

UIView
Subviews

Model

UILabel
UIButton
…
Multi Screen App
UIWindow

UIViewController

View

RootViewControlle
r

UIViewController

Subviews
ChildViewController
s

...
UIView
•

“Dumb” - should not interact with the Model directly

•

Responsible for drawing itself

•

Contains subviews to...
UIViews
•

Output

•

Input

•

Big Scrolling Complicated Things

•

Custom
Output Views
UILabel
Displays rich-text

UIImageView
Displays images

UIBezierPath
Displays vector graphics

UIActivityInd...
Input Views
UIButton
You know what it does

UISwitch
On/Off toggle

UITextField
Single-line text input
UISegmentedContro
l...
UIScrollView
•

Scroll and zoom subviews

•

Responsible for velocity scroll
and bounce effects

•

Can also page through ...
UITableView
•

Scroll view designed to display
a long vertical list of cells

•

Used everywhere in iOS from
login forms, ...
UICollectionView
•

Versatile and efficient view to
display large amount numbers
of views arranged and sized in
any fashio...
UIWebView
•

Practically an entire web
browser in a UIView

•

You can control its cookies and
cache

•

You can execute J...
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 set...
class MyView : UIView {
public MyView () {
AddSubviews (Time, Progress, Title, Author);

}

}

Time.Frame = new RectangleF...
EasyLayout https://gist.github.com/praeclarum/6225853
class MyView : UIView {
public MyView () {
AddSubviews (Time, Progre...
Custom UIViews
Custom Drawing
public override void Draw (RectangleF rect)
{
var c = UIGraphics.GetCurrentContext ();
var b...
UIGestureRecognizer
•

Easy recognition of single and multitouch events

•

Multiple recognizers can be added to a view

•...
UIXGestureRecognizer
•

LongPress

•

Pan

•

Pinch

•

Rotation

•

ScreenEdgePan

•

Swipe

•

Tap
UIMyGestureRecognizer
•

Making your own is easy

•

Just Respond to these events:
TouchesBegan
TouchesMoved
TouchesEnded
...
UIViewController
•

To implement a screen of your app, inherit from
UIViewController

•

But there are built-in view contr...
UINavigationController
•

Maintains a stack of
UIViewController like a web
browser

•

Provides a navigation bar and
a too...
UITabBarController
•

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

•

Often these ...
UISplitViewController
•

Only available on iPad

•

Must be the window’s
RootViewController

•

Provides automatic handlin...
UIPageViewController

•

Built-in page turn effect
UITableViewController &
UICollectionViewController
Controller
UIPopoverController

•

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

•

Only works on the iPad (crash
on iPh...
Reacting to events
UIViewController

View

UIView
Subviews

Model

Service
Service
Events
Events

UILabel
UIButton
…

User...
Many event sources
•

.NET events

•

Overridable methods

•

Async tasks

•

NSNotificationCenter

•

Responder Chain

•
...
Delegate objects
•

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

•

Events are overridable...
Delegate objects
UISplitViewController splitVC = …;
splitVC.Delegate = new SplitDelegate ();
class SplitDelegate : UISplit...
Reusable Views
In order to be fast and lean,
views with potentially many subviews
recycle offscreen views
(Virtual list mo...
Reusable Views
Usually these views have a

DataSource
property that is responsible for creating and data
binding reusable ...
UITableView.DataSource
public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
{
var cell =...
UICollectionView.DataSource
collectionView.RegisterClassForCell (typeof(EpisodeCell), EpisodeCell.ReuseId);

public overri...
UIPageView
&
UIPickerView
UIPickerView
UIPickerView
Theming
•

Theming is supported at the OS level

•

Meant to be set once

•

Appearance attributes can be set per class or...
Theming
UINavigationBar.Appearance.SetTitleVerticalPositionAdjustment (-1, UIBarMetrics.Default);
UINavigationBar.Appearan...
Maps
View Controller Hierarchy
UINavigationController
MapViewController

View Hierarchy
UIWindow
UINavigationBar
UIButton
...
Maps
View Controller Hierarchy
UINavigationController
MapViewController

View Hierarchy
UIWindow
UINavigationBar
UIButton
...
Maps
class MapViewController : UIViewController
{
override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Set our View to t...
Demo
Programming iOS in C#
Programming iOS in C#
Programming iOS in C#
Programming iOS in C#
Programming iOS in C#
Programming iOS in C#
Programming iOS in C#
Upcoming SlideShare
Loading in …5
×

Programming iOS in C#

2,336 views

Published on

Video here: http://youtu.be/eeGvMkicAv4

Xamarin.iOS enables us to write native applications that take full advantage of iOS's large number of libraries - from the user interface to motion processing, graphics, audio, cameras, sensors, networking... This incredibly rich software platform runs all day long in the pockets of hundreds of millions of people. When you couple it to .NET, you have a programmer's dream environment.

So let's learn to program iOS! In a little over an hour we will:

• Browse through iOS's APIs to find interesting bits of functionality
• Explore the architecture of UIKit - the user interface framework for iOS
• Use Xamarin Studio to write and debug applications

With this introduction you will have enough knowledge to write your first application that can use all the richness of iOS and all your favorite code written in .NET. Oh, and it will run on beautiful devices too.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,336
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Programming iOS in C#

  1. 1. Programming iOS in C# Frank A. Krueger Seattle .NET Mobile March 4, 2014
  2. 2. AGENDA • Intro to iOS APIs • Intro to UIKit • Demo programming with Xamarin Studio
  3. 3. Frank @praeclarum http://praeclarum.org http://github.com/praeclarum • .NET developer since .NET 1.1 • First iOS app accepted to the App Store on Dec 11, 2008 • First apps written in Objective-C++
  4. 4. Frank
  5. 5. Frank • Started using MonoTouch (Xamarin.iOS) summer 2009 • First app released with iPad in May 2010
  6. 6. Frank
  7. 7. Frank https://github.com / praeclarum/lcar s
  8. 8. Frank • iCircuit released July, 2010
  9. 9. iOS APIs
  10. 10. iOS APIs Cocoa Touch UIKit, GameKit, MapKit, … Services Foundation, CoreLocation, CoreMotion, PassKit, JavaScriptCore, Multipeer Connectivity, … Media CoreGraphics, CoreAudio, CoreImage, CoreText, OpenGL, SpriteKit, … Core OS Accelerate, CoreBluetooth, ExternalAccessory, …
  11. 11. 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
  12. 12. 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?
  13. 13. 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
  14. 14. 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 • Exter nalAccessory gives low level access to devices plugged into the device
  15. 15. iOS API Cocoa Touch UIKit, GameKit, MapKit, … Media CoreGraphics, CoreAudio, CoreImage, CoreText, OpenGL, SpriteKit, … https://developer.apple.com/library/ios Services Foundation, CoreLocation, CoreMotion, PassKit, JavaScriptCore, Multipeer Connectivity, … Core OS Accelerate, CoreBluetooth, ExternalAccessory, …
  16. 16. 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 }];
  17. 17. Objective-C Declaration in C# Task PresentViewControllerAsync ( UIViewController viewControllerToPresent, bool animated) await PresentViewController (vc, true); // Do stuff after it’s been presented - (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion
  18. 18. UIKit
  19. 19. Single Screen App UIApplication Delegate UIApplicationDelegate Window UIWindow
  20. 20. Single Screen App UIApplication Created by OS Delegate UIApplicationDelegate Subclassed by your app Window UIWindow Created by you
  21. 21. Single Screen App UIWindow RootViewControlle r UIViewController
  22. 22. UIViewController • The Controller in MVC responsible for - monitoring and coordinating user interactions - to view and edit model data
  23. 23. UIViewController is an MVC controller is an MVC controller Model VIEW CONTROLLER Cloud Data User Data Services Device Sensors Label Table Edit Box
  24. 24. 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
  25. 25. Single Screen App UIWindow RootViewControlle r UIViewController Model View UIView
  26. 26. Single Screen App UIWindow RootViewControlle r UIViewController View UIView Subviews Model UILabel UIButton …
  27. 27. Multi Screen App UIWindow UIViewController View RootViewControlle r UIViewController Subviews ChildViewController s UIViewController Model UIView UILabel UIButton View UIView Subviews UILabel UIButton
  28. 28. 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)
  29. 29. UIViews • Output • Input • Big Scrolling Complicated Things • Custom
  30. 30. Output Views UILabel Displays rich-text UIImageView Displays images UIBezierPath Displays vector graphics UIActivityIndicatorVie w Animates a circle to indicate activity UIProgressView A linear progress bar
  31. 31. Input Views UIButton You know what it does UISwitch On/Off toggle UITextField Single-line text input UISegmentedContro l Modern radio buttons UIStepper Two-button action UISlider Discrete or continuous number selection
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. UITextView • Multiline rich text editor
  37. 37. UIPickerView • UIDatePicker is a ready-to-use UIPickerView
  38. 38. Custom UIViews Composition through Subviews • Need to layout using auto layout constraints or old-fashioned rectangle setting
  39. 39. 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);
  40. 40. EasyLayout https://gist.github.com/praeclarum/6225853 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);
  41. 41. Custom UIViews Custom 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 ();
  42. 42. UIGestureRecognizer • Easy recognition of single and multitouch events • Multiple recognizers can be added to a view • Can coordinate with other gesture recognizers
  43. 43. UIXGestureRecognizer • LongPress • Pan • Pinch • Rotation • ScreenEdgePan • Swipe • Tap
  44. 44. UIMyGestureRecognizer • Making your own is easy • Just Respond to these events: TouchesBegan TouchesMoved TouchesEnded TouchesCancelled
  45. 45. UIViewController • To implement a screen of your app, inherit from UIViewController • But there are built-in view controllers
  46. 46. 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
  47. 47. UITabBarController • Up to 5 discrete view controllers accessible by buttons at the bottom of the screen • Often these view controllers are UINavigationControllers
  48. 48. UISplitViewController • Only available on iPad • Must be the window’s RootViewController • Provides automatic handling of master-detail type UIs
  49. 49. UIPageViewController • Built-in page turn effect
  50. 50. UITableViewController & UICollectionViewController Controller
  51. 51. UIPopoverController • Not a UIViewController, not a UIView, but works with them • Only works on the iPad (crash on iPhone)
  52. 52. Reacting to events UIViewController View UIView Subviews Model Service Service Events Events UILabel UIButton … User Events User Events
  53. 53. Many event sources • .NET events • Overridable methods • Async tasks • NSNotificationCenter • Responder Chain • Delegate objects
  54. 54. 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
  55. 55. 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) { }
  56. 56. Reusable Views In order to be fast and lean, views with potentially many subviews recycle offscreen views (Virtual list mode in WinForms)
  57. 57. Reusable Views Usually these views have a DataSource property that is responsible for creating and data binding reusable subviews
  58. 58. UITableView.DataSource 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; 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
  59. 59. 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;
  60. 60. UIPageView & UIPickerView UIPickerView UIPickerView
  61. 61. Theming • Theming is supported at the OS level • Meant to be set once • Appearance attributes can be set per class or per object
  62. 62. 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), } );
  63. 63. Maps View Controller Hierarchy UINavigationController MapViewController View Hierarchy UIWindow UINavigationBar UIButton UISearchBar UIButton MKMapView MKMapOverlay[] UIToolbar UIButton[]
  64. 64. Maps View Controller Hierarchy UINavigationController MapViewController View Hierarchy UIWindow UINavigationBar UIButton UISearchBar UIButton MKMapView MKMapOverlay[] UIToolbar UIButton[]
  65. 65. Maps class MapViewController : UIViewController { override void ViewDidLoad () { base.ViewDidLoad (); // Set our View to the interactive map View = new MKMapView (); // Set (top) navigation bar buttons NavigationItem.LeftBarButtonItem = new UIBarButtonItem ( UIImage.FromBundle ("Directions.png"), HandleDirections); } } // Set (bottom) toolbar buttons ToolbarItems = new[] { new UIBarButtonItem ( UIImage.FromBundle ("Location.png"), HandleLocation); }; Window.RootViewController = new UINavigationController ( new MapViewController ());
  66. 66. Demo

×