Come fare iOS - Aggiungi vincoli adattivi per supportare un'app universale

Il builder di interfaccia di Xcode ci consente di configurare layout che cambieranno automaticamente forma e dimensione in base a una gamma di variabili d'ambiente, come:

  • Dimensioni dello schermo del dispositivo (ad es. IPhone o iPad)
  • Orientamento del dispositivo (verticale o orizzontale)
  • Adattamento (multi-tasking su iPad)

In questo post impareremo come aggiungere NSLayoutConstraints nel builder di interfacce che si adattano ai cambiamenti di queste variabili, permettendoci di costruire app universali che funzionano sia su iPhone che su iPad.

Terminologia

Innanzitutto, una terminologia utile.

Trait - Ciascuna delle variabili d'ambiente sopra descritte è un tratto; dimensioni, orientamento e adattamento dello schermo.

Configurazione del dispositivo: una configurazione del dispositivo è una combinazione dei tre tratti sopra menzionati; dimensioni dello schermo, orientamento (verticale o orizzontale) e adattamento (gli iPad in esecuzione in modalità multitasking vengono visualizzati in uno schermo diviso, indicato come adattamento).

Classe di dimensione: una classe di dimensione è un tratto che identifica la quantità relativa di larghezza (orizzontale) o altezza (verticale) disponibile per una vista. Le classi di dimensioni dipendono dai tre tratti già descritti. Esistono due classi di dimensioni definite dal generatore di interfaccia; compatto (in modalità verticale, la larghezza dell'iPhone è compatta, l'altezza dell'iPhone è normale) e regolare (in modalità orizzontale, la larghezza dell'iPhone è normale, l'altezza dell'iPhone è compatta).

Aggiunta di vincoli adattativi

Per dimostrare come aggiungere vincoli adattativi, useremo il seguente esempio semplice (e leggermente inventato!) Di aggiunta di una singola UIView a un'altra vista.

Il nostro obiettivo è aggiungere vincoli che si adattano e cambiano in base alle variabili di ambiente. Ciò comporterà tre varianti di layout:

  1. iPhone, verticale - La nostra vista aggiunta dovrebbe essere rettangolare, appuntata sul lato sinistro del dispositivo e centrata verticalmente.
  2. iPhone, orizzontale: la nostra vista aggiunta dovrebbe essere quadrata, appuntata nella parte superiore del dispositivo e centrata orizzontalmente.
  3. iPad, verticale o orizzontale: la nostra vista aggiunta dovrebbe essere rettangolare, appuntata a destra del dispositivo e centrata verticalmente.

Nota: stiamo adattando i nostri vincoli solo per due dei tre tratti menzionati all'inizio di questo post. Non ci stiamo adattando in base all'adattamento dell'iPad (schermo condiviso multi-tasking). In altre parole, abbiamo a che fare solo con la modalità a schermo intero su iPad. Questo è puramente per concisione. I passaggi descritti di seguito possono essere facilmente applicati a questo tratto.

  • Iniziamo nel generatore di interfaccia con un UIViewController che contiene solo il suo UIView predefinito.
UIViewController con la sua UIView predefinita
  • Aggiungiamo un nuovo UIView come sottoview e ne cambiamo il colore di sfondo per renderlo facilmente identificabile.
Sottoview aggiunta come vista secondaria dell'UIView predefinita
  • Ora, apri il riquadro di configurazione del dispositivo facendo clic sul pulsante "Visualizza come: ..." nella parte inferiore sinistra del generatore di interfaccia.
Riquadro di configurazione del dispositivo del generatore di interfaccia
  • Il riquadro di configurazione del dispositivo, mostrato sopra, ci consente di selezionare un dispositivo, l'orientamento e l'adattamento (se è selezionato un dispositivo iPad). Nell'immagine sopra, il dispositivo selezionato è un iPhone 8 Plus e l'orientamento è verticale. Il riquadro di configurazione del dispositivo ci mostra anche le classi di dimensioni per la configurazione del dispositivo selezionata. In questo caso la classe di dimensione della larghezza è compatta e la classe di dimensione dell'altezza è regolare. Ciò è indicato dal testo "(wC hR)" nella parte superiore del riquadro di configurazione del dispositivo.
  • Ora aggiungeremo i vincoli per la nostra prima variazione di layout, iPhone con orientamento verticale. Fai clic sul pulsante "Varia per tratti" in basso a destra. Viene visualizzato un popover che ci consente di selezionare per quali tratti della classe di dimensione vogliamo creare una variazione di layout, ad esempio larghezza, altezza o entrambi. La selezione di un tratto della classe di dimensione crea una variazione in base alla classe di dimensione per la configurazione del dispositivo attualmente selezionata. Ad esempio, se selezioniamo larghezza, la variazione sarà per tutte le larghezze compatte, poiché questa è la classe di dimensione della larghezza per la configurazione del dispositivo attualmente selezionata. Nel nostro caso, vogliamo creare una variazione in base alle classi di larghezza e altezza della configurazione del dispositivo selezionato. Seleziona entrambi questi nel popover.
Sono state selezionate sia le classi di larghezza che di altezza
  • Fai clic all'esterno del popover per rimuoverlo e ora aggiungeremo i nostri vincoli per questa variazione di layout. Ricorda, su iPhone in verticale, la nostra vista aggiunta dovrebbe essere rettangolare, appuntata sul lato sinistro del dispositivo e centrata verticalmente. Aggiungi un vincolo di larghezza di 100 alla nostra vista aggiunta e un vincolo di altezza di 600. Quindi vincola il bordo anteriore della vista al bordo anteriore dell'area sicura e limita il valore Y del centro della vista al valore Y del centro dell'area sicura. Dopo aver aggiunto il vincolo, fai clic sul pulsante "Fatto variando" in basso a destra. I vincoli aggiunti e il layout risultante sono mostrati di seguito.
