Opzioni di layout in Xamarin.iOS

Esistono due diversi meccanismi per controllare il layout quando una visualizzazione viene ridimensionata o ruotata:

• Ridimensionamento automatico: il controllo di ridimensionamento automatico nella finestra di progettazione consente di impostare le AutoresizingMask proprietà. In questo modo un controllo verrà ancorato ai bordi del contenitore e/o correggerne le dimensioni. Il ridimensionamento automatico funziona in tutte le versioni di iOS. Questo articolo è descritto in modo più dettagliato di seguito
• Layout automatico: funzionalità introdotta in iOS 6 che consente un controllo granulare sulle relazioni dei controlli dell'interfaccia utente. Consentirà il controllo delle posizioni degli elementi rispetto ad altri elementi nell'area di progettazione. Questo argomento è illustrato in modo più dettagliato nel layout automatico con la guida alla finestra di progettazione di Xamarin iOS .

Ridimensionamento automatico

Quando un utente ridimensiona una finestra, ad esempio quando il dispositivo viene ruotato e l'orientamento cambia, il sistema ridimensiona automaticamente le visualizzazioni all'interno di tale finestra in base alle regole di ridimensionamento automatico. Queste regole possono essere impostate in C# usando la AutoresizingMask proprietà di UIView o nel riquadro proprietà di Progettazione iOS, come illustrato di seguito:

Quando un controllo è selezionato, consente di specificare manualmente la posizione e le dimensioni del controllo, nonché di scegliere Comportamento di ridimensionamento automatico. Come illustrato nello screenshot seguente, è possibile usare le sorgenti e gli strut nel controllo di ridimensionamento automatico per definire la relazione della visualizzazione selezionata con l'elemento padre:

La regolazione di una molla causerà il ridimensionamento della visualizzazione in base alla larghezza o all'altezza della visualizzazione padre. La regolazione di uno stilo renderà la visualizzazione mantenere una distanza costante tra se stessa e la relativa visualizzazione padre, su quel particolare bordo.

Queste impostazioni possono essere impostate anche nel codice:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Per testare le impostazioni di ridimensionamento automatico, abilitare diversi orientamenti del dispositivo supportati nelle opzioni del progetto:

Nel code-behind è possibile usare il codice seguente, che determina il ridimensionamento orizzontale dei due controlli di testo:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

È anche possibile modificare i controlli usando la finestra di progettazione. Se si selezionano le strut come mostrato di seguito, l'immagine rimarrà allineata a destra senza essere ritagliata dalla parte inferiore della visualizzazione:

Questi screenshot mostrano come i controlli ridimensionano o riposizionano se stessi quando lo schermo viene ruotato:

Si noti che la visualizzazione testo e il campo di testo si estendono entrambi per mantenere gli stessi margini sinistro e destro, a causa dell'impostazione FlexibleWidth . L'immagine ha il margine superiore e sinistro flessibile, il che significa che mantiene i margini inferiore e destro, mantenendo l'immagine in visualizzazione quando lo schermo viene ruotato. I layout complessi richiedono in genere una combinazione di queste impostazioni su ogni controllo visibile per mantenere coerente l'interfaccia utente e impedire che i controlli si sovrappongano quando i limiti della visualizzazione cambiano (a causa della rotazione o di un altro evento di ridimensionamento).