Hello, iOS - ApprofondimentoHello, iOS – Deep dive

La procedura dettagliata Guida introduttiva ha presentato la compilazione e l'esecuzione di un'applicazione Xamarin.iOS di base.The Quickstart walkthrough, introduced building and running a basic Xamarin.iOS application. È ora il momento di acquisire una conoscenza più approfondita del funzionamento delle applicazioni iOS, per poter creare programmi più complessi.Now it’s time to develop a deeper understanding of how iOS applications work so you can build more sophisticated programs. Questa guida esamina i passaggi illustrati nella procedura dettagliata Hello, iOS per consentire la comprensione dei concetti fondamentali dello sviluppo di applicazioni iOS.This guide reviews the steps that in the Hello, iOS walkthrough to enable understanding of the fundamental concepts of iOS application development.

Questa guida consente di sviluppare le competenze e le conoscenze necessarie per creare un'applicazione iOS a schermata singola.This guide helps you develop the skills and knowledge required to build a single-screen iOS application. Al termine di questa guida, si sarà in grado di comprendere le diverse parti di un'applicazione Xamarin.iOS e il modo in cui si integrano tra loro.After working through it, you should have an understanding of the different parts of a Xamarin.iOS application and how they fit together.

Introduzione a Visual Studio per MacIntroduction to Visual Studio for Mac

Visual Studio per Mac è un ambiente di sviluppo integrato open source gratuito che combina le funzionalità di Visual Studio e di XCode.Visual Studio for Mac is a free, open-source IDE that combines features from Visual Studio and XCode. Include una finestra di progettazione visiva completamente integrata, un editor di testo completo di strumenti di refactoring, un browser di assembly, l'integrazione del codice sorgente e altro ancora.It features a fully integrated visual designer, a text editor complete with refactoring tools, an assembly browser, source code integration, and more. Questa guida presenta alcune funzionalità di base di Visual Studio per Mac, ma se non si ha familiarità con questo strumento, vedere la documentazione di Visual Studio per Mac.This guide introduces some basic Visual Studio for Mac features, but if you're new to Visual Studio for Mac, check out the Visual Studio for Mac documentation.

Visual Studio per Mac segue la prassi di Visual Studio di organizzare il codice in soluzioni e progetti.Visual Studio for Mac follows the Visual Studio practice of organizing code into solutions and projects. Una soluzione è un contenitore per uno o più progetti.A solution is a container that can hold one or more projects. Un progetto può essere un'applicazione (ad esempio per iOS o Android), una libreria di supporto, un'applicazione di test e altro ancora.A project can be an application (such as iOS or Android), a supporting library, a test application, and more. Nell'app Phoneword è stato aggiunto un nuovo progetto di iPhone tramite il modello App visualizzazione singola.In the Phoneword app, a new iPhone project was added using the Single View Application template. La soluzione iniziale era simile a quanto segue:The initial solution looked like this:

Introduzione a Visual StudioIntroduction to Visual Studio

Visual Studio è un potente ambiente di sviluppo integrato di Microsoft.Visual Studio is a powerful IDE from Microsoft. Include una finestra di progettazione visiva completamente integrata, un editor di testo completo di strumenti di refactoring, un browser di assembly, l'integrazione del codice sorgente e altro ancora.It features a fully integrated visual designer, a text editor complete with refactoring tools, an assembly browser, source code integration, and more. Questa guida introduce alcune funzionalità di Visual Studio di base con gli Strumenti Xamarin per Visual Studio.This guide introduces some basic Visual Studio features with Xamarin Tools for Visual Studio.

Visual Studio consente di organizzare il codice in soluzioni e progetti.Visual Studio organizes code into solutions and projects. Una soluzione è un contenitore per uno o più progetti.A solution is a container that can hold one or more projects. Un progetto può essere un'applicazione (ad esempio per iOS o Android), una libreria di supporto, un'applicazione di test e altro ancora.A project can be an application (such as iOS or Android), a supporting library, a test application, and more. Nell'app Phoneword è stato aggiunto un nuovo progetto di iPhone tramite il modello App visualizzazione singola.In the Phoneword app, a new iPhone project was added using the Single View Application template. La soluzione iniziale era simile a quanto segue:The initial solution looked like this:

Anatomia di un'applicazione Xamarin.iOSAnatomy of a Xamarin.iOS application

A sinistra è presente il Pad della soluzione, che contiene la struttura di directory e tutti i file associati alla soluzione:On the left is the solution Pad, which contains the directory structure and all the files associated with the solution:

A destra è presente il riquadro della soluzione, che contiene la struttura di directory e tutti i file associati alla soluzione:On the right is the solution Pane, which contains the directory structure and all the files associated with the solution:

