www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Xamarin iOS UI Development
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
About Me
• Michael Ridland
• 2.5+ years mobile development, start...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Options for Xamarin.iOS UI
• * Native APIs Programmatically
• * X...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
iOS Application Structure
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
iOS Application Structure
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UIViewController
• Holds all views together
• Has a single child ...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UINavigationController : UIViewController
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UITableViewController
Navigation
TableView
TableViewSection
Table...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UITableViewController - MVC
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UITableViewController
public override int NumberOfSections (UITab...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UICollectionViewController
• A collection view displays an ordere...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UIScrollView
• It’s the Wow factor that you see in apps.
• It’s e...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
UIScrollView Example - Paging
_scrollView = new UIScrollView ();
...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Layout Types
Auto Sizing
Auto Layout (iOS 6+)
textfield1.Frame
= ...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
CALayer
• Every view has a CALayer (.Layer).
• CALayer purpose is...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Universal Apps
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Gesture Recognizers
LongPress, Pan, Pinch, Rotation, ScreenEdgePa...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Animation of Views
UIView.BeginAnimations ("FadeIn");
UIView.SetA...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Demos
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Just the Surface
• That’s just touching the surface.
• Xamarin Do...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Reveal App - http://revealapp.com/
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Pixate Freestyle - http://www.freestyle.org/
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
iOS Native Summary
• Very powerful and performant API
• A little ...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Xamarin.Forms
Xamarin.Forms is a cross-platform natively backed U...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Program Against Single API
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
That API is mapped to Native UI
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Easy setup on each platform
public override bool FinishedLaunchin...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
The API
• Pages
• Layouts
• Views
• Cells
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Pages
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Layouts, Views and Cells
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Other Features
• Custom Controls - within API
• Custom Controls -...
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Demo - using Native Controls
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
Demo - porting from MvvmCross to
Xamarin.Forms
www.michaelridland.com @rid00zhttp://xamarinhackday.com/
That’s All!
Dont forget: Xamarin Hack Day
http://xamarinhackday.c...
Upcoming SlideShare
Loading in …5
×

Xamarin.iOS Presentation

1,692 views

Published on

Presentation delivered at Sydney Mobile .NET Users group, June 2014.

Published in: Mobile, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,692
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Xamarin.iOS Presentation

  1. 1. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Xamarin iOS UI Development
  2. 2. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ About Me • Michael Ridland • 2.5+ years mobile development, started with Hybrid(Phonegap + jQuery Mobile) and moved to Xamarin, primarily Xamarin.iOS. C# for 10 years. • Previously was building Web and Mobile Apps for a ERP software company • Now Independent Consultant • www.michaelridland.com • @rid00z
  3. 3. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Options for Xamarin.iOS UI • * Native APIs Programmatically • * Xamarin.Forms • Native APIs via StoryBoards (UI Designer) • MonoTouch.Dialog (obsolete) • Native APIs + Hybrid (Razor Views)
  4. 4. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ iOS Application Structure
  5. 5. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ iOS Application Structure
  6. 6. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UIViewController • Holds all views together • Has a single child View that the OS displays. • Can embed other VCs • TableViewController, CollectionViewController, TabBarController, NavigationController, ViewController • viewDidLoad is called exactly once, when the view controller is first loaded into memory. • viewDidAppear, viewWillAppear, viewDidDisappear, viewWillDisappear • willAnimateRotation
  7. 7. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UINavigationController : UIViewController
  8. 8. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UITableViewController Navigation TableView TableViewSection Table Cells Section Headers
  9. 9. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UITableViewController - MVC
  10. 10. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UITableViewController public override int NumberOfSections (UITableView tableView) { return 1; } public override int RowsInSection (UITableView tableview, int section) { return 1; } public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) { var cell = tableView.DequeueReusableCell (MyTableViewControllerCell.Key) as MyTableViewControllerCell; if (cell == null) cell = new MyTableViewControllerCell (); cell.DetailTextLabel.Text = "DetailsTextLabel"; return cell; }
  11. 11. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UICollectionViewController • A collection view displays an ordered collection of data items using standard or custom layouts. • Similar to a table view, a collection view gets data from your custom data source objects and displays it using a combination of cell, layout, and supplementary views.
  12. 12. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UIScrollView • It’s the Wow factor that you see in apps. • It’s everywhere! (unlock screen, swipe to delete, UITableView, UICollectionView)
  13. 13. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UIScrollView Example - Paging _scrollView = new UIScrollView (); _scrollView.PagingEnabled = true; _scrollView.Frame = new RectangleF (0, 0, _fullPageSize.Width, _fullPageSize.Height); _scrollView.ContentSize = new SizeF (_fullPageSize.Width * _pageCount, _fullPageSize.Height); var frame = new RectangleF(); frame.X = _scrollView.Frame.Size.Width * pageNo; frame.Y = 0; frame.Size = _scrollView.Frame.Size; _scrollView.ScrollRectToVisible(frame, animated);
  14. 14. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Layout Types Auto Sizing Auto Layout (iOS 6+) textfield1.Frame = new RectangleF(15, 277, 79, 27); textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin; Auto Layout is about relationships - the positions of elements relative to other elements on the design surface. I’ve primarily used AutoSizing to support iOS 5. It works ok but I do have to use LayoutSubviews in some cases. http://praeclarum.org/post/45690317491/easy-layout-a-dsl-for-nslayoutconstraint Looking at using easy layout in future projects.
  15. 15. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ CALayer • Every view has a CALayer (.Layer). • CALayer purpose is to manage the visual content and the geometry of the content. • But it also has it’s own attributes you can control like Border, Radius, Transformations. _user.Layer.BorderColor = UIStyle.Colours.PrimaryBorder217.CGColor; _user.Layer.BorderWidth = 1; ArrowView.Layer.Transform = CATransform3D.MakeRotation ((float) Math.PI, 0, 0, 1);
  16. 16. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Universal Apps
  17. 17. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Gesture Recognizers LongPress, Pan, Pinch, Rotation, ScreenEdgePan, Swipe, Tap var swipeLeft = new UISwipeGestureRecognizer(viewSwipedLeft); swipeLeft.Direction = UISwipeGestureRecognizerDirection.Left; this.AddGestureRecognizer(swipeLeft); var swipeRight = new UISwipeGestureRecognizer(viewSwipedRight); swipeRight.Direction = UISwipeGestureRecognizerDirection.Right; this.AddGestureRecognizer(swipeRight); var swipeUp = new UISwipeGestureRecognizer(viewSwipedUp); swipeUp.Direction = UISwipeGestureRecognizerDirection.Up; this.AddGestureRecognizer(swipeUp); Supported Gestures
  18. 18. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Animation of Views UIView.BeginAnimations ("FadeIn"); UIView.SetAnimationDuration (1f); _signInButton.Alpha = 1; UIView.CommitAnimations (); UIView.Transition (_nav.View, _loginScreen, 1, UIViewAnimationOptions.TransitionFlipFromLeft, FlipFinished); Transition between Views Custom Animations
  19. 19. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demos
  20. 20. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Just the Surface • That’s just touching the surface. • Xamarin Documentation http://developer.xamarin.com/guides/ios/
  21. 21. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Reveal App - http://revealapp.com/
  22. 22. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Pixate Freestyle - http://www.freestyle.org/
  23. 23. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ iOS Native Summary • Very powerful and performant API • A little tedious to program using the callback methods • UI not cross platform
  24. 24. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Xamarin.Forms Xamarin.Forms is a cross-platform natively backed UI toolkit abstraction that allows developers to easily create user interfaces that can be shared across Android, iOS, and Windows Phone.
  25. 25. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Program Against Single API
  26. 26. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ That API is mapped to Native UI
  27. 27. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Easy setup on each platform public override bool FinishedLaunching (UIApplication app, NSDictionary options) { Forms.Init (); window = new UIWindow (UIScreen.MainScreen.Bounds); window.RootViewController = App.GetMainPage ().CreateViewController (); window.MakeKeyAndVisible (); return true; } protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); Xamarin.Forms.Forms.Init (this, bundle); SetPage (App.GetMainPage ()); } iOS Android public MainPage() { InitializeComponent(); Forms.Init(); Content = App.GetMainPage().ConvertPageToUIElement(this); } Windows Phone
  28. 28. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ The API • Pages • Layouts • Views • Cells
  29. 29. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Pages
  30. 30. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Layouts, Views and Cells
  31. 31. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Other Features • Custom Controls - within API • Custom Controls - outside of API e.g. Native • Can use XAML • Designed to work with Mvvm • Builtin Data Binding - One Way/Two Way • Basic animations (e.g. rotate, fade, scale) which can be composed to build complex effects • Gesture Recognizer (Tap) • Familiar API for Navigation • Native Dependancy Injection (Dependancy Service)
  32. 32. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demo - using Native Controls
  33. 33. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demo - porting from MvvmCross to Xamarin.Forms
  34. 34. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ That’s All! Dont forget: Xamarin Hack Day http://xamarinhackday.com/ Questions?

×