Creare app native su iOS, Android, Mac & Windows in C#

Introduzione a Xamarin.iOS

Gli speaker di oggi

Guido MagrinXamarin & Microsoft Student Partner

Xamarin Certified Developer

@GuidoMagrin

Dove trovo le slide?

http://www.slideshare.net/guidomagrin

Gli Xamarin Student Partner

https://www.facebook.com/XSAMilano

Oggi parleremo di…

Xamarin.iOS

Chi ha giàsentito parlare diXamarin.iOS?

Xamarin + Xamarin.FormsApproccio offerto da Xamarin.Forms: Codice UI condiviso, controlli nativi

Approccio tradizionale di Xamarin

Shared UI Code

.NET + iOS APIs | copertura al 100%

Qualsiasi cosa si possa fare in Objective-Co Swift può essere fatta in C#con Xamarin in Visual Studio

Xamarin è sempre aggiornato

Release iOS supportate al day-one:iOS 5, iOS 6, iOS 7, iOS 7.1, iOS 8, iOS 9, iOS 10

Supporto ad Apple Watch!

Xamarin StudioPC o Mac

Plugin Visual Studio VS 2010 e

superiore

Ambienti di Sviluppo

Integrazione in Visual Studio

Una soluzione sola per:• iOS• Android• Windows Phone• Windows Store

Tutti i plugin e le funzioni di Visual Studio:• ReSharper• Team Foundation Server

Integrazione in Visual Studio

Debugging su:• Emulatori• Dispositivi

Integrati nella toolbar:• Stato• Logs• Lista di dispositivi

Xamarin Studio

• Ottimizzato per lo sviluppo cross-platform

• Accedi alle API native con l’autocompletamento

• Designer per Android e iOS

• Debugging avanzato su emulatore o dispositivo

Designer per Xamarin iOS

• Il primo designer iOS presente in Xamarin Studio e Visual Studio

• Simile al designer tradizionale di Visual Studio

• Supporta pienamente l’UIKit

• Modifica i componenti personalizzati e di terze parti

• Modifiche grafiche applicate in tempo reale

Cosa impareremo oggi?

• Fundamentals• The package• Views and navigation• Managing lists• Working files

Fundamentals

Before we start...

• You need a Mac:– OS X 10.9.4+– Xcode– Xamarin.iOS

• You can still work on your Windows PC:– Visual Studio– Xamarin.iOS

Before we start...

• The OS X and Windows machines have to be connected to the same network

• You can connect a OS X machine only to multiple Windows machines

• OS X and Windows need to have the same Xamarin.iOS version installed

iPhone simulator

• Requires the latest version of Xamarin.iOS.

• Allows you to “completely forget” about your Mac.

• Fun fact: given that the Windows PC has a touchscreen, it supports this kind of input.

What if I don’t have a Mac? Rent one!

• Always available.• Pay as you go.• Scalable according to our needs.

The application

• Main– It’s the entry point of the app– It creates the application

• AppDelegate– It manages the system events– It has an Application Window with the UI– It starts the Main interface

The startup

• Storyboard– Takes care of initializing the main controller– The controller manages the main view and the sub views

• ViewController– It receives the interactions

from the views– It takes care of displaying

the data on the view

Apple Watch has Storyboards, too!

• Same functionalities you would expect from iPhone storyboards.

• As of today, easier to work with in terms of app rescaling.

Model-View-Controller (MVC)

• iOS is based on MVC– The Model describes the data– The View describes the UI– The Controller manages the interactions

between the Model and the View

La prima appXamarin.Forms

Domanda 1

Posso creare applicazioni iOS usando esclusivamente un PC Windows

a) Verob) Falso

Domanda 1

Posso creare applicazioni iOS usando esclusivamente un PC Windows

a) Verob) Falso

Domanda 2

Da quali componenti è composta un’applicazione iOS?a) Main, AppDelegateb) Window, AppDelegatec) Main, ViewControllerd) Screen, ViewController

Domanda 2

Da quali componenti è composta un’applicazione iOS?a) Main, AppDelegateb) Window, AppDelegatec) Main, ViewControllerd) Screen, ViewController