Nella procedura dettagliata Hello, iOS è stata creata la soluzione Phoneword ed è stato inserito un progetto iOS, Phoneword_iOS, all'interno di questa.In the Hello, iOS walkthrough, you created a solution called Phoneword and placed an iOS project - Phoneword_iOS - inside it. Gli elementi all'interno del progetto sono:The items inside the project include:

  • Riferimenti: contiene gli assembly necessari per compilare ed eseguire l'applicazione.References - Contains the assemblies required to build and run the application. Espandere la directory per visualizzare riferimenti ad assembly .NET quali System, System.Core e System.Xml, nonché un riferimento all'assembly Xamarin.iOS.Expand the directory to see references to .NET assemblies such as System, System.Core, and System.Xml, as well as a reference to the Xamarin.iOS assembly.
  • Pacchetti: la directory Pacchetti contiene pacchetti NuGet pronti all'uso.Packages - The packages directory contains ready-made NuGet packages.
  • Risorse: nella cartella Risorse sono archiviati altri file multimediali.Resources - The resources folder stores other media.
  • Main.cs: contiene il punto di ingresso principale dell'applicazione.Main.cs – This contains the main entry point of the application. Per avviare l'applicazione, è necessario passare il nome della classe principale dell'applicazione, AppDelegate.To start the application, the name of the main application class, the AppDelegate, is passed in .
  • AppDelegate.cs: questo file contiene la classe principale dell'applicazione ed è responsabile della creazione della finestra, della compilazione dell'interfaccia utente e dell'ascolto di eventi generati dal sistema operativo.AppDelegate.cs – This file contains the main application class and is responsible for creating the Window, building the user interface, and listening to events from the operating system.
  • Main.storyboard: lo Storyboard contiene la progettazione visiva dell'interfaccia utente dell'applicazione.Main.storyboard - The Storyboard contains the visual design of the application’s user interface. I file dello Storyboard vengono aperti in un editor grafico, iOS Designer.Storyboard files open in a graphical editor called the iOS Designer.
  • ViewController.cs: il controller di visualizzazione aziona la schermata (visualizzazione) che viene visualizzata e toccata dall'utente.ViewController.cs – The view controller powers the screen (View) that a user sees and touches. Il controller di visualizzazione è responsabile della gestione delle interazioni tra l'utente e la visualizzazione.The view controller is responsible for handling interactions between the user and the View.
  • ViewController.designer.cs: designer.cs è un file generato automaticamente che funge da elemento di associazione tra i controlli nella visualizzazione e le relative rappresentazioni in codice nel controller di visualizzazione.ViewController.designer.cs – The designer.cs is an auto-generated file that serves as the glue between controls in the View and their code representations in the view controller. Poiché si tratta di un file di meccanismi interni, l'IDE sovrascriverà tutte le modifiche manuali e nella maggior parte dei casi questo file può essere ignorato.Because this is an internal plumbing file, the IDE will overwrite any manual changes and most of the time this file can be ignored. Per altre informazioni sulla relazione tra la finestra di progettazione visiva e il codice di supporto, vedere la guida Introduction to the iOS Designer (Introduzione a iOS Designer).For more information on the relationship between the visual Designer and the backing code, refer to the Introduction to the iOS Designer guide.
  • Info.plist: in Info.plist vengono impostate le proprietà dell'applicazione, ad esempio il nome, le icone, le immagini di avvio e così via.Info.plist – The Info.plist is where application properties such as the application name, icons, launch images, and more are set. Si tratta di un file avanzato, per il quale è disponibile un'introduzione completa nella guida Working with Property Lists (Uso degli elenchi di proprietà).This is a powerful file and a thorough introduction to it is available in the Working with Property Lists guide.
  • Entitlements.plist: l'elenco delle proprietà di entitlement consente di specificare le funzionalità dell'applicazione (dette anche tecnologie dell'App Store), ad esempio iCloud, PassKit e così via.Entitlements.plist - The entitlements property list lets us specify application capabilities (also called App Store Technologies) such as iCloud, PassKit, and more. Altre informazioni sul file Entitlements.plist sono disponibili nella guida Working with Property Lists (Uso degli elenchi di proprietà).More information on the Entitlements.plist can be found in the Working with Property Lists guide. Per un'introduzione generale agli entitlement, vedere la guida Provisioning dei dispositivi.For a general introduction to entitlements, refer to the Device Provisioning guide.

Concetti fondamentali dell'architettura e delle appArchitecture and app fundamentals

Prima che un'applicazione iOS possa caricare un'interfaccia utente, è necessario eseguire due operazioni.Before an iOS application can load a user interface, two things need to be in place. In primo luogo, è necessario definire unpunto di ingresso dell'applicazione, ovvero il codice da eseguire per primo quando il processo dell'applicazione viene caricato in memoria.First, the application needs to define an entry point – the first code that runs when the application’s process is loaded into memory. In secondo luogo, è necessario definire una classe che gestisca gli eventi a livello dell'intera applicazione e interagisca con il sistema operativo.Second, it needs to define a class to handle application-wide events and interact with the operating system.

Questa sezione studia le relazioni illustrate nel diagramma seguente:This section studies the relationships illustrated in the following diagram:

metodo MainMain method

Il punto di ingresso principale di un'applicazione iOS è la classe Application.The main entry point of an iOS application is the Application class. La classe Application è definita nel file Main.cs e contiene un metodo Main statico.The Application class is defined in the Main.cs file and contains a static Main method. Contiene una nuova istanza dell'applicazione Xamarin.iOS e passa il nome della classe delegata dell'applicazione che gestirà gli eventi del sistema operativo.It creates a new Xamarin.iOS application instance and passes the name of the Application Delegate class that will handle OS events. Di seguito è riportato il codice del modello per il metodo statico Main:The template code for the static Main method appears below:

using System;
using UIKit;

namespace Phoneword_iOS
{
    public class Application
    {
        static void Main (string[] args)
        {
            UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

Classe delegata dell'applicazioneApplication delegate

In iOS, la classe delegata dell'applicazione gestisce gli eventi di sistema. Questa classe si trova all'interno di AppDelegate.cs.In iOS, the Application Delegate class handles system events; this class lives inside AppDelegate.cs. La classe AppDelegate gestisce la finestra (Window) dell'applicazione.The AppDelegate class manages the application Window. Questa finestra è una singola istanza della classe UIWindow che funge da contenitore per l'interfaccia utente.The Window is a single instance of the UIWindow class that serves as a container for the user interface. Per impostazione predefinita, un'applicazione ha una sola finestra in cui caricare il contenuto e tale finestra è associata a una schermata (una singola istanza di UIScreen) che fornisce il rettangolo delimitatore corrispondente alle dimensioni dello schermo fisico del dispositivo.By default, an application gets only one Window onto which to load its content, and the Window is attached to a Screen (single UIScreen instance) that provides the bounding rectangle matching the dimensions of the physical device screen.

AppDelegate è anche responsabile della sottoscrizione agli aggiornamenti di sistema relativi a eventi importanti dell'applicazione, ad esempio il completamento dell'avvio o una riduzione eccessiva della memoria disponibile.The AppDelegate is also responsible for subscribing to system updates about important application events such as when the app finishes launching or when memory is low.

Di seguito è riportato il codice del modello di AppDelegate:The template code for the AppDelegate is presented below:

using System;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{

    [Register ("AppDelegate")]
    public partial class AppDelegate : UIApplicationDelegate
    {
        public override UIWindow Window {
            get;
            set;
        }

        ...
    }
}

Dopo che l'applicazione ha definito la finestra (Window), può iniziare a caricare l'interfaccia utente.Once the application has defined its Window, it can begin loading the user interface. Nella prossima sezione viene illustrata la creazione dell'interfaccia utente.The next section explores UI creation.

Interfaccia utenteUser interface

L'interfaccia utente di un'app iOS è come una vetrina: l'applicazione ha in genere una sola vetrina (corrispondente alla finestra), ma può riempirla con tutti gli oggetti necessari. Gli oggetti e la loro disposizione possono essere modificati secondo le esigenze dell'applicazione.The user interface of an iOS app is like a storefront - the application typically gets one Window, but it can fill the Window up with as many objects at it needs, and the objects and arrangements can be changed depending on what the app wants to display. Gli oggetti di questo scenario, ovvero gli elementi visibili per l'utente, sono chiamati visualizzazioni.The objects in this scenario - the things that the user sees - are called Views. In un'applicazione con un'unica finestra, le visualizzazioni vengono disposte una sopra l'altra in una gerarchia di visualizzazione del contenuto gestita da un unico controller di visualizzazione.To build a single screen in an application, Views are stacked on top of each other in a Content View Hierarchy, and the hierarchy is managed by a single view controller. Le applicazioni con più schermate hanno più gerarchie di visualizzazione del contenuto, ognuna con un proprio controller di visualizzazione, e l'applicazione inserisce visualizzazioni nella finestra per creare gerarchie di visualizzazione del contenuto diverse in base alla schermata visualizzata dall'utente.Applications with multiple screens have multiple Content View Hierarchies, each with its own view controller, and the application places Views in the Window to create a different Content View Hierarchy based on the screen that the user is on.

Questa sezione approfondisce l'argomento dell'interfaccia utente descrivendo le visualizzazioni, le gerarchie di visualizzazione del contenuto e iOS Designer.This section dives into the user interface by describing Views, Content View Hierarchies, and the iOS Designer.

iOS Designer e storyboardiOS Designer and storyboards

iOS Designer è uno strumento visivo per la creazione di interfacce utente in Xamarin.The iOS Designer is a visual tool for building user interfaces in Xamarin. È possibile avviare iOS Designer facendo doppio clic su un qualsiasi file Storyboard (con estensione storyboard), che verrà aperto in una visualizzazione simile allo screenshot seguente:The Designer can be launched by double-clicking on any Storyboard (.storyboard) file, which will open to a view that resembles the following screenshot:

Uno Storyboard è un file che contiene le progettazioni visive delle schermate dell'applicazione, nonché le transizioni e le relazioni tra le schermate.A Storyboard is a file that contains the visual designs of our application’s screens as well as the transitions and relationships between the screens. La rappresentazione di una schermata di un'applicazione in uno Storyboard è chiamata scena.The representation of an application’s screen in a Storyboard is called a Scene. Ogni scena rappresenta un controller di visualizzazione e la pila di visualizzazioni gestite da quest'ultimo (gerarchia di visualizzazione del contenuto).Each Scene represents a view controller and the stack of Views that it manages (Content View Hierarchy). Quando si crea un nuovo progetto di applicazione visualizzazione singola da un modello, Visual Studio per Mac genera automaticamente un file Storyboard denominato Main.storyboard e lo popola con un'unica scena, come illustrato nello screenshot seguente:When a new Single View Application project is created from a template, Visual Studio for Mac automatically generates a Storyboard file called Main.storyboard and populates it with a single Scene, as illustrated by the screenshot below:

È possibile selezionare la barra di colore nero nella parte inferiore della schermata dello Storyboard per scegliere il controller di visualizzazione per la scena.The black bar at the bottom of the Storyboard screen can be selected to choose the view controller for the Scene. Il controller di visualizzazione è un'istanza della classe UIViewController che contiene il codice sottostante per la gerarchia di visualizzazione del contenuto.The view controller is an instance of the UIViewController class that contains the backing code for the Content View Hierarchy. Le proprietà del controller di visualizzazione possono essere visualizzate e impostate all'interno del riquadro delle proprietà, come illustrato nello screenshot seguente:Properties on this view controller can be viewed and set inside the Properties Pad, as illustrated by the screenshot below:

Uno Storyboard è un file che contiene le progettazioni visive delle schermate dell'applicazione, nonché le transizioni e le relazioni tra le schermate.A Storyboard is a file that contains the visual designs of our application’s screens as well as the transitions and relationships between the screens. La rappresentazione di una schermata di un'applicazione in uno Storyboard è chiamata scena.The representation of an application’s screen in a Storyboard is called a Scene. Ogni scena rappresenta un controller di visualizzazione e la pila di visualizzazioni gestite da quest'ultimo (gerarchia di visualizzazione del contenuto).Each Scene represents a view controller and the stack of Views that it manages (Content View Hierarchy). Quando si crea un nuovo progetto di applicazione visualizzazione singola da un modello, Visual Studio genera automaticamente un file Storyboard denominato Main.storyboard e lo popola con un'unica scena, come illustrato nello screenshot seguente:When a new Single View Application project is created from a template, Visual Studio automatically generates a Storyboard file called Main.storyboard and populates it with a single Scene, as illustrated by the screenshot below:

È possibile selezionare la barra nella parte inferiore della schermata dello Storyboard per scegliere il controller di visualizzazione per la scena.The bar at the bottom of the Storyboard screen can be selected to choose the view controller for the Scene. Il controller di visualizzazione è un'istanza della classe UIViewController che contiene il codice sottostante per la gerarchia di visualizzazione del contenuto.The view controller is an instance of the UIViewController class that contains the backing code for the Content View Hierarchy. Le proprietà del controller di visualizzazione possono essere visualizzate e impostate all'interno del riquadro Proprietà, come illustrato nello screenshot seguente:Properties on this view controller can be viewed and set inside the Properties Pane, as illustrated by the screenshot below:

La visualizzazione può essere selezionata facendo clic all'interno della parte bianca della scena.The View can be selected by clicking inside the white part of the Scene. La visualizzazione è un'istanza della classe UIView che definisce un'area della schermata e fornisce le interfacce da usare con il contenuto in tale area.The View is an instance of the UIView class that defines an area of the screen and provides interfaces for working with the content in that area. La visualizzazione predefinita corrisponde a una visualizzazione radice singola che riempie l'intero schermo del dispositivo.The default View is a single Root View that fills the whole device screen.

A sinistra della scena si trova una freccia grigia con l'icona della bandierina, come illustrato nello screenshot seguente:To the left of the Scene is a gray arrow with a flag icon, as illustrated by the screenshot below:

La freccia grigia rappresenta una transizione dello Storyboard denominata Segue (si pronuncia "seg-way").The gray arrow represents a storyboard transition called a Segue (pronounced “seg-way”). Poiché questa transizione non ha origine, viene detta Sourceless Segue.Since this segue has no origin, it is called a Sourceless Segue. Un Sourceless Segue punta alla prima scena le cui visualizzazioni vengono caricate nella finestra dell'applicazione all'avvio di quest'ultima.A sourceless segue points to the first scene whose views get loaded into the application's window at application startup. Tale scena e le visualizzazioni all'interno di questa sono i primi elementi che l'utente vede quando l'applicazione viene caricata.The scene and the views inside it will be the first thing that the user sees when the app loads.

Quando si crea un'interfaccia utente, è possibile trascinare visualizzazioni aggiuntive dalla casella degli strumenti alla visualizzazione principale nell'area di progettazione, come illustrato nello screenshot seguente:When building a user interface, additional Views can be dragged from the Toolbox onto the main view on the design surface, as illustrated by the screenshot below:

Queste visualizzazioni aggiuntive sono dette visualizzazioni secondarie.These additional Views are called Subviews. La visualizzazione radice e le visualizzazioni secondarie fanno parte di una gerarchia di visualizzazione del contenuto gestita da ViewController.Together, the root view and subviews are part of a Content View Hierarchy that is managed by the ViewController. La struttura di tutti gli elementi presenti nella scena può essere esaminata nel riquadro Struttura documento:The outline of all the elements in the scene can be viewed by examining it in the Document Outline pad:

Le visualizzazioni secondarie sono evidenziate nel diagramma seguente:The Subviews are highlighted in the diagram below:

La prossima sezione analizza la gerarchia di visualizzazione del contenuto rappresentato da questa scena.The next section breaks down the Content View Hierarchy represented by this Scene.

Gerarchia di visualizzazione del contenutoContent view hierarchy

Una gerarchia di visualizzazione del contenuto è una serie di visualizzazioni e visualizzazioni secondarie disposte in pila e gestite da un unico controller di visualizzazione, come illustrato nel diagramma riportato di seguito:A Content View Hierarchy is a stack of Views and Subviews managed by a single view controller, as illustrated by the diagram below:

È possibile facilitare la visualizzazione della gerarchia di visualizzazione del contenuto di ViewController modificando temporaneamente in giallo il colore di sfondo della visualizzazione radice nella sezione di visualizzazione del riquadro delle proprietà, come illustrato nello screenshot seguente:We can make the Content View Hierarchy of our ViewController easier to see by temporarily changing the background color of the root View to yellow in the View section of the Properties Pad, as illustrated by the screenshot below:

Il diagramma seguente illustra le relazioni tra la finestra, le visualizzazioni, le visualizzazioni secondarie e il controller di visualizzazione che visualizzano l'interfaccia utente sullo schermo del dispositivo:The diagram below illustrates the relationships between the Window, Views, Subviews, and view controller that bring the user interface to the device screen:

La prossima sezione illustra come usare le visualizzazioni nel codice e come creare un programma per l'interazione utente usando i controller di visualizzazione e il ciclo di vita della visualizzazione.In the next section discusses how to work with Views in code and learn to program for user interaction using view controllers and the View lifecycle.

Controller di visualizzazione e ciclo di vita della visualizzazioneView controllers and the view lifecycle

A ogni gerarchia di visualizzazione del contenuto corrisponde un controller di visualizzazione che dà vita all'interazione utente.Every Content View Hierarchy has a corresponding view controller to power user interaction. Il ruolo del controller di visualizzazione è di gestire le visualizzazioni presenti nella gerarchia di visualizzazione del contenuto.The role of the view controller is to manage the Views in the Content View Hierarchy. Il controller di visualizzazione non fa parte della gerarchia di visualizzazione del contenuto e non è un elemento dell'interfacciaThe view controller is not part of the Content View Hierarchy, and it's not an element in the interface. ma fornisce il codice che dà vita alle interazioni dell'utente con gli oggetti sullo schermo.Rather, it provides the code that powers the user's interactions with the objects on the screen.

Controller di visualizzazione e storyboardView controllers and storyboards

All'interno di uno Storyboard il controller di visualizzazione è rappresentato sotto forma di una barra nella parte inferiore della scena.The view controller is represented in a Storyboard as a bar at the bottom of the Scene. Quando si seleziona il controller di visualizzazione, vengono visualizzate le proprietà nel riquadro delle proprietà:Selecting the view controller brings up its properties in the Properties Pad:

È possibile impostare una classe controller di visualizzazione personalizzata per la gerarchia di visualizzazione del contenuto rappresentata da questa scena modificando la proprietà Classe nella sezione Identità del riquadro delle proprietà.A custom view controller class for the Content View Hierarchy represented by this Scene can be set by editing the Class property in the Identity section of the Properties Pad. L'applicazione Phoneword, ad esempio, imposta ViewController come controller di visualizzazione per la prima schermata, come illustrato nello screenshot riportato di seguito:For example, our Phoneword application sets the ViewController as the view controller for our first screen, as illustrated by the screenshot below:

All'interno di uno Storyboard il controller di visualizzazione è rappresentato sotto forma di una barra nella parte inferiore della scena.The view controller is represented in a Storyboard as a bar at the bottom of the Scene. Quando si seleziona il controller di visualizzazione, vengono visualizzate le proprietà nel riquadro Proprietà:Selecting the view controller brings up its properties in the Properties Pane:

È possibile impostare una classe controller di visualizzazione personalizzata per la gerarchia di visualizzazione del contenuto rappresentata da questa scena modificando la proprietà Classe nella sezione Identità del riquadro Proprietà.A custom view controller class for the Content View Hierarchy represented by this Scene can be set by editing the Class property in the Identity section of the Properties Pane. L'applicazione Phoneword, ad esempio, imposta ViewController come controller di visualizzazione per la prima schermata, come illustrato nello screenshot riportato di seguito:For example, our Phoneword application sets the ViewController as the view controller for our first screen, as illustrated by the screenshot below:

Questa operazione collega la rappresentazione del controller di visualizzazione nello Storyboard alla classe C# ViewController.This links the Storyboard representation of the view controller to the ViewController C# class. Aprire il file ViewController.cs. Si noti che ViewController è una sottoclasse di UIViewController, come illustrato nel codice seguente:Open the ViewController.cs file and notice view controller is a subclass of UIViewController, as illustrated by the code below:

public partial class ViewController : UIViewController
{
    public ViewController (IntPtr handle) : base (handle)
    {

    }
}

ViewController ora consente il funzionamento delle interazioni della gerarchia di visualizzazione del contenuto associate a questo controller di visualizzazione nello Storyboard.The ViewController now drives the interactions of the content view hierarchy associated with this view controller in the storyboard. Verrà quindi presentato il processo detto del ciclo di vita della visualizzazione, attraverso il quale si apprenderà il ruolo del controller di visualizzazione nella gestione delle visualizzazioni.Next you’ll learn about the view controller's role in managing the Views by introducing a process called the view lifecycle.

Nota

Per le schermate di sola visualizzazione che non richiedono alcuna interazione con l'utente, la proprietà Classe nel riquadro delle proprietà può essere lasciata vuota.For visual-only screens that don’t require user interaction, the Class property can be left blank in the Properties Pad. In questo modo la classe sottostante del controller di visualizzazione viene impostata come implementazione predefinita di UIViewController. Ciò è corretto se non si prevede di aggiungere codice personalizzato.This sets the view controller's backing class as the default implementation of a UIViewController, which is appropriate if you don’t plan on adding custom code.

Ciclo di vita della visualizzazioneView lifecycle

Il controller di visualizzazione ha il compito di caricare e scaricare le gerarchie di visualizzazione del contenuto dalla finestra.The view controller is in charge of loading and unloading content view hierarchies from the window. Quando un'azione importante interessa una visualizzazione all'interno della gerarchia di visualizzazione del contenuto, il sistema operativo informa il controller di visualizzazione tramite eventi del ciclo di vita della visualizzazione.When something of importance happens to a view in the content view hierarchy, the operating system notifies the view controller through events in the view lifecycle. Eseguendo l'override dei metodi nel ciclo di vita della visualizzazione è possibile interagire con gli oggetti sullo schermo e creare un'interfaccia utente dinamica e reattiva.By overriding methods in the view lifecycle, you can interact with the objects on the screen and create a dynamic, responsive user interface.

Ecco i metodi di base del ciclo di vita e le funzioni corrispondenti:These are the basic lifecycle methods and their function:

  • ViewDidLoad: viene chiamato una volta la prima volta che il controller di visualizzazione carica la propria gerarchia di visualizzazione del contenuto in memoria.ViewDidLoad - Called once the first time the view controller loads its Content View Hierarchy into memory. Questo è un ottimo momento per eseguire la configurazione iniziale, perché è il momento in cui le visualizzazioni secondarie diventano disponibili nel codice.This is a good place to do initial setup because it is when Subviews first become available in code.
  • ViewWillAppear: viene chiamato ogni volta che una visualizzazione del controller di visualizzazione sta per essere aggiunta a una gerarchia di visualizzazione del contenuto e compare sullo schermo.ViewWillAppear - Called every time a view controller's View is about to be added to a Content View Hierarchy and appear on the screen.
  • ViewWillDisappear: viene chiamato ogni volta che una visualizzazione del controller di visualizzazione sta per essere rimossa da una gerarchia di visualizzazione del contenuto e scompare dallo schermo.ViewWillDisappear - Called every time a view controller's View is about to be removed from a Content View Hierarchy and disappear from the screen. Questo evento del ciclo di vita viene usato per la pulizia e il salvataggio dello stato.This lifecycle event is used for cleanup and saving state.
  • ViewDidAppear e ViewDidDisappear: vengono chiamati quando una visualizzazione viene rispettivamente aggiunta o rimossa dalla gerarchia di visualizzazione del contenuto.ViewDidAppear and ViewDidDisappear - Called when a View gets added or removed from the Content View Hierarchy, respectively.

Quando si aggiunge codice personalizzato a una qualsiasi fase del ciclo di vita, è necessario eseguire l'override dell'implementazione di base del metodo corrispondente del ciclo di vita.When custom code is added to any stage of the lifecycle, that lifecycle method’s base implementation must be overridden. A questo scopo, toccare il metodo del ciclo di vita esistente, a cui è già associato del codice, e ampliare quest'ultimo con codice aggiuntivo.This is achieved by tapping into the existing lifecycle method, which has some code already attached to it, and extending it with additional code. L'implementazione di base viene chiamata dall'interno del metodo per assicurarsi che il codice originale venga eseguito prima del nuovo codice.The base implementation is called from inside the method to make sure the original code runs before the new code. Un esempio di queste operazioni è illustrato nella prossima sezione.An example of this is demonstrated in the next section.

Per altre informazioni sull'uso dei controller di visualizzazione, vedere View Controller Programming Guide for iOS (Guida alla programmazione del controller di visualizzazione) e UIViewController reference (Informazioni di riferimento su UIViewController) nel sito Web Apple.For more information on working with view controllers, refer to Apple's view controller Programming Guide for iOS and the UIViewController reference.

Risposta all'interazione dell'utenteResponding to user interaction

Il ruolo più importante del controller di visualizzazione è rispondere all'interazione dell'utente, ad esempio alla pressione di pulsanti, allo spostamento e così via.The most important role of the view controller is responding to user interaction, such as button presses, navigation, and more. Il modo più semplice per gestire l'interazione dell'utente è di associare un controllo per l'ascolto dell'input dell'utente e di collegare un gestore dell'evento per rispondere all'input.The simplest way to handle user interaction is to wire up a control to listen to user input and attach an event handler to respond to the input. È ad esempio possibile associare un pulsante per rispondere a un evento di tocco, come illustrato nell'app Phoneword.For example, a button could be wired up to respond to a touch event, as demonstrated in the Phoneword app.

Verrà ora esaminato il funzionamento.Let's explore how this works. Nel progetto Phoneword_iOS, è stato aggiunto il pulsante TranslateButton alla gerarchia di visualizzazione del contenuto:In the Phoneword_iOS project, a button was added called TranslateButton to the Content View Hierarchy:

Quando viene assegnato un Nome al controllo Pulsante nel riquadro delle proprietà, iOS Designer ne esegue automaticamente il mapping a un controllo in ViewController.designer.cs, rendendo disponibile il pulsante TranslateButton all'interno della classe ViewController.When a Name is assigned to the Button control in the Properties Pad, the iOS designer automatically mapped it to a control in the ViewController.designer.cs, making the TranslateButton available inside the ViewController class. I controlli diventano disponibili a partire dalla fase ViewDidLoad del ciclo di vita della visualizzazione. Per rispondere al tocco dell'utente viene quindi usato questo metodo del ciclo di vita:Controls first become available in the ViewDidLoad stage of the View lifecycle, so this lifecycle method is used to respond to the user's touch:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // wire up TranslateButton here
}

Per l'ascolto del tocco dell'utente, l'app Phoneword usa un evento di tocco denominato TouchUpInside.The Phoneword app uses a touch event called TouchUpInside to listen to the user's touch. TouchUpInside è in ascolto di eventi di tocco (sollevamento del dito dallo schermo) che seguono un contatto (contatto del dito con lo schermo) all'interno dei limiti del controllo.TouchUpInside listens for a touch up event (finger lifting off the screen) that follows a touch down (finger touching the screen) inside the bounds of the control. L'evento contrario a TouchUpInside è l'evento TouchDown, generato quando l'utente preme un controllo.The opposite of TouchUpInside is the TouchDown event, which fires when the user presses down on a control. L'evento TouchDown acquisisce molto rumore e non offre all'utente la possibilità di annullare il tocco trascinando il dito fuori dal controllo.The TouchDown event captures a lot of noise and gives the user no option to cancel the touch by sliding their finger off the control. TouchUpInside rappresenta il modo più comune per rispondere al tocco di un elemento Pulsante e crea l'esperienza che l'utente si aspetta quando preme un pulsante.TouchUpInside is the most common way to respond to a Button touch and creates the experience the user expects when pressing a button. Altre informazioni su questo argomenti sono disponibili in iOS Human Interface Guidelines (Linee guida per l'interfaccia umana iOS) nel sito Web Apple.More information on this is available in Apple’s iOS Human Interface Guidelines.

L'app ha gestito l'evento TouchUpInside con un'espressione lambda, ma avrebbe potuto usare anche un delegato o un gestore dell'evento denominato.The app handled the TouchUpInside event with a lambda, but a delegate or a named event handler could have also been used. Il codice finale del pulsante è simile al seguente:The final Button code resembled the following:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    string translatedNumber = "";

    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);
      PhoneNumberText.ResignFirstResponder ();

      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
      } else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
      }
  };
}