Vincoli attivi per la nostra configurazione del dispositivo larghezza compatta, altezza normale (ritratto iPhone)
  • Ora passiamo alla nostra seconda variante di layout, iPhone con orientamento orizzontale. La nostra configurazione del dispositivo attualmente selezionata è iPhone 8 in verticale, quindi nel riquadro di configurazione del dispositivo, cambia l'orientamento in orizzontale. Il builder Interfaccia si aggiornerà per riflettere questo cambiamento in un certo numero di posizioni. Innanzitutto, il costruttore dell'interfaccia Canvas aggiorna per mostrare il contorno di un iPhone in orientamento orizzontale. In secondo luogo, il testo nella parte superiore del riquadro di configurazione del dispositivo si aggiorna per mostrare le nuove classi di dimensioni. In questo caso, le nuove classi di dimensioni sono larghezza regolare e altezza compatta, "(wR hC)". In terzo luogo, i vincoli che abbiamo precedentemente aggiunto per la nostra prima configurazione del dispositivo sono ora mostrati disabilitati, apparendo sbiaditi nel profilo del documento del builder di interfacce. Tutte queste modifiche sono mostrate nell'immagine qui sotto.
Modifiche al builder dell'interfaccia causate da una modifica nella configurazione del dispositivo
  • Come prima, facciamo clic sul pulsante "Varia per tratti". Nel popover che appare, seleziona le classi di larghezza e altezza. Questa particolare configurazione si applica solo agli iPhone con orientamento orizzontale. Successivamente, aggiungiamo i vincoli. Ricorda, per questa configurazione, la nostra vista dovrebbe essere quadrata, appuntata nella parte superiore del dispositivo e centrata orizzontalmente. Aggiungi un vincolo di larghezza di 300 alla nostra vista aggiunta e un vincolo di altezza di 300. Quindi vincola il bordo superiore della vista al bordo superiore dell'area sicura e limita il valore X centrale della vista al valore X centrale dell'area sicura. Dopo aver aggiunto il vincolo, fai clic sul pulsante "Fatto variando" in basso a destra. I vincoli che abbiamo aggiunto per questa configurazione appariranno attivi, mentre i vincoli che abbiamo aggiunto per la configurazione precedente appariranno sbiaditi, indicando che sono inattivi. Vedi l'immagine sotto.
Vincoli attivi per la nostra configurazione di dispositivi a larghezza normale, altezza compatta (iPhone orizzontale)
  • Infine, la nostra terza variante di layout, iPad con orientamento verticale o orizzontale. Ma aspetta ... perché stiamo usando una variazione di layout sia per il paesaggio che per il ritratto? Bene, il motivo è che entrambe le configurazioni verticale e orizzontale di un iPad hanno classi di larghezza e altezza regolari (ignorando l'adattamento cioè considerando solo le configurazioni iPad a schermo intero). Ciò significa che qualsiasi variazione di vincolo che aggiungiamo per le configurazioni di larghezza e altezza regolari si applicherà agli orientamenti sia verticale che orizzontale su iPad. Fantastico, continuiamo. Utilizza il riquadro di configurazione del dispositivo per selezionare la configurazione del dispositivo, selezionando verticale o orizzontale (ignora le opzioni "Adattamento", come abbiamo detto stiamo prendendo in considerazione solo le configurazioni iPad a schermo intero) e fai clic sul pulsante "Varia per tratti". Come in precedenza, seleziona le classi di larghezza e altezza dal popover e aggiungi i vincoli che risulteranno nella nostra vista rettangolare, appuntata a destra del dispositivo e centrata verticalmente. Dopo aver aggiunto i vincoli, fai clic sul pulsante "Fatto variando". I vincoli e i layout risultanti sono mostrati nelle immagini seguenti.
Vincoli attivi per la nostra configurazione di dispositivi a larghezza regolare, altezza normale (iPad verticale)Vincoli attivi per la nostra configurazione di dispositivi a larghezza regolare, altezza regolare (orizzontale iPad)
  • Abbiamo ora aggiunto vincoli per le nostre tre configurazioni del dispositivo. Per verificare rapidamente che i vincoli che abbiamo aggiunto siano corretti, possiamo selezionare nuovamente la configurazione di ciascun dispositivo e osservare se i vincoli rilevanti nella Struttura del documento sono attivi. Inoltre, vale la pena controllare la tela mentre notiamo come appare il layout.

Sommario

Quindi cosa abbiamo imparato?

  • Abbiamo appreso che Xcode e Interface Builder ci consentono di adattare i nostri layout in base a una serie di tratti.
  • Abbiamo imparato come utilizzare il generatore di interfaccia per selezionare una particolare configurazione del dispositivo e quindi aggiungere vincoli che si applicano solo a quella configurazione.
  • Abbiamo anche appreso che di particolare importanza durante la creazione di tali variazioni di layout sono le classi di dimensioni della configurazione, che si basano su larghezza e altezza.
  • Usando tutti questi, abbiamo imparato come adattare un layout di esempio in base alla configurazione del dispositivo, variando la posizione e le dimensioni di una UIView a seconda che il dispositivo fosse iPhone o iPad e che l'orientamento fosse verticale o orizzontale.

Eccezionale! Ora possiamo creare app universali, funzionanti e dall'aspetto eccezionale su iPhone e iPad.

Il progetto Xcode per questo post è qui.

Questo è tutto!

Disponibile anche su petethedeveloper.com