Layout automatico - 5 pulsanti al centro

Sto cercando di entrare nel business di layout automatico, ma lo trovo un po 'difficile.Layout automatico - 5 pulsanti al centro

Sto cercando di ottenere 5 visualizzazioni di immagini da visualizzare una accanto all'altra al centro della vista. Hanno bisogno di ridimensionare se stessi per espandere la loro altezza/larghezza pure.

Questo è come appare in IB (e un pò il modo in cui ha bisogno di guardare quando si esegue l'applicazione): IB Of views

Così ho i seguenti vincoli:

Aggiunto aspect ratio di 1 : 1 in modo che siano sempre squadrati
Il primo pulsante "abbraccia" il lato sinistro della vista, quindi verrà visualizzato sul lato.
I seguenti 4 pulsanti hanno una spaziatura orizzontale per il pulsante accanto a loro
Ogni pulsante ha un vincolo nella parte superiore e inferiore dello schermo, quindi diventeranno più grandi se ridimensionate lo schermo.

Tuttavia, quando l'eseguo, sembra che questo: Results

e io sono solo un pò perplesso qui. Che cosa sto facendo di sbagliato?

Grazie in anticipo, Cordiali saluti -/JBJ

** EDIT ** ho aggiunto un vincolo finale per l'ultimo pulsante. Questo assicura che siano tutti all'interno dello schermo, ma è un po 'problematico quando si pensa alla sua dimensione, quindi neanche questo lo risolve. added trailing to last button

* edit * provato a rimuovere il vincolo superiore e inferiore in quanto sono quelle forzando le dimensioni up. Aggiunto un vincolo di centro verticale a tutti loro. Neanche questo funzionerà. Visualizzazione quali molto piccoli (in fila bene, ma troppo piccolo) e viene fornito con avvisi: In IB

In simulator

fonte

2015-01-14 J.B.J.

provare che fissa il vincolo Trailing per il diritto più visualizzazione dell'immagine – Dev

ho provato, ancora non funziona. Vedi modifica per risultati –

rimuovere i vincoli superiore e inferiore e centrarli verticalmente nella vista. Sono i vincoli superiore e inferiore che stanno dimensionando i pulsanti. Lascia che siano ridimensionati in base a come si adattano orizzontalmente. – vacawama

OK, qui va ...

aggiungere 5 pulsanti per la vista ... Nessun vincolo.

enter image description here

Aggiungere vincoli spazio orizzontale tra tutti loro. Aggiungi anche i vincoli dalla prima e dall'ultima vista alla superview. Ho anche cambiato l'ultimo vincolo a 0 (nota il +306 che mi dice che è attualmente fuori posto).

enter image description here

Selezionare tutti i pulsanti e (utilizzando il pulsante di vincolo aggiuntivo) aggiungere "larghezze uguali" a tutti loro. Notare il profilo punteggiato arancione che mi dice che ora avranno tutti uguale larghezza.

enter image description here

Ora allinearli al centro verticale della vista, con questo tasto ...

enter image description here

L'ultima cosa da fare è andare a ciascuno e aggiungere il rapporto di aspetto 1: 1. Dovrai aggiungere il vincolo e quindi modificarlo in un rapporto 1.

enter image description here

Assicurati di aggiornare i fotogrammi, una volta che hai finito di riposizionare i pulsanti per i loro nuovi vincoli ...

enter image description here

La schermata di anteprima mostra questo lavoro a tutti diverse dimensioni ...

enter image description here

fonte

2015-01-14 12:53:00 Fogmeister

Ma che differenza fa se li metto in un'altra vista contenitore? Perché non posso semplicemente usare la vista in cui si trovano ora come vista contenitore? I vincoli dovrebbero essere gli stessi? E credo di aver bisogno di questo poiché ho bisogno di farli cambiare in larghezza e altezza? –

@ user3625855 sì, hai ragione e stavo solo pensando a me stesso. Dimentica la vista del contenitore. Devi avere quattro cose. Primo pulsante vincolato al bordo sinistro. Ultimo pulsante vincolato al lato destro. I pulsanti hanno tutti uguale larghezza. Spazi tra pulsanti vincolati. – Fogmeister

Grazie mille per aver cercato di aiutare, ma ancora non funzionerà. Chiaramente mi manca qualcosa. Ho questi vincoli: pulsante più a sinistra vincolata al bordo sinistro Tutti i pulsanti hanno vincolo di spaziatura orizzontale più a destra il pulsante vincolata a bordo destro Ora, ha bisogno di un vincolo sulla coordinata Y pure. Immagino che potrei solo prendere un vincolo in cima a tutti loro. Quindi ho impostato l'aspect ratio su 1: 1 per assicurarmi che siano quadrati. Ma questo non funzionerà? Puoi mostrare un esempio? Non ho idea di cosa mi stia perdendo. –

Per ponendoli al centro dello schermo utilizzare verticalmente

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self 
                    attribute:NSLayoutAttributeCenterY 
                    relatedBy:NSLayoutRelationEqual 
                     toItem:self.superview 
                    attribute:attribute 
                    multiplier:1.0f 
                    constant:0.0f];

per l'immissione orizzontalmente Larghezza del pulsante = (larghezza dello schermo) - (dimensione della spaziatura dei pulsanti) - (distanza sinistra) - (distanza corretta)/5;

Uguale per altezza. Il vincolo di sinistra iniziale per la prima vista dell'immagine sarà la distanza a sinistra.

fonte

2015-01-14 12:00:46 YaBoiSandeep

era un po 'in cerca di un modo per farlo in IB così posso ottenere il blocco di esso. –

Quello che faccio sempre in una situazione del genere è semplicemente pensare. Quanti vincoli ho bisogno per definire al 100% il design? Cosa dovrei scrivere per dire a qualcuno al telefono che aspetto ha?

Nel tuo caso questo sono i seguenti vincoli (spero non lo vorrei dimenticare uno)

Sono tutte le piazze (altezza uguale larghezza, non un valore)
Hanno uguali dimensioni, basta impostarlo su uguale, non a un valore
spaziatura orizzontale tra gli elementi e bordo, impostarlo a dimensione fissa
verticalmente centrato

fonte

2015-01-14 13:18:02 Simon

Sì, va bene. Non sono sicuro dei primi 2 punti: Tutti i quadrati, quindi uguale larghezza/altezza, non un valore? Questa è la proporzione 1: 1 parte, giusto? Quindi ho appena impostato il primo pulsante per avere proporzioni 1: 1 e l'altro per averlo uguale? –

@Fogmeister U ha voluto aggiungere un'altra vista, ecco perché ho downvoted te, ma la risposta è la migliore così hai ottenuto il mio upvote. – Simon

@Simon yeah Stavo pensando ad un diverso centro di allineamento (dove li centra tra due viste). Ad ogni modo, mi sono reso conto dopo aver dichiarato che avevo torto, ed è per questo che ho modificato. – Fogmeister

Luogo 5 pulsanti verticalmente e orizzontalmente centro in UIView
Selezionare tutti loro e incorporare in una vista pila
Change distribuzione ad occupare ugualmente.
Regolare la spaziatura nell'ispettore attributi per creare spazio tra i pulsanti.
Aggiungere lo spazio iniziale e finale e il vincolo di altezza per impilare la vista. Anche allinearlo verticalmente.

fonte

2017-01-17 09:19:45

Layout automatico - 5 pulsanti al centro

risposta

Problemi correlati