Altri concetti introdotti in PhonewordAdditional concepts introduced in Phoneword

L'applicazione Phoneword ha introdotto alcuni concetti non trattati in questa guida.The Phoneword application introduced several concepts not covered in this guide. Essi includono:These concepts include:

  • Modifica del testo del pulsante: l'app Phoneword ha illustrato come modificare il testo di un Pulsante chiamando SetTitle per il Pulsante stesso e passando il nuovo testo e lo stato del controllodel Pulsante.Change Button Text – The Phoneword app demonstrated how to change the text of a Button by calling SetTitle on the Button and passing in the new text and the Button’s Control State. Il codice seguente, ad esempio, modifica il testo dell'elemento CallButton in "Call" (Chiama):For example, the following code changes the CallButton’s text to “Call”:

    CallButton.SetTitle ("Call", UIControlState.Normal);
    
  • Abilitazione e disabilitazione dei pulsanti: lo stato degli elementi Pulsante può essere Enabled o Disabled.Enable and Disable ButtonsButtons can be in an Enabled or Disabled state. Un Pulsante disabilitato non risponde all'input dell'utente.A disabled Button won’t respond to user input. Ad esempio, il codice seguente disabilita CallButton:For example, the following code disables the CallButton:

    CallButton.Enabled = false;
    

    Per altre informazioni sui pulsanti, vedere la guida relativa ai pulsanti.For more information on buttons, refer to the Buttons guide.

  • Chiusura della tastiera: quando l'utente tocca il campo di testo, iOS visualizza la tastiera per consentire all'utente di immettere input.Dismiss the Keyboard – When the user taps the Text Field, iOS displays the keyboard to let the user enter input. Non esiste una funzionalità incorporata che consenta di chiudere la tastiera.Unfortunately, there is no built-in functionality to dismiss the keyboard. Il codice seguente viene aggiunto a TranslateButton per nascondere la tastiera quando l'utente preme TranslateButton:The following code is added to the TranslateButton to dismiss the keyboard when the user presses the TranslateButton:

    PhoneNumberText.ResignFirstResponder ();
    

    Per un altro esempio di rimozione della tastiera, fare riferimento alla sezione Dismiss the Keyboard (Nascondere la tastiera).For another example of dismissing the keyboard, refer to the Dismiss the Keyboard recipe.

  • Chiamata telefonica con URL: nell'app Phoneword per avviare l'app telefono di sistema viene usato uno schema URL Apple.Place Phone Call with URL – In the Phoneword app, an Apple URL scheme is used to launch the system phone app. Lo schema URL personalizzato è costituito dal prefisso "tel:" e dal numero di telefono convertito, come illustrato nel codice seguente:The custom URL scheme consists of a “tel:” prefix and the translated phone number, as illustrated by the code below:

    var url = new NSUrl ("tel:" + translatedNumber);
    if (!UIApplication.SharedApplication.OpenUrl (url))
    {
        // show alert Controller
    }
    
  • Visualizzazione di un avviso: quando un utente tenta di effettuare una chiamata telefonica in un dispositivo che non supporta tali chiamate, ad esempio il simulatore o un iPod Touch, viene visualizzata una finestra di dialogo di avviso che informa l'utente che la chiamata non può essere effettuata.Show an Alert – When a user tries to place a phone call on a device that doesn’t support calls – for example the simulator or an iPod Touch – an alert dialog is displayed to let the user know the phone call can’t be placed. Il codice seguente crea e popola un controller di avvisi:The code below creates and populates an alert controller:

    if (!UIApplication.SharedApplication.OpenUrl (url)) {
                    var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                    alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                    PresentViewController (alert, true, null);
                }
    

    Per altre informazioni sulla visualizzazione di avvisi in iOS, vedere Alert Controller recipe (Recipe controller di avvisi).For more information on iOS alert views, refer to the Alert Controller recipe.

