Xamarin.iOS Presentation

  • 534 views
Uploaded on

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

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

More in: Mobile , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
534
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Xamarin iOS UI Development
  • 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. 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ iOS Application Structure
  • 5. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ iOS Application Structure
  • 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UINavigationController : UIViewController
  • 8. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UITableViewController Navigation TableView TableViewSection Table Cells Section Headers
  • 9. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ UITableViewController - MVC
  • 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. 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. 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. 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. 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. 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Universal Apps
  • 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. 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demos
  • 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Reveal App - http://revealapp.com/
  • 22. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Pixate Freestyle - http://www.freestyle.org/
  • 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. 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Program Against Single API
  • 26. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ That API is mapped to Native UI
  • 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ The API • Pages • Layouts • Views • Cells
  • 29. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Pages
  • 30. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Layouts, Views and Cells
  • 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. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demo - using Native Controls
  • 33. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ Demo - porting from MvvmCross to Xamarin.Forms
  • 34. www.michaelridland.com @rid00zhttp://xamarinhackday.com/ That’s All! Dont forget: Xamarin Hack Day http://xamarinhackday.com/ Questions?