The package

Resources

• iOS requires that all the resources are placed in the root folder

• Xamarin adds a Resource folder– At compile time, the content is copied in the root

• The Build Action has to be set to BundleResource

Images

• The original iPhone had a resolution of 320x480

• New resolutions have been added• Naming conventions to manage the assets:

– @2x -> Retina– @3x-> iPhone 6 Plus– ~iphone -> Used on the iPhone– ~ipad -> Used on the iPad– Example: Image.png, Image@2x.png,

Image2x~iphone.png

Info.plist and Entitlements.plist

iPhone Deployment info• It contains the main info about the app

configuration:– Main interface– Supported orientations– Status bar style

Entitlements• Used to configure iCloud,

push notifications, HealthKit, etc.

Views andnavigation

La prima appXamarin.Forms

Domanda 1

Se volessi implementare iCloud nella mia app iOS, tramite quale file dovrei abilitarne l’integrazione?

a) BundleResources.plistb) Info.plistc) CloudConnectivity.plistd) Entitlements.plist

Domanda 1

Se volessi implementare iCloud nella mia app iOS, tramite quale file dovrei abilitarne l’integrazione?

a) BundleResources.plistb) Info.plistc) CloudConnectivity.plistd) Entitlements.plist

Storyboards

• In the past, iOS developers managed views using the XIB files

• Each XIB files was mapped with a controller• The developer needed to manually manage the

navigation between two views

Storyboards

• A storyboard is the visual representation of all the screens in an app

• It’s made by different scenes• A scene is a View managed by a

ViewController• Scenes contains objects and controls that are

used to manage interactions and to display data

The Xamarin designer

• Storyboards can’t be created in code• The underline XML is generated

automatically by the designer• Xamarin offers a built-in designer, which

requires a Mac Build Host connected to the Windows machine

Navigation

• Navigation in Storyboards is managed using Segues

• A Segue is a transition between two scenes• Multiple transitions:

– Simple navigation– Modal views– Popover

• Segues are created using the designer

Storyboards, Segues and Xamarin designer

Storyboards and segues

DEMO

La prima appXamarin.Forms

Domanda 1

Come si chiama il file contenente tutte le schermate della mia app iOS?

a) Seguesb) Storyboardc) Designerd) BuildHost

Domanda 1

Come si chiama il file contenente tutte le schermate della mia app iOS?

a) Seguesb) Storyboardc) Designerd) BuildHost

Domanda 2

Cosa uso per navigare tra le varie pagine della mia app iOS?a) Navigatorb) Arrowc) Transitionerd) Segues

Domanda 2

Cosa uso per navigare tra le varie pagine della mia app iOS?a) Navigatorb) Arrowc) Transitionerd) Segues

Passing data

• A storyboards offers a method called PrepareForSegue() to override

• You get a reference to the destination control and you pass the data into a property

public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender){

base.PrepareForSegue(segue, sender);var controller = segue.DestinationViewController as MyPageController;controller.TextToShow = MyPhoneNumber.Text;

}

Conditional navigation

• Sometimes you need to perform navigation only if a specific condition is satisfied

• You can override the ShouldPerformSegue() method

public override bool ShouldPerformSegue(string segueIdentifier, NSObject sender){

if (segueIdentifier == "SegueToMainPage") { if (PasswordTextField.Text == "password") return true; else return false; } return base.ShouldPerformSegue(segueIdentifier, sender);}

Advanced segues

DEMO

The view’s lifecycle

Methods intherited by the UIViewController class• ViewDidLoad

– The controller has loaded the connected view• ViewWillAppear

– The pagecontent is about to appear• ViewWillDisappear

– The page content is about to disappear• ViewDidAppear / ViewDidDisappear

– The page content is appeared / disappeared

Alerts

If you target a pre iOS 8 device, you need to use the UIAlertView class

UIAlertView av = new UIAlertView("Title", "message", null, "OK", null);av.Show();

Alerts

If you target an iOS 8+ device, you can use:• UIAlertController to display an alert• UIActionSheet to display an action sheet