Test, distribuzione e finalizzazioneTesting, deployment, and finishing touches

Visual Studio per Mac e Visual Studio offrono entrambi numerose opzioni per il test e la distribuzione di un'applicazione.Both Visual Studio for Mac and Visual Studio provide many options for testing and deploying an application. Questa sezione descrive le opzioni di debug, illustra le funzionalità di test di applicazioni in un dispositivo e presenta alcuni strumenti per la creazione di icone e immagini di avvio dell'app personalizzate.This section covers debugging options, demonstrates testing applications on device, and introduces tools for creating custom app icons and launch images.

Strumenti di debugDebugging tools

I problemi del codice di un'applicazione sono talvolta difficili da diagnosticare.Sometimes issues in application code are difficult to diagnose. Per facilitare la diagnosi di problemi complessi del codice, è possibile impostare un punto di interruzione, eseguire il codice un'istruzione alla volta o visualizzare le informazioni di output nella finestra del log.To help diagnose complex code issues, you could Set a Breakpoint, Step Through Code, or Output Information to the Log Window.

Eseguire la distribuzione in un dispositivoDeploy to a device

Il simulatore iOS consente di testare le applicazioni in modo rapido.The iOS Simulator is a quick way to test an application. Il simulatore è dotato di numerose ottimizzazioni utili per l'esecuzione di test, ad esempio un percorso fittizio, la simulazione di movimento e così via.The Simulator has a number of useful optimizations for testing, including mock location, simulating movement, and more. Gli utenti, tuttavia, non utilizzeranno l'app finale in un simulatore.However, users will not consume the final app in a Simulator. È necessario testare tutte le applicazioni con dispositivi reali in modo tempestivo e frequente.All applications should be tested on real devices early and often.

