iOS Autolayout: due pulsanti di uguale larghezza, affiancati

92

Al momento sto riscontrando difficoltà con AutoLayout. Sto usando il generatore di interfacce e sto cercando di posizionare due pulsanti di uguale larghezza uno accanto all'altro come illustrato nell'immagine seguente.

disposizione degli obiettivi

Dalla seguente immagine di anteprima, la mia titleImage è stata adeguatamente vincolata e viene visualizzata correttamente, tuttavia i pulsanti non lo sono. Ho sperimentato allineando il pulsante 1 con il bordo iniziale di titleImage e il pulsante2 con il bordo finale di titleImage, tuttavia la distribuzione della larghezza tra i due pulsanti risulta distorta a questo punto, come mostrato di seguito.

scenario problematico

Il mio obiettivo è capire quali vincoli mancano e dovrebbero essere applicati ai due pulsanti per mantenere le stesse larghezze indipendentemente dal dispositivo. Se possibile, vorrei ottenere questo risultato tramite il generatore di interfacce anziché un codice aggiuntivo.

ios  iphone  xcode  autolayout 
— Scratcha
fonte
1
La muratura è un modo consigliato per eseguire questa operazione tramite programmazione. Link: github.com/Masonry/Masonry
— Itachi
1
ecco il link ... puoi controllare ... stackoverflow.com/questions/29620409/…
— EI Captain v2.0

Risposte:

246

Aggiungi i seguenti vincoli

  1. Assegna la stessa larghezza da button1 a button2.
  2. Assegna la spaziatura orizzontale tra entrambi i pulsanti.
  3. Assegna lo spazio iniziale dal pulsante1 alla sua superview.
  4. Assegna lo spazio finale da button2 alla sua superview.
  5. Assegna lo spazio in alto a entrambi i pulsanti.
    Fammi sapere se funziona per te.
— Abubakr Dar
fonte
7
Eccellente - questo ha funzionato per me. Nello specifico punto n. 2: aggiunta di una spaziatura orizzontale.
— Scratcha
WoW !!! Cosa volevi dire? Funziona davvero come un incantesimo e sono stato sprecato circa 3 ore! :( Nel mio caso avevo due viste di uguale larghezza nella super Vista che la dividevano. Tuttavia alla fine mi chiedeva qualcosa del tipo "Necessita di vincoli per Y o Altezza" Ho scelto di fare "Aggiungi vincoli mancanti" e si è risolto.
— Randika Vishman
@ Abubakr: funziona solo per una dimensione dello schermo poiché entrambi i pulsanti hanno la stessa larghezza.
— AG
1
Funziona anche per più di 2 elementi dell'interfaccia utente adiacenti!
— siege_Perilous
1
Bene, grazie ma ho trovato la soluzione ed è migliore nel codice. Assegna a ciascuno di essi l'allineamento centrale al genitore e dai la metà costante della dimensione del contenuto che puoi calcolare nel codice o se il contenuto è statico puoi semplicemente aggiornare i frame e aggiornare la costante. insieme a questo aggiungi anche metà della spaziatura centrale tra due pulsanti per l'allineamento centrale. E dai solo quello iniziale o finale all'altro pulsante. Risolve questo per me. E se il tuo contenuto è intrinseco e deve essere aggiornato, chiama il metodo degli aggiornamenti del layout e calcola di nuovo il valore costante.
— Amber K
79

Segui i passaggi e le schermate per una soluzione semplice

Passo 1)

  • Per il pulsante 1: imposta i vincoli: (1) iniziale, (2) in alto o in basso secondo le tue necessità, (3) altezza

Passo 2)

  • Per il pulsante 2: imposta i vincoli: (1) in coda, (2) in alto o in basso secondo le tue necessità, (3) altezza

Passaggio 3)

  • Premi Ctrl + trascina dal pulsante 1 al pulsante 2

  • Seleziona Spaziatura orizzontale

Passaggio 4)

  • Seleziona Entrambi i pulsanti (utilizzando il comando) e Aggiungi vincoli uguale larghezza

PRODUZIONE

Spero che ti aiuti :)

— Vvk
fonte
1
L'altezza non dovrebbe essere fissata. Lascia che la vista decida l'altezza del pulsante in base alle dimensioni dello schermo.
— Kunal Kumar
@KunalKumar questo caso L'altezza è fissa. puoi dirmi cosa vuoi?
— Vvk
@Vvk ... perfect bro :)
— Jaywant Khedkar
18

Il layout dello stack in iOS9 farà il lavoro davvero bene. Aggiungi la vista stack alla tua vista e configura come segue:

inserisci qui la descrizione dell'immagine

— Ben
fonte
0

La mia soluzione è

  1. Metti una piccola vista al centro di due pulsanti e mettila al centro (Centro orizzontale nel contenitore e centro verticale nel contener come 0).
  2. Aggiungi altezza e larghezza alla vista piccola.
  3. Aggiungi pulsanti i vincoli e assegna vincoli di spazio orizzontale alla vista piccola.
  4. Assegna alla vista piccola il colore di sfondo come i pulsanti o il colore della vista.

Nota: vedere la schermata.

inserisci qui la descrizione dell'immagine

— AG
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.