UIAlertController UIActionSheet

Alerts

DEMO

Built-in applications

• Same URI-based approach that you find in Windows Phone

• You use the OpenUrl() method to invoke a URL

NSUrl url = new NSUrl("http://www.xamarin.com");

if (UIApplication.SharedApplication.CanOpenUrl(url)){

UIApplication.SharedApplication.OpenUrl(url);}

Managing lists

Table Views

Many different classes and APIs to implement a list• UITableView

– It’s the table that contains the rows to display• UITableViewCell

– It represent a row of the list• UITableViewSource

– It’s a specific Xamarin class that makes easier to implement a UITableView

– On iOS, you would to implement separately the UIViewTableDataSource and UITableViewDelegate classes

Table Views

Many different classes and APIs to implement a list• NSIndexPath

– It identifies a specific element of the table• UITableViewController

– It’s the controller that implements an UITableView

Table layout

• Four different built-in styles• To implement a custom layout, you need to

implement a custom cell

Creating a UITableViewSource• You need to choose a cell identifier• You need to implement the GetCell() method to

define the layout of a cell public class TableSource : UITableViewSource { string[] tableItems; string cellIdentifier = "TableCell"; public TableSource(string[] items) { tableItems = items; } public override nint RowsInSection(UITableView tableview, nint section) { } public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath) {

... }}

Cell reuse

• It’s the technique used to improve performances in case of big collections to display

• You first ask for a cell to reuse before creating a new one

public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath){ UITableViewCell cell = tableView.DequeueReusableCell(cellIdentifier); // if there are no cells to reuse, create a new one if (cell == null) cell = new UITableViewCell(UITableViewCellStyle.Default, cellIdentifier); cell.TextLabel.Text = tableItems[indexPath.Row]; return cell;}

Cell reuse

Starting from iO6, there’s a new method that automatically takes care of generating the proper cell for youpublic override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath){ var cell = (MyCell)tableView.DequeueReusableCell(MyCellId, indexPath);

return cell;}

Additional supported features

Managinglists

DEMO

La prima appXamarin.Forms

Domanda 1

Di quali metodi e controlli mi posso avvalere per creare una lista in un’app iOS?

a) UITableViewb) UITableViewContainerc) UITableViewSourced) UITableViewCell

Domanda 1

Di quali metodi e controlli mi posso avvalere per creare una lista in un’app iOS?

a) UITableViewb) UITableViewContainerc) UITableViewSourced) UITableViewCell

Domanda 2

Per implementare un Custom Layout, devo implementare una Custom Cell

a) Verob) Falso

Domanda 2

Per implementare un Custom Layout, devo implementare una Custom Cell

a) Verob) Falso

Domanda 3

Quante tipologie di Layout di default sono presenti?a) Dueb) Quattroc) Ottod) Dodici

Domanda 3

Quante tipologie di Layout di default sono presenti?a) Dueb) Quattroc) Ottod) Dodici

Using a custom layout

• You need to create a custom cell• You can do it in code or with the designer• You add the controls inside

the UIViewTableCell object• In code, you assign a value to the controls

Using a custom layout

In the UITableViewSource, you use the custom cell class instead of the base UITableViewCell one in the GetCell() methodpublic override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath){ CharacterCellView cell = tableView.DequeueReusableCell(CellIdentifier, indexPath) as CharacterCellView; Character currentCharacter = tableItems[indexPath.Row]; cell.UpdateCharacter(currentCharacter);

return cell;}

Custom cells

DEMO

Working with files

Files and folders

• To create files and folder you can leverage the basic .NET APIs (System.IO)

• Documents is the base path where all the files of the application are stored

• In the info.plist you can set the option UIFileSharingEnabled to true to allow access to local files through iTunes

The folders

• Library– To store the internal files of the application– It’s automatically backed up

• Library/Preferences– To store the application settings– It’s automatically backed up

• Library/Caches– iOS can delete the content in case the space is going low– It’s not backed up

Working withfiles and folders

DEMO

Grazie per l’attenzione

Guido MagrinXamarin Student Partner

@GuidoMagrin