Il provisioning di un dispositivo richiede tempo e un account sviluppatore Apple.A device takes time to provision and requires an Apple Developer Account. La guida Provisioning dei dispositivi offre istruzioni esaurienti per la predisposizione di un dispositivo per lo sviluppo.The Device Provisioning guide gives thorough instructions on getting a device ready for development.

Nota

Al momento, a causa di un requisito Apple, per compilare codice per un dispositivo fisico o per il simulatore, è necessario un certificato di sviluppo o un'identità di firma.At present, due to a requirement from Apple, it is necessary to have a development certificate or signing identity to build your code for a physical device or the simulator. Per soddisfare questo requisito, seguire i passaggi nella guida Provisioning dei dispositivi.Follow the steps in the Device Provisioning guide to set this up.

Dopo il provisioning del dispositivo, per usare il dispositivo stesso come destinazione della distribuzione è necessario collegarlo, modificare la destinazione sulla barra degli strumenti di compilazione per il dispositivo iOS e premere Avvia ( Riproduci) come illustrato nello screenshot seguente:Once the device is provisioned, you can deploy to it by plugging it in, changing the target in the build toolbar to the iOS Device, and pressing Start ( Play) as illustrated by the following screenshot:

L'app verrà distribuita nel dispositivo iOS:The app will deploy to the iOS device:

