Come rendere una vista piazza ridimensionare con la sua superview utilizzando layout automatico

Question

Nel mio caso particolare ho vista all'interno del controller della vista per il quale ho aggiunto i seguenti vincoli:

• Set iniziali, finali, bordi superiore e inferiore a 0
• Set moltiplicatore al bordo inferiore a 2: 1

Ora la vista si trova nella metà superiore sul controller della vista.

All'interno di questo aggiungo una vista quadrato immagine, per cui ho aggiunto i seguenti vincoli:

• Ctrl trascinate dalla vista sull'immagine per Superview e aggiunti altezze uguali e larghezze.
• Modificare il moltiplicatore per larghezza e altezza finché non ho un quadrato perfetto.
• vincoli aggiunto da centro verticalmente e orizzontalmente

I miei vincoli sembra perfetto, ma durante l'esecuzione nel simulatore che non si ottiene un quadrato perfetto. Inoltre, la visualizzazione dell'immagine non viene ridimensionata quando si esegue su schermi di simulatori diversi.

Questa è la mia messa a punto:

• Auto classi di layout e le dimensioni sono abilitati
• Io uso un formato derivato per lo storyboard
• layout di Adaptive è impostato su qualsiasi per la larghezza e l'altezza
• I sto cercando di eseguire questo per i simulatori 4s, 5,6 e 6+.

Ho cercato altri post StackOverflow, ma niente sembra funzionare.

Esistono alcuni passaggi di base per eseguire questa operazione?

modifica:

Dopo aver impostato> = 10 vincoli:

modifica 3: I aggiunto superiore, inferiore, iniziali, finali vincoli 2 volte, 1 con basso uguale o uguale (priorità 1000), l'altro con maggiore o uguale (priorità 800) con il valore costante di 90. Non so perché per il fondo tenta di passare a 90 pt dalla vista principale, non il contenitore vista (GRE en uno).

Answer 1

Hai una vista che deve espandersi per riempire il suo contenitore mantenendo le sue proporzioni. Questo è un modello comune con Layout automatico.

Il trucco è quello di utilizzare due vincoli per conduzione/posteriore/superiore/inferiore:

• =10 a bassa priorità

• >=10 a priorità desiderata.

Mettere tutto insieme, si ha:

• Aspect Ratio 1: 1

• Centro X/Y in Superview

• Leading/Trailing/Alto/Basso Superview = 10 (a priorità 750)

• Leading/Trailin g/Alto/Basso per Superview> = 10 (a 1000 di priorità)

Ci sono anche un paio di cose da considerare con UIImageView:

• UIImageView avrà una dimensione di contenuto intrinseco sulla base di l'immagine che sta visualizzando, quindi dovrai assicurarti che la sua priorità di accostamento del contenuto sia inferiore alla priorità 750 che utilizzi per i vincoli =10.

• UIImageView.contentMode determina come l'immagine sottostante viene ridimensionata rispetto alla dimensione di UIImageView. Per impostazione predefinita, è impostato su UIViewContentModeScaleToFill.

Answer 2

container view 
---------------------------------------------- 
|      |      | 
|     >=10     | 
|  imageView |      | 
|  ----------------------------  | 
|  |   |    |  |  
|  |   |    |  | 
|  |   |    |  | 
|  |   |    |  | 
|  |   |    |  | 
|- >=10 -|---------- 1:1 -----------|- >=10 -| 
|  |   |    |  | 
|  |   |    |  | 
|  |   |    |  | 
|  |   |    |  | 
|  ----------------------------  | 
|      |      | 
|     >=10     | 
|      |      | 
---------------------------------------------- 

** Se si desidera è possibile specificare l'altezza della ImageView o la larghezza e con un vincolo di priorità inferiore.

Answer 3

Ho avuto successo utilizzando questa configurazione.

1. Quello che ho fatto per la prima volta aggiungere vincoli per il centro X. (Ignorare l'unico centro Y anche se è nel mio screenshot. Si romperà indipendentemente a causa del passaggio 2.)

2. Poi ho aggiunto un vincolo superiore e inferiore

3. Infine ho aggiunto un vincolo proporzioni

Quando I animato questo, il testo scalato come un quadrato correttamente. Se vuoi, posso caricare il progetto Test.