Lavorare con AutoLayout in verticale e orizzontale

Question

Layout automatico, per quanto buono, mi fa impazzire con i vincoli. Ho la modalità ritratto progettata in IB ma non riesco a far funzionare l'orientamento orizzontale desiderato.

noti che quando cambia orientamento orizzontale, la spaziatura tra i blocchi UIImageView diminuisce e l'allineamento del testo di SAMPLE TEXT modifiche allineato a destra.

Attualmente, ho aggiunto alcuni vincoli per farlo funzionare. Tuttavia, ho bisogno di mantenere fisso lo spazio tra i blocchi UIImageView, in conseguenza del quale appare angusto in verticale e benissimo in orizzontale. Ho bisogno che sia distribuito uniformemente in verticale e compresso in orizzontale (come nell'immagine sopra). Allo stesso modo, attualmente i miei vincoli sollevano il testo ma non lo tengono al centro dello schermo e allineato a destra.

Ciò è possibile con Layout automatico? Se é cosi, come? Aiuto molto apprezzato.

Answer 1

Ci sono molti modi per avvicinarsi a questo. Un modo è quello di racchiudere le 3 viste dell'immagine in un UIView. Assegnare rispettivamente i vincoli delle viste delle immagini in alto e in basso rispettivamente in alto e in basso e assegnare a quello centrale un vincolo centerY. Assegna a questa vista acclusa un'altezza e una larghezza fisse e un vincolo nella parte superiore della vista del controller. Fai un IBOutlet al vincolo di altezza per questa vista che lo racchiude e cambialo a rotazione. Nell'esempio che segue, ho dato un'altezza di 350 nel ritratto:

-(void)updateViewConstraints { 
    [super updateViewConstraints]; 
    if (self.view.bounds.size.height < self.view.bounds.size.width) { 
     self.heightCon.constant = self.view.bounds.size.height; 
    }else{ 
     self.heightCon.constant = 350; 
    } 
} 

Per quanto riguarda l'etichetta, il modo più semplice è quello di rimuovere i vincoli che avete (in basso e centerX), e aggiungere trailing e centerY a rotazione .

Answer 2

Sì, è sicuramente possibile farlo con Auto Layout. Attraverso una serie di passaggi, che ritengo possano essere troppo lunghi per pubblicare una risposta, puoi mantenere la spaziatura tra le tue ImageViews e mantenere l'allineamento del testo allo stesso modo.

In sostanza, è necessario appuntare un angolo di ogni ImageView e rimuovere alcuni vincoli in modo che non comprimano automaticamente la spaziatura quando si modifica l'orientamento.

Spiegazione completa su come eseguire questa operazione (praticamente esattamente ciò che si richiede) is explained in this tuorial. Puoi trovarlo a circa metà pagina.

Spero che questo sia quello che stavi cercando.

Answer 3

Sì, può essere eseguito con Layout automatico. Se si desidera che la spaziatura tra le viste aumenti e/o diminuisca a seconda dell'orientamento, è possibile utilizzare la relazione Minore o Uguale o Maggiore o uguale (anziché Equal) per il vincolo, che consente a una distanza di aumentare o diminuire:

Giocare con questo e si dovrebbe essere in grado di ottenere quello che vuoi.