Generare icone e immagini di avvio personalizzateGenerate custom icons and launch images

Non tutti hanno a disposizione una finestra di progettazione per creare le icone personalizzate e le immagini di avvio che devono essere rilevate da un'app. Ecco alcuni approcci alternativi per la generazione di immagini personalizzate per le app:Not everyone has a designer available to create the custom icons and launch images an app needs to stand out. Here are several alternate approaches to generating custom app artwork:

  • Sketch: Sketch è un'app Mac per la progettazione di interfacce utente, icone e altro ancora.Sketch – Sketch is a Mac app for designing user interfaces, icons, and more. Questa è l'app con cui è stato progettato il set delle icone e delle immagini di avvio dell'app di Xamarin.This is the app that was used to design the Xamarin App Icons and Launch Images set. Sketch 3 è disponibile nell'App Store.Sketch 3 is available on the App Store. È anche possibile provare lo strumento Sketch gratuito.You can try out the free Sketch Tool as well.
  • Pixelmator: versatile app di modifica delle immagini per Mac a un costo di circa 30 dollari.Pixelmator – A versatile image editing app for Mac that costs about $30.
  • Glyphish: set di icone predefinito di alta qualità disponibile per il download gratuito e l'acquisto.Glyphish – High-quality prebuilt icon sets for free download and purchase.
  • Fiverr: consente di scegliere all'interno di un ampio pool un designer che crei il set di icone dell'applicazione, a partire da 5 dollari.Fiverr – Choose from a variety of designers to create an icon set for you, starting at $5. I risultati possono essere imprevedibili, ma si tratta di una risorsa valida nel caso in cui sia necessario un set di icone in tempi breviCan be hit or miss but a good resource if you need icons designed on the fly
  • Visual Studio: è possibile usare questo strumento per creare un set di icone semplici per l'app direttamente nell'IDE.Visual Studio – You can use this to create a simple icon set for your app directly in the IDE.
  • Glyphish: set di icone predefinito di alta qualità disponibile per il download gratuito e l'acquisto.Glyphish – High-quality prebuilt icon sets for free download and purchase.
  • Fiverr: consente di scegliere all'interno di un ampio pool un designer che crei il set di icone dell'applicazione, a partire da 5 dollari.Fiverr – Choose from a variety of designers to create an icon set for you, starting at $5. I risultati possono essere imprevedibili, ma si tratta di una risorsa valida nel caso in cui sia necessario un set di icone in tempi breviCan be hit or miss but a good resource if you need icons designed on the fly

Per altre informazioni sulle dimensioni e sui requisiti delle icone, vedere la guida Uso delle immagini.For more information about icon and launch image sizes and requirements, refer to the Working with Images guide.

RiepilogoSummary

La procedura è stata completata.Congratulations! A questo punto si ha una solida conoscenza dei componenti delle applicazioni Xamarin.iOS e degli strumenti necessari per creare tali applicazioni.You now have a solid understanding of the components of a Xamarin.iOS application as well as the tools used to create them. Nella prossima esercitazione della serie introduttiva, l'applicazione verrà estesa in modo da gestire più schermate.In the next tutorial in the Getting Started series, you’ll extend our application to handle multiple screens. Nello stesso tempo, verrà implementato un controller di spostamento, verranno illustrati gli Storyboard Segue e verrà presentato lo schema MVC (Model, View, Controller).Along the way you’ll implement a Navigation Controller, learn about Storyboard Segues, and introduce the Model, View, Controller (MVC) pattern as you extend your application to handle multiple screens.