AutoLayout: Centratura verticale di due UIViews in una superview che può essere ridimensionata

Ho due UIButton, uno sopra l'altro, in una superview la cui altezza può essere ridimensionata. I due pulsanti dovrebbero avere una spaziatura verticale costante tra di loro, ma la spaziatura superiore e inferiore dovrebbe essere ridimensionata in modo che i due pulsanti rimangano centrati nella superview mentre si ridimensiona.AutoLayout: Centratura verticale di due UIViews in una superview che può essere ridimensionata

Ho cercato di creare due vincoli minore di o uguale (con uguale priorità) sulla distanza alle superview per ciascun pulsante, così come una spaziatura verticale costante tra i pulsanti, come illustrato di seguito: enter image description here

(Il motivo per cui è inferiore o uguale qui è perché questa vista è definita all'altezza specificata in IB per schermi da 4 ", ma può essere ridotta per schermi da 3,5". Tuttavia, ciò non fa come potete vedere dallo screenshot mentre l'app è in esecuzione: enter image description here

È quasi come se si fosse in grado di dire a AutoLayout che il tw o i vincoli stessi dovrebbero avere valori uguali, anche se entrambi sono impostati su "meno-o-uguali". C'è un modo per fare ciò che sto cercando di fare, o forse un modo migliore?

fonte

2013-07-11 Jamie Forrest

Stai usando storyboard o Interface Builder? –

Storyboard all'interno di IB. –

Questo è così banale da fare in IB.

1)^trascinare dal pulsante 1 in alto. seleziona "centro orizzontalmente nel contenitore".

2)^trascinare dal pulsante 1 a sinistra. seleziona "centro verticalmente nel contenitore".

3) fare lo stesso con il pulsante2.

4) ora l'unica cosa che resta da fare è ridimensionare i pulsanti perché questo è quello che sembra.

enter image description here

Questo è anche molto banale.

5)^trascinare dal pulsante 1 a sinistra. seleziona "spazio iniziale al margine del contenitore".

6)^trascinare dal pulsante 1 a destra. seleziona "spazio finale al margine del contenitore".

7) fare esattamente la stessa cosa con il pulsante2.

Il prodotto finito, si presenta così (NB non ho abbastanza di loro centro, ma avrei potuto abbastanza facilmente):

enter image description here

fonte

2014-09-25 18:20:20 smileBot

Questa risposta accettata non è accurata. La prima sezione, in cui l'autore dice di aggiungere semplicemente i vincoli centerX e centerY, NON darà come risultato le immagini mostrate negli screenshot che seguono. Se si impostano due UIViews sullo stesso centroX e Y, verranno impilati z-index. Gli screenshot accurati mostrerebbero come un singolo pulsante. Attenzione. – garrettmurray

@garrettmurray trascina i pulsanti sul punto desiderato, quindi esegui i passaggi. Potrebbe essere necessario aggiornare anche i vincoli. Questo ti insegna come utilizzare i vincoli di centraggio che si adattano correttamente ai cambiamenti di orientamento. Sto assumendo un po 'di conoscenza di base di autolayout nella mia risposta. – smileBot

Un modo per ottenere ciò consiste nel racchiudere i due pulsanti in un altro UIView e centrare quella vista nella vista del controller. Dare ai pulsanti una distanza fissa dalla parte superiore e inferiore di questa vista e una distanza fissa tra loro o un'altezza fissa per la vista.

fonte

2013-07-11 16:16:58 rdelmar

Ho provato a fare anche questo, ma non ho potuto farlo funzionare. In ogni caso sembra che dovresti essere in grado di fare ciò che sto cercando di fare senza dover avvolgere tutto in un altro UIView. –

@JamieForrest, non penso che sia facile da fare senza avvolgerlo in un'altra vista. L'ho fatto semplicemente trascinando due pulsanti sulla vista di un controller, selezionandoli entrambi, incorporandoli in UIView (dal menu), quindi centrando quella vista. Come hai provato a farlo e quale risultato hai ottenuto? – rdelmar

L'intero punto di Autolayout non è che non abbiamo bisogno di incapsulare le viste in una vista contenitore? – ninjaneer

Concordato con rdelmar. Ecco un'altra opzione se vuoi preservare la gerarchia delle viste.

Attualmente stai spaziatura dei pulsanti in alto e in basso utilizzando i vincoli. Invece, crea due vuoti UIView s, saranno usati come distanziali. Dovrebbero essere posizionati uno in alto e uno nella parte inferiore dei pulsanti. Utilizzando i vincoli di autolayout, assicurarsi che l'altezza di queste due viste spaziatore sia sempre uguale. Assicurati che siano posizionati rispettivamente in alto e in basso sui pulsanti e nella parte superiore e inferiore della superview.

In VFL: V:|-[spacer1(==spacer2)]-[button1]-(20)-[button2]-[spacer2(==spacer1)]-|.

Potrebbe essere necessario farlo nel codice, non sono sicuro che IB possa farlo.

fonte

2013-07-11 16:25:40 Maarten

Questo funziona. Ma non è carino. –

@JasonMoore "Descrivi il layout con ios in due brevi frasi" – Dbl

Il modo più semplice per centrare verticalmente è aggiungere un vincolo NSLayoutAttributeCenterY, preferibilmente all'elemento che si trova vicino al centro della vista. E se tutte le viste hanno vincoli di spaziatura verticale, allora saranno tutti centrati. Non è necessario utilizzare la gerarchia delle viste o aggiungere viste spaziali.

[self.view addConstraint: 
    [NSLayoutConstraint constraintWithItem:button2 
           attribute:NSLayoutAttributeCenterY 
           relatedBy:NSLayoutRelationEqual 
            toItem:self.view 
           attribute:NSLayoutAttributeCenterY 
           multiplier:1.0 
            constant:0]];

Se è necessario regolare il posizionamento, impostare la costante. Ad esempio: constant:-30 lo sposterà di 30 punti.

È inoltre possibile ancorare elementi in base a diverse aree logiche della vista. Ad esempio, se si desidera ancorare il primo pulsante al 25% dell'altezza della vista, è possibile impostare il moltiplicatore su 0.5.

fonte

2013-12-02 15:57:19

AutoLayout: Centratura verticale di due UIViews in una superview che può essere ridimensionata

risposta

Problemi correlati