Xamarin.iOS Presentation

www.michaelridland.com

@rid00zhttp://

xamarinhackday.com/

Xamarin iOS UI Development

http://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




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




@rid00zhttp://

xamarinhackday.com/

iOS Application Structure




@rid00zhttp://

xamarinhackday.com/

iOS Application Structure




@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




@rid00zhttp://

xamarinhackday.com/

UINavigationController : UIViewController




@rid00zhttp://

xamarinhackday.com/

UITableViewController

NavigationTableView

TableViewSection

Table Cells

Section Headers




@rid00zhttp://

xamarinhackday.com/

UITableViewController - MVC




@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;}




@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.




@rid00zhttp://

xamarinhackday.com/

UIScrollView

• It’s the Wow factor that you see in apps.

• It’s everywhere! (unlock screen, swipe to delete, UITableView, UICollectionView)




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




@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.




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




@rid00zhttp://

xamarinhackday.com/

Universal Apps




@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




@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




@rid00zhttp://

xamarinhackday.com/

Demos




@rid00zhttp://

xamarinhackday.com/

Just the Surface

• That’s just touching the surface.

• Xamarin Documentationhttp://developer.xamarin.com/guides/ios/



http://developer.xamarin.com/guides/ios/


@rid00zhttp://

xamarinhackday.com/

Reveal App - http://revealapp.com/



http://revealapp.com/


@rid00zhttp://

xamarinhackday.com/

Pixate Freestyle - http://www.freestyle.org/



http://www.freestyle.org/


@rid00zhttp://

xamarinhackday.com/

iOS Native Summary

• Very powerful and performant API

• A little tedious to program using the callback methods

• UI not cross platform




@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.




@rid00zhttp://

xamarinhackday.com/

Program Against Single API




@rid00zhttp://

xamarinhackday.com/

That API is mapped to Native UI




@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




@rid00zhttp://

xamarinhackday.com/

The API

• Pages

• Layouts

• Views

• Cells




@rid00zhttp://

xamarinhackday.com/

Pages




@rid00zhttp://

xamarinhackday.com/

Layouts, Views and Cells




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




@rid00zhttp://

xamarinhackday.com/

Demo - using Native Controls




@rid00zhttp://

xamarinhackday.com/

Demo - porting from MvvmCross to Xamarin.Forms




@rid00zhttp://

xamarinhackday.com/

That’s All!

Dont forget: Xamarin Hack Day http://xamarinhackday.com/

Questions?



http://xamarinhackday.com/

Xamarin.iOS Presentation

Mobile

new rectanglef frame

new uiscrollview

var cell

new sizef

new rectanglef15

height var frame

pageno frame

collection view