Vincoli di layout a livello di codice in Xamarin.iOS

Questa guida illustra l'uso dei vincoli di layout automatico iOS nel codice C# anziché crearli in iOS Designer.

Il layout automatico (detto anche "layout adattivo") è un approccio di progettazione reattivo. A differenza del sistema di layout transitorio, in cui la posizione di ogni elemento è hardcoded a un punto sullo schermo, il layout automatico riguarda le relazioni , ovvero le posizioni degli elementi rispetto ad altri elementi nell'area di progettazione. Al centro del layout automatico è l'idea di vincoli o regole che definiscono la posizione di un elemento o di un set di elementi nel contesto di altri elementi sullo schermo. Poiché gli elementi non sono associati a una particolare posizione sullo schermo, i vincoli consentono di creare un layout adattivo che abbia un aspetto ottimale in diverse dimensioni dello schermo e orientamenti del dispositivo.

In genere quando si usa il layout automatico in iOS, si userà Interface Builder di Xcode per posizionare graficamente i vincoli di layout sugli elementi dell'interfaccia utente. In alcuni casi, tuttavia, potrebbe essere necessario creare e applicare vincoli nel codice C#. Ad esempio, quando si usano elementi dell'interfaccia utente creati dinamicamente aggiunti a un oggetto UIView.

Questa guida illustra come creare e usare vincoli usando codice C# anziché crearli graficamente in Interface Builder di Xcode.

Creazione di vincoli a livello di codice

Come indicato in precedenza, in genere si useranno i vincoli di layout automatico in Progettazione iOS. Per quei tempi in cui è necessario creare i vincoli a livello di codice, sono disponibili tre opzioni tra cui scegliere:

• Ancoraggi di layout: questa API fornisce l'accesso alle proprietà di ancoraggio (ad esempio TopAnchor, BottomAnchor o HeightAnchor) degli elementi dell'interfaccia utente vincolati.
• Vincoli di layout: è possibile creare vincoli direttamente usando la NSLayoutConstraint classe .
• Linguaggio di formattazione visiva: fornisce un metodo ASCII come metodo per definire i vincoli.

Le sezioni seguenti illustrano in dettaglio ogni opzione.

Ancoraggi layout

Usando la NSLayoutAnchor classe è disponibile un'interfaccia fluente per la creazione di vincoli in base alle proprietà di ancoraggio degli elementi dell'interfaccia utente vincolati. Ad esempio, le guide di layout superiore e inferiore di un controller di visualizzazione espongono le TopAnchorproprietà di BottomAnchor ancoraggio e HeightAnchor mentre una visualizzazione espone le proprietà di bordo, centro, dimensioni e baseline.

Gli ancoraggi layout offrono diversi metodi per la creazione di vincoli in un formato facile da leggere e compatto:

• ConstraintEqualTo : definisce una relazione in cui first attribute = second attribute + [constant] con un valore di offset fornito constant facoltativamente.
• ConstraintGreaterThanOrEqualTo : definisce una relazione in cui first attribute >= second attribute + [constant] con un valore di offset fornito constant facoltativamente.
• ConstraintLessThanOrEqualTo : definisce una relazione in cui first attribute <= second attribute + [constant] con un valore di offset fornito constant facoltativamente.

Ad esempio:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Un tipico vincolo di layout può essere espresso semplicemente come espressione lineare. Ad esempio:

Che verrà convertita nella riga di codice C# seguente usando Ancoraggi layout:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true; 

Dove le parti del codice C# corrispondono alle parti indicate dell'equazione come indicato di seguito:

Oltre a fornire solo i parametri necessari per risolvere una determinata equazione dei vincoli di layout, ognuno dei metodi di ancoraggio layout applica la sicurezza dei tipi dei parametri passati. Pertanto, gli ancoraggi orizzontali come LeadingAnchor o TrailingAnchor possono essere usati solo con altri tipi di ancoraggio orizzontale e moltiplicatori vengono forniti solo ai vincoli di dimensione.

Vincoli di layout

È possibile aggiungere manualmente vincoli di layout automatico creando direttamente un oggetto NSLayoutConstraint nel codice C#. A differenza dell'uso di Ancoraggi layout, è necessario specificare un valore per ogni parametro, anche se non avrà alcun effetto sul vincolo definito. Di conseguenza, si finirà per produrre una notevole quantità di codice difficile da leggere, boilerplate. Ad esempio:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

Dove l'enumerazione NSLayoutAttribute definisce il valore per i margini della vista e corrisponde alle LayoutMarginsGuide proprietà, ad Leftesempio , RightTop e e l'enumerazione Bottom NSLayoutRelation definisce la relazione che verrà creata tra gli attributi specificati come Equalo LessThanOrEqual GreaterThanOrEqual.

A differenza dell'API Di ancoraggio layout, i NSLayoutConstraint metodi di creazione non evidenziano gli aspetti importanti di un determinato vincolo e non esistono controlli in fase di compilazione eseguiti sul vincolo. Di conseguenza, è facile costruire un vincolo non valido che genererà un'eccezione in fase di esecuzione.

Linguaggio di formato visivo

Visual Format Language consente di definire vincoli usando elementi grafici ASCII come stringhe che forniscono una rappresentazione visiva del vincolo creato. Questo presenta i vantaggi e gli svantaggi seguenti:

• Visual Format Language applica solo la creazione di vincoli validi.
• Il layout automatico restituisce vincoli alla console usando il linguaggio di formato visivo, in modo che i messaggi di debug assomigliano al codice usato per creare il vincolo.
• Visual Format Language consente di creare più vincoli contemporaneamente con un'espressione molto compatta.
• Poiché non esiste alcuna convalida lato compilazione delle stringhe del linguaggio di formato visivo, i problemi possono essere individuati solo in fase di esecuzione.
• Poiché il linguaggio di formato visivo enfatizza la visualizzazione rispetto alla completezza, alcuni tipi di vincolo non possono essere creati con esso (ad esempio rapporti).

Quando si usa il linguaggio di formato visivo per creare un vincolo, seguire questa procedura:

1. Creare un oggetto NSDictionary contenente gli oggetti View e le guide di layout e una chiave stringa che verrà utilizzata durante la definizione dei formati.
2. Facoltativamente, creare un oggetto NSDictionary che definisce un set di chiavi e valori (NSNumber) utilizzato come valore Costante per il vincolo.
3. Creare la stringa di formato per il layout di una singola colonna o riga di elementi.
4. Chiamare il FromVisualFormat metodo della NSLayoutConstraint classe per generare i vincoli.
5. Chiamare il ActivateConstraints metodo della NSLayoutConstraint classe per attivare e applicare i vincoli.

Ad esempio, per creare un vincolo iniziale e finale nel linguaggio di formato visivo, è possibile usare quanto segue:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Poiché Visual Format Language crea sempre vincoli di punto zero associati ai margini della visualizzazione padre quando si usa la spaziatura predefinita, questo codice produce risultati identici agli esempi presentati in precedenza.

Per progettazioni dell'interfaccia utente più complesse, ad esempio più visualizzazioni figlio su una singola riga, Visual Format Language specifica sia la spaziatura orizzontale che l'allineamento verticale. Come nell'esempio precedente in cui specifica l'oggetto AlignAllTop NSLayoutFormatOptions allinea tutte le visualizzazioni in una riga o colonna alle relative prime.

Vedere l'Appendice del linguaggio di formato visivo di Apple per alcuni esempi di specifica dei vincoli comuni e della grammatica della stringa di formato visivo.

Riepilogo

Questa guida ha presentato la creazione e l'uso dei vincoli di layout automatico in C# anziché crearli graficamente in iOS Designer. In primo luogo, ha esaminato l'uso di Ancoraggi layout (NSLayoutAnchor) per gestire il layout automatico. Successivamente, ha illustrato come usare i vincoli di layout (NSLayoutConstraint). Infine, viene presentato usando il linguaggio di formato visivo per il layout automatico.

Collegamenti correlati

• Introduzione agli storyboard
• Procedura dettagliata per i controlli progettabili iOS
• Layout automatico con Xamarin Designer per iOS
• Apple - Creazione di vincoli a livello di codice
• Apple - Appendice del linguaggio di formato visivo