(piano calmo)
– Alrighty,
l’ora è le tre e mezza,
e possiamo iniziare con animazioni con Auto Layout
e impilare le viste.
Un po ‘di me,
Sono uno sviluppatore e autore indipendente,
e ho diviso il mio tempo tra il mio piccolo
studio per creare app per iPhone,
e lavorando su un sito web chiamato raywenderlich.com,
Woohoo!
Dove scriviamo tutorial,
scrivere libri e così via, e così via,
e `veramente forte.
E, poiché all’inizio di quest’anno,
Ho pubblicato un libro intitolato iOS Animations di Tutorials.
Qual è il mio fantastico libro sulle animazioni
su iOS e ho scritto una newsletter di animazioni,
è una newsletter mensile sull’animazione
quindi faccio cose pazze una volta al mese e le mando in giro
per le persone che sono interessate alle animazioni.
Ecco perché sono qui oggi
per parlare di layout automatico e impilare le visualizzazioni.
Possiamo iniziare.
Le animazioni sono fantastiche,
specialmente in iOS 7 e iOS 8 e iOS 9.
Perché?
Perché non lo abbiamo davvero
queste ricche interfacce utente che hanno
lo sfondo di legno o il
grondaie in acciaio
e cose del genere che avevamo in UI.
Al momento è principalmente testo
e testo con colore.
Devi trovare nuovi modi per mettere il tuo marchio
davanti a tutti
e rendi la tua app distinguibile
da altre app.
Per esempio,
questo screenshot qui
potrebbe essere una delle app integrate
alla fine che viene fornito con iOS,
o potrebbe essere un’app personalizzata che qualcuno
ha investito centinaia di ore nella progettazione.
Ma non puoi dirlo subito,
quindi è davvero difficile.
E se tu potessi vedere come interagisce l’interfaccia utente
con l’utente e in che modo l’interfaccia utente reagisce a
interazione dell’utente così via, forse c’è un delizioso
Non lo so … forse il
il portatile sta saltando un po ‘
quando lo premi, o forse il
la parola palloncino vola via quando la tocchi
o qualcosa di simile.
Questo è un modo davvero semplice per distinguere qualcuno
mettere un sacco di sforzo in questa app senza
avere tutto il
interfaccia visiva vecchio-temporizzatore.
Ma non puoi dirlo subito,
e le animazioni sono davvero un modo fantastico
per rendere davvero unica la tua app.
Questa è l’app contatti integrata in iOS,
ma non si poteva davvero dire perché
si tratta davvero di spazio bianco, davvero di testo,
si tratta davvero del colore.
Le animazioni sono fantastiche perché
se hai mai scritto
un’app su iOS
hai fatto
almeno una singola animazione
perché è così facile.
Ecco come iniziano tutte le esercitazioni di animazione …
con il quadrato rosso.
A volte il quadrato è blu
ma è principalmente rosso.
E poi il quadrato si muove un po ‘
lungo e c’è una singola riga di codice
e le persone sono davvero impressionate
e loro sono come
“Sì, posso fare animazioni su iOS,
perché è solo una riga di codice! “
È animato da WithDuration, tu dici
per quanto tempo vuoi che l’animazione vada,
e poi c’è una chiusura dove dici
che tipo di bersaglio
i valori finali per l’animazione sono
E poi questa super UIKit API super-intelligente
prenderà i valori correnti, per esempio,
in questa particolare animazione prenderà il
posizione attuale del quadrato rosso
e creerà una piccola animazione per un secondo
e lo sposteremo in
sull’asse x sul valore di 200.
Assomiglierà a questo.
Ta da.
E ‘carino
Tutti sanno come farlo su iOS.
Però,
le cose cambiano nel tempo
E ‘stato fantastico quando iOS 3 era fuori,
ed è stato fantastico quando iOS 4 era fuori,
ed è stato fantastico quando iOS 5 era fuori,
ma poi abbiamo iniziato ad avere schermi diversi.
Schermi più grandi, schermi più piccoli,
schermi divisi, visualizzare il contenimento del controller
e cose così.
Spostando il quadrato rosso a
il punto 200 sull’asse x non ha davvero
significa molto più.
Prima di avere diverse dimensioni dello schermo
era predeterministico, sapevi dove inizia lo schermo,
0.0, e poi lo hai spostato di 200 punti
a destra, era perfetto.
Ora, con 6+ o 6, o 5S o qualsiasi altra cosa,
non lo sai davvero
cosa significa passare al punto 200.
Potrebbe essere davvero vicino al bordo dello schermo,
potrebbe essere dritto al centro
dello schermo, potrebbe essere qualsiasi cosa.
E mi fa davvero male-
(si schiarisce la voce) Mi dispiace, mi fa davvero male,
oh mio dio, okay …
Emozionale qui. (risata)
Mi fa davvero male quando le persone
avere un problema di questo tipo
e scapperebbe subito a Stack Overflow.
E diremo come fare questa cosa dell’animazione
nella mia app perché non la capisco davvero
e la gente dirà,
“Oh sì, certo includo questo Bloated.framework
da qualcuno e incolla questo codice! “
E poi sicuramente accettalo, funziona.
Ma non è davvero così
la via.
Fa male quando tu-
Se inizi a litigare con le persone
su questi tipi di siti web è così
anche peggio di
facendo nulla. È sempre
una domanda su cosa fare.
Ma comunque, non dovresti farlo.
Il mio punto è questo
è meglio capire come funzionano le cose
e perché accadono perché poi tu
sapere cosa fare la prossima volta che succede
come quello.
Andiamo alle domande.
“Animazioni, no lavoro?”
Non funzionano perché
Layout automatico è diverso da
pre layout automatico.
Cosa voglio dire?
Tempo per una rapida demo.
La sessione sarà
meno diapositive e altro mostra cose sullo schermo.
Alla fine e spero che tu sappia come
le cose funzionano alla fine e tu sai come
avvicinarsi a loro e come creare animazioni
con Auto Layout e più avanti nella sessione
con le viste dello stack.
Ecco il mio storyboard
e come la sua attuale applicazione,
Sto usando il layout automatico.
Non proprio adatto a questo tipo di risoluzione,
ma ancora puoi vedere la maggior parte di ciò che è abbastanza.
Quello che ho qui, è una schermata di accesso per
un’app immaginaria.
E ho il nome utente e un campo password
qui in alto perché ho l’idea di animarli
verso il centro dello schermo
quando l’utente apre l’app.
E ho un piccolo bottone qui che dice andare
quale farà il login, per esempio.
Ho preparato tutto
in Interface Builder. Li ho centrati
e poi ho messo un po ‘di costrizione qui
su nome utente e password,
e questo è davvero fantastico.
E poi, immaginiamo che vado a impilare
Overflow, e ci vedo
Super Awesome Ninja Dev
ha risposto alla mia domanda,
“Oh sì, certo,
chiama la tua animazione con durata
e quindi modificare la proprietà centrale
e dovrebbe funzionare. “
Vado al mio codice qui in vista del pari
dove ho intenzione di provare cosa Super Awesome Ninja Dev
consigliato. Ho intenzione di mettere dentro
UIView.animationWithDuration,
con
mezza durata.
Ho due prese qui,
nome utente e password.
Ci proverò
animare loro
proprietà del centro.
Password, centro Y.
Penso che 200 punti saranno sufficienti.
E poi perché mi sento già
molto avanzato nelle animazioni
Verrà aggiunto un secondo da animare
il campo del nome utente, con un po ‘
un po ‘di ritardo in seguito.
Questi sono i built-in standard
API, niente di veramente stravagante sta succedendo qui.
Basta eseguire un’animazione
sul campo username.
Va bene,
self.fldUsername.center.y
Va bene.
Molto velocemente.
Uno si sposta verso il basso e l’altro si sposta verso il basso,
allora dovrebbe sembrare davvero fantastico.
Sembra davvero fantastico.
Non sono ancora veramente visibili perché
Li ho fatti
non completamente opaco.
Li renderò opachi pure.
Facciamo anche questo.
Va bene, sei felice,
stai codificando, tutto è perfetto.
Vado anche io
mostralo comunque.
E ora la mia transizione è perfetta.
Il layout automatico non mi preoccupa davvero.
Cambio la proprietà centrale
ed è tutto abbastanza buono.
Poi, scappo a Stack Overflow,
accetta la risposta
da Super Awesome Ninja Dev,
e poi dico,
“Ok, ora devo fare la parte di login
di questo.”
Quando provo a inserire il nome utente,
allora abbiamo questo.
C’è il problema
Appena mi concentro sul campo di testo,
tutto salta.
Possiamo vedere accadere due cose.
Prima i campi sono stati riposizionati nel punto in cui erano originariamente.
Secondo, non svanirono come erano
originariamente. Hanno iniziato da
appena visibile e sono ancora
completamente opaco come li ho animati a.
Sembra che questa catena
questa animazione qui è stata ripristinata,
ma queste due linee non furono ripristinate.
Questo perché è davvero importante capire
cosa fa Auto Layout. Come suggerisce il nome,
rende automaticamente il tuo layout per te.
Si prende cura dei tuoi layout per te.
E qui sei andato oltre la sua testa
e ha cambiato la posizione di queste viste
manualmente, e quello non era veramente buono.
E hai cambiato l’alfa manualmente
e quello andava bene, perché l’alfa non è davvero
parte del layout. Non è davvero un posizionamento
o dimensionamento o altro
La prima morale di questo discorso è
non tutto cambia con Auto Layout.
Non tutto sui cambiamenti di animazione.
Non è davvero un mondo completamente nuovo.
È stato un nuovo mondo coraggioso?
Non è davvero un nuovo mondo coraggioso.
Si tratta di posizionamento e dimensionamento
perché questo è parte del layout.
Se hai animato l’alfa, se hai animato
chiamata di sottofondo o qualcosa del genere,
va bene. Funziona ancora alla vecchia maniera.
Cosa non funziona alla vecchia maniera
sta cambiando il centro manualmente.
Ma tu dirai,
“No, funziona un po ‘.”
Funziona.
Non è come non funziona,
è che in realtà non lo è
lavoro per sempre.
Questa è la cosa veramente importante
che voglio che tu capisca in questo discorso
e da quel momento in poi tutto sarà veramente facile.
La domanda è: perché è saltato indietro così quando tocchi
nel campo di testo?
Questo è davvero semplicistico
spiegazione di come funziona il layout automatico.
Abbiamo le tue opinioni sullo schermo.
Ci saranno pulsanti, ci saranno etichette,
ci saranno immagini e cose del genere.
Quando li deponi in Interface Builder
e hai impostato i tuoi vincoli,
stai allegando una lista di vincoli
su quelle viste che spiegano
la relazione tra loro, tra le opinioni
e tra le viste e il contenitore
del tuo controller di visualizzazione.
Che, di solito, l’iPhone è lo schermo,
quindi alla fine tutto dipende dalla dimensione dello schermo.
Ad esempio quando la tastiera salta,
o forse quando la chiamata è in arrivo,
quindi anche la dimensione del contenitore o del
guarda anche il controller cambia. 308 00: 12: 56,182 -> 00: 12: 58,400,
Non saltiamo troppo avanti.
Abbiamo una lista di vincoli
e quei vincoli, se vai alla documentazione,
Sottoclasse NSLayoutConstraint
NSObject.
Non è alcun tipo di
classe visiva. esso
non ha davvero la tremenda logica
Dietro. È solo un modello.
Contiene poche proprietà
definire
un’equazione come questa, quindi puoi
impostare regole come i pulsanti dovrebbero essere
sempre centrato Dovrebbe essere sempre
posizionato al centro o al centro del
larghezza del controllo della vista. O forse questo pulsante
dovrebbe sempre avere la stessa posizione di quest’altra
pulsante. Questo è
espresso in queste equazioni, ma ciò che è importante è quello
questi vincoli si progettano in Interface Builder
sono modelli, oggetti dati che contengono
poche informazioni. Non fanno davvero niente
con UIKit.
Voglio dire che in realtà non disegnano nulla, in realtà non lo fanno
sposta le tue opinioni.
Ciò che muove le tue visualizzazioni è Auto Layout.
La struttura dell’app per il layout automatico.
Sarebbe più preciso chiamarlo
UIKit, ma chiamiamolo layout automatico per questo scopo.
Quando le cose devono apparire sullo schermo o le cose hanno bisogno
per trovare dove il loro posto è sullo schermo,
Layout automatico acquisisce questo elenco di
vincoli, risolve tutte le equazioni
e trova dove dovrebbero apparire tutte queste viste
sullo schermo. Ciò che produce è questo
cambierà il centro e i limiti dei tuoi punti di vista.
Davvero semplice
Se guardi la lista che ho lì,
c’è ogni tipo di vincoli. C’è larghezza, altezza,
centro x, margine y, rapporto tra larghezza e altezza,
spazio verticale e verticale ai margini e tutti i tipi
di vincoli. Ma, quando Auto Layout risolve tutti questi
regole che hai impostato, con cosa finisce
cambiando la posizione dei tuoi punti di vista e le loro dimensioni.
Questo è tutto ciò che fa.
Tutto ciò che fa è cambiare la dimensione e la posizione.
E naturalmente, quando lo fa, questo si riflette nel tuo
viste riposizionate, ridimensionate.
E questo è tutto per il layout automatico. È davvero pazzesco
Tutto ciò che fa è solo impostare la dimensione e la posizione
dei tuoi punti di vista
Ora che lo sappiamo,
le cose si fanno interessanti perché
la prossima cosa da guardare è,
“Quando succede?”
Perché i campi hanno cambiato posizione quando ho fatto clic
nel campo di testo.
Il layout automatico reagisce a
modifiche interne ed esterne al layout.
Le modifiche interne avverranno se si modifica un vincolo,
o se si rimuove uno dei vincoli o se si
fare qualcosa dal codice, per esempio.
E i cambiamenti esterni possono essere
se l’utente ruota il dispositivo,
quindi anche la dimensione del controller della vista cambia.
Quello sarà un cambiamento esterno.
Layout automatico reagisce solo a quelli.
Quando carichi, diciamo
che si spinge un controller di visualizzazione, e questo sarà
il suo ciclo di vita. Quando lo spingi, prima
carica la vista dallo story board.
E in questo momento, Auto Layout ha bisogno di risolvere il layout
in modo che sappia dove mostrare le cose sullo schermo.
Molto carino. Facciamo un passaggio
proprio come ti ho mostrato nella diapositiva precedente.
Risolve tutti i tuoi vincoli e trova la posizione
di tutti i punti di vista
E poi, niente.
Quindi è come la calma.
Niente succede davvero molto.
Le cose sono posizionate, non si muovono,
e qui puoi saltare dentro e cambiare il tuo centro
senza problemi
Tuttavia, se si tocca un campo di testo, ad esempio,
come ho fatto io, poi la tastiera si aprirà e così sarà
cambia la dimensione dei margini del controller della vista.
Questo attiverà un altro passaggio sul layout
e il layout automatico lo farà
cambiare l’orientamento qui, ma la stessa cosa.
Layout automatico recupera l’elenco dei vincoli,
calcolarli in base alla dimensione del contenitore,
e poi riposizionarli di nuovo.
Se hai cambiato il frame o il centro delle viste,
questo cambiamento verrà quindi ripristinato a ciò che il
i vincoli dicono che la posizione e le dimensioni saranno.
Come detto, questo potrebbe essere un cambiamento di orientamento,
che innescherà un passaggio del genere.
Oppure, viene visualizzata una tastiera. Questo sarà
innescare un altro passaggio dal layout.
Se cambi tu stesso uno di questi vincoli,
che farà scattare un passaggio.
Ecco perché questo esempio ha funzionato con
campi che vanno giù, perché è stata vista la visualizzazione del carico.
L’app carica la storyboard, mostra loro dove
dovevano essere, poi li ho animati
me stesso, quindi questo non causa problemi.
Ma poi, visto che i margini sono cambiati quando fai il pop up
la tastiera, Auto Layout ha fatto un altro passaggio, ricalcolato
tutti i vincoli, e dal momento che il vincolo
non ha cambiato, ha spostato i campi di nuovo dove erano.
Puoi saltare tra questi
e fai qualche piccolo aggiustamento al centro,
ma poi di nuovo, quando qualcosa cambia
quelli saranno sovrascritti.
Ok, cosa possiamo fare per fare le animazioni corrette?
Bene…
Diamo un’occhiata a
come appare un’animazione normale.
Si cambia centro o cornice
nel tuo codice, e ciò accade all’istante.
Non appena cambi il centro di una vista
appare solo in quel punto.
E quindi chiami animateWithDuration che è
la normale API per me. Quindi, qualsiasi cosa tu faccia
all’interno della chiusura che inserisco sullo sfondo giallo,
tutte queste modifiche che fai vengono quindi animate.
La differenza tra queste due linee di codice
è quello che si trova nella chiusura delle animazioni
e uno non è solo in una chiusura di animazioni.
Tutte le modifiche che fai dall’interno della chiusura
sono animati.
E
c’è una lista delle proprietà animabili,
cose come alpha, background chiamante, posizione,
dimensione, e così via, che è possibile modificare all’interno
la chiusura, che verrà automaticamente automatizzata
di UIKit.
Questo è ciò che si spera abbia fatto prima.
Cosa puoi fare da Auto Layout,
è-sai come funziona.
Abbiamo già detto che questo è il modo in cui funziona.
Ora dobbiamo fare la connessione
un passaggio sul layout automatico prende tutti i vincoli,
ricalcola e cambia centro e limiti.
Centro e limiti sono proprietà animabili.
Ci stiamo avvicinando molto a quello che stava succedendo
prima. Quello che dobbiamo fare è cambiare il
vincoli e quindi dall’interno del blocco di animazione,
forzare un passaggio sul layout.
All’interno del blocco di animazioni, dì ad Auto Layout,
“Ehi, prendi la lista di tutti i vincoli,
trova dove dovrebbero apparire ora le mie opinioni
con questi vincoli. “
E poiché Auto Layout cambia solo in posizione
e la dimensione dei punti di vista e quelli sono animabili,
allora questo aiuterà in modo automatico.
Il tuo compito è trovare i vincoli che desideri modificare,
cambiarli come vuoi, e poi da un
blocco di animazione, trigger a
passare il layout.
Stabiliamo tutto questo,
ma lascia che ti mostri rapidamente come si fa
dal codice
Questo è il mio prossimo
esempio per mostrare i vincoli
e come animarli.
Ho una piccola app con una piccola lista qui.
È un’app da fare.
E sto avendo questo bar in alto qui
che voglio ridimensionare in modo dinamico.
Per mostrarti la premessa,
fammi aprire il file story board.
Ok, è davvero facile. C’è una vista in alto
e una vista tabella in basso.
La vista dall’alto è
appuntato in alto, la vista tabella
è bloccato in fondo, e poi sono
bloccato l’uno all’altro.
Ho il vincolo di altezza di questo
quello dice che sarà altezza 60 punti.
E questo è il mio …
Questa è la mia app in esecuzione.
Quello che voglio fare qui per mostrarti come funzionano le cose
sto andando a fare clic sul pulsante più, e questo si allargherà
questa barra in alto e vedrai più UI
lì dentro e così via.
Esistono due modi per animare i vincoli.
Entrambi sono molto semplici, quindi inizierò con
il primo.
Il primo è quando vuoi cambiare il
costante di un vincolo. Fammi aprire le proprietà qui.
Va bene…
Qui tutti i vincoli che vengono applicati
al mio piccolo bar qui, ma sono davvero interessato
nell’altezza. L’altezza è impostata su 60 punti,
e quando modifichi il vincolo puoi vedere
che dice solo 60 punti e basta.
È un’altezza difficile.
Voglio cambiare la costante in qualcos’altro,
al valore di 200 o giù di lì, per ingrandire
la barra in alto.
È davvero facile farlo. Sapevo quale
vincolo che voglio animare, quindi ho intenzione di andare
al mio punto di vista controller e
Ho intenzione di fare uno sbocco.
Poiché i vincoli sono qualcosa
che ti trovi in Interface Builder,
quindi puoi anche fare degli outlet per loro
e quindi utilizzare la presa per accedervi
in tempo reale. È piuttosto semplice
Inserirò un IBOutlet
chiamato altezza del menu,
e sarà di tipo NSLayoutConstraint
Così.
E poi qualsiasi altra vista del pulsante,
visualizzazione del testo o qualsiasi altra cosa tu sia abituato a fare
per essere utilizzato dalle prese,
puoi andare allo story board …
Trova il vincolo di altezza, eccolo lì,
vieni all’ispettore di Connections,
e quindi trascinare dal
nuova presa di riferimento per visualizzare il controller
e connetti il tuo outlet al vincolo.
Ora la tua presa punta al vincolo,
e puoi accedervi in tempo reale.
Davvero bello e davvero semplice.
Penso che non avrò tempo per
tutto ciò che avevo in mente, quindi vado a
saltare alcune cose.
Questa azione è già collegata al mio pulsante più,
Qui posso dire altezza del menu,
costante, che è la costante di Interface Builder,
uguale a qualcos’altro
Posso dire che è uguale a 200, in questo modo.
E ciò che ciò comporterà è,
non appena clicco,
non succede molto Non è quello che volevo.
Forse questo non è-
Sì, sembra che non sia giusto.
Oh, vero, non è connesso, okay.
Grazie.
Va bene, non appena lo clicco
quindi prende in considerazione la nuova altezza.
Ho cambiato il vincolo e questo è un cambiamento
non sarà annullato a caso, perché ora il vincolo
dice che sarà questa altezza.
Ma vogliamo le animazioni vero?
Poiché ora possiamo controllare il vincolo, le animazioni
sono veramente facili da fare. Racchiudilo con la chiamata di razione.
Può anche essere un’animazione di primavera. Facciamolo per divertimento.
Userò un’animazione di primavera.
Questa è l’API UIKit predefinita, di nuovo.
Niente di veramente pazzo in corso.
Quello che ho detto sulla mia diapositiva
e ho intenzione di attenermi ad esso, è stato
cambiando i vincoli ovunque nel codice,
e quindi forzare un passaggio su quel layout automatico
dall’interno del blocco di animazione.
Il passaggio del layout è quello che cambia
il centro e i limiti e così via.
Modifica dei vincoli
non fa nulla Non è così
Fai qualcosa.
Avere un pass per il layout e
layout che cambia centro e limiti,
questo è ciò che fa qualcosa.
Facciamo esattamente questo.
Mio
il vincolo qui è aggiornato,
e qui dal blocco delle animazioni
Sto solo per dire,
“Visualizza il layout se necessario”
che costringerà
Layout automatico per immediatamente
considera tutti i vincoli e, se qualcosa è cambiato,
quindi ricalcolare tutto e modificare il
posizione e dimensioni delle viste.
Ecco perché è chiamato,
“Layout se necessario.”
Perché forse non hai cambiato nulla,
allora non farà nulla.
Questa volta, quando clicco,
allora questo cambiamento nel vincolo è già animato.
Ciò che è veramente importante qui
da notare è quello
Non animare nulla sulla vista tabella.
Ho solo una riga che modifica il vincolo
sulla barra in alto. Io non davvero
dì alla vista tabella di fare qualsiasi cosa,
ma…
poiché la vista dall’alto e la vista tabella sono bloccate
insieme,
cambia anche l’altezza di quella
l’altezza dell’altro.
Non lo faccio esplicitamente, io
lasciare Layout automatico per risolvere tutte le regole
che ho deposto. E dal momento che le regole che ho fatto
era così che rimanessero insieme, che cambia entrambi.
Anche le modifiche ad entrambe sono animate
perché
i loro limiti sono stati cambiati
dall’interno del blocco di animazione.
Questo è davvero
facile e ora puoi farlo
tutti i tipi di altre cose più lontano da qui.
Finché sai perché
l’animazione funziona così,
allora sei un buon modo per capire
come fare cose più complesse.
La seconda cosa che voglio mostrare sui vincoli
è-
È semplicemente fantastico
quando devi cambiare la costante
un vincolo, così come quello che aveva ora.
Abbiamo avuto un’altezza hard set di 60 punti
e volevamo farlo 200.
E questo è veramente facile.
Voglio che la costante sia questo valore.
E quindi attivare un’animazione,
Tutto è fantastico.
Il problema è
se vuoi cambiare il moltiplicatore
su un vincolo.
Se dici,
“Voglio cambiare il moltiplicatore
a 1,5 o qualsiasi altra cosa. “
Il moltiplicatore è
sola lettura.
Puoi cambiare i vincoli
che sono valori fissi, ma non è possibile
cambiare i vincoli che dicono,
“Voglio la vista nel mezzo
dello schermo.
O se voglio la vista in una terza altezza
dello schermo “
perché quei vincoli usano moltiplicatori,
e non puoi davvero cambiarli.
Cosa dovremmo fare?
L’unico modo è passare oltre
tutti i vincoli, trova quello che vuoi
per cambiare, ucciderlo e poi inserire
il nuovo al suo posto.
Facciamolo.
È davvero facile Non è un problema.
Come ho detto, entrambi i modi sono davvero facili.
Voglio spostare il titolo
un po ‘a sinistra
quando il menu si apre.
E questo è grande perché il vincolo che
Ho intenzione di animare è chiamato
allinea il centro a x.
E allinea il centro a x ha una costante di 0
moltiplicatore 1, e che lo posiziona nel
molto al centro della barra superiore.
In Xcode 7, lì
è un nuovo campo quando stai modificando
i tuoi vincoli, chiamati Identificatore.
L’identificatore è un modo per dare il tuo
costringere un nome.
Questa proprietà esisteva anche in iOS 8,
ma Xcode 6 non aveva questa piccola casella di testo.
Se stai ancora utilizzando Xcode 6,
tutto ciò che dirò è valido, ne avrai bisogno
utilizzare gli attributi definatore e tempo dell’utente
per impostare l’identificatore.
Dovrai dire qui
stringa identificativa, quindi
imposta l’identificatore in questo modo.
Poiché Xcode 7 è ora stabile,
Ora userò la scatola integrata.
Ancora, questo è ancora possibile con Xcode 6,
hai solo bisogno di impostare l’identificatore in modo diverso.
L’identificatore è solo un modo per dare il tuo vincolo
un nome. Questo è fantastico perché puoi
loop sui tuoi vincoli, controlla il nome,
e poi trova quello che vuoi uccidere.
Chiamerò questo centro
e ora posso trovarlo e ucciderlo.
Se faccio una stampa qui
e stampare tutti i vincoli
dal mio punto di vista
per assicurarsi che tutto funzioni.
Quando clicco, okay-
È brutto.
Scusate.
Ho intenzione di scrivere a
per c in view.constraints …
Quindi stampa c in questo modo.
Questo dovrebbe farlo.
Va bene.
Qui tutti i pazzi tipi di vincoli
che stanno definendo il mio layout.
Sto cercando l’uno
Sono interessato a.
Troppi vincoli.
Troppi vincoli.
Lasciami fare qualcos’altro.
Titolo, etichetta, super vista.
Questo dovrebbe darci solo il vincolo
questo ci riguarda
Veramente?
Va bene.
L’importante è
non perdersi d’animo, per continuare a provare. (risata)
Va bene,
questo ci darà
i vincoli a cui siamo interessati
Quindi, abbiamo questo
riassunto criptico da Apple
questo ci dice cosa fanno
Puoi notare che uno di loro
dice centro, e
è quello che voglio trovare
e usare Questo è davvero, davvero utile.
Quello che sto per fare è-
se quello che sto attualmente guardando
ha l’identificatore fuori centro,
quindi imposta la proprietà attiva su false,
che lo rimuoverà dalla gerarchia del layout
e completamente ucciderlo.
Se io
clicca ora,
come lo vedi spostato di lato
perché non c’è più allineamento orizzontale.
Questo vincolo non viene considerato
più nel layout.
Perde la sua
l’allineamento orizzontale è
di fianco.
Ora è facile come
creando un nuovo vincolo e
imposta qualsiasi vincolo che desideri dal codice.
Lo farò molto velocemente.
NC sarà il mio nuovo
NSLayoutConstraint e useremo il completamento automatico
per i 20 parametri che entrano in seguito.
Voglio applicare questo vincolo
sull’etichetta
Molto carino.
Ho intenzione di cambiare il vincolo del centro x,
anche carino
Userò un uguale,
quindi tutto questo è il codice che
Interface Builder scrive per te
quando si crea un vincolo.
Puoi essere felice solo se lo usi
Interface Builder.
Rapidamente, ho intenzione di ricreare
questo e cambia il moltiplicatore.
Sto per dire 0.5
per spostarlo un po ‘a destra.
Qualsiasi vincolo che vuoi fare
e hai fatto molte volte,
e se è blu possiamo anche crearlo
da codice come quello
Questo nuovo vincolo, l’unica cosa che devi fare
è impostato su true
e così sarà
forzare il layout automatico per considerarlo
al passaggio successivo e aggiungerlo alla gerarchia del layout.
Questo uccide il vecchio,
questo ne crea uno nuovo,
e questo dice,
“Okay, dovrebbe essere considerato questo nuovo
nel layout. “
Questo è tutto ciò che serve per animare un vincolo
come questo.
(domanda non udibile dal pubblico) Scusa, per aggiungerla?
Vedo da dove viene la confusione;
Odio Apple per averlo fatto.
Di solito in Cocoa devi impostare i delegati,
devi costruire relazioni e cose
in questo modo, ma non con questa API.
Con questa API,
finché si imposta attivo
proprietà sul vincolo a false,
la prossima volta Auto Layout esegue un passaggio,
dirà,
“Questo vincolo non è attivo,
Non ne ho bisogno. “
E lo rimuoveremo dalla lista dei vincoli.
E il
il vincolo perderà tutti quelli che
lo conserva e verrà ucciso.
Questa linea qui è la condanna a morte
per questo vincolo. È tutto per questo.
È finita.
Se non lo tratti in nessun altro modo,
allora è finita per questo.
Quindi la stessa cosa quando sei
aggiungendo nuovi vincoli, questo crea
un oggetto che semplicemente
si blocca lì nell’universo.
Quindi, quando si imposta attivo,
la prossima volta che Auto Layout esegue un passaggio, dirà,
“Questo è attivo.”
Lo aggiungerà all’elenco dei vincoli
e questo lo manterrà.
Poiché il vincolo lo ha già
un’idea che sono le due opinioni che sono
preoccupato di questo, è tutto te
devo fare.
Questo è il modo di ucciderne uno,
e questo è il modo di
aggiungi uno come quello
Questo è praticamente
tutti.
C’è un’API che è statica
metodo su NSLayoutConstraint
dove puoi aggiungere
più vincoli allo stesso tempo,
ma quello che fa è
andare su tutti loro e impostare attivo su true.
Questo è tutto.
Quando fanno clic qui ora questo,
quindi la lista di imballaggio si sposta a destra
perché ho appena aumentato il moltiplicatore.
Due semplici modi per … (il pubblico prende una foto)
Va bene … (risate)
Per animare i vincoli.
È facile quando sai come
Funziona.
Uno era fare uno sbocco e cambiare una costante.
L’altro era
se vuoi cambiare un moltiplicatore devi
rimuovi questo e poi aggiungine uno nuovo.
E poi il più importante,
chiama layoutIfNeeded () all’interno di un blocco di animazione.
Davvero semplice Questo è tutto ciò
Il layout automatico prende.
Quindi, tutte le altre animazioni che vuoi fare
come alfa, colore, tinta, qualcosa del genere,
puoi farlo nel modo normale.
È abbastanza facile
Ma quest’anno
abbiamo viste stack.
Le viste dello stack sono
se vai ai documenti Apple,
puoi vedere che i mercati Apple impilano le visualizzazioni come,
“Layout automatico senza vincoli”.
Questo è un modo per creare animazioni di layout automatico
senza dover animare i vincoli.
E ‘carino Tutto il tempo
che ho lasciato … se qualcuno mi segnerà
quanto tempo mi rimane?
No?
9 minuti, perfetto.
Salterò le diapositive e andrò dritto
l’altro progetto.
Ragazzi volete vedere come le viste dello stack
sono animati?
È più sì che ums.
Ho un terzo progetto di esempio qui
per mostrarti come fare le viste dello stack.
La sua premessa è
è una piccola applicazione del negozio.
Se lo acquisti dall’app store
ti mostrerà la lista di tutti i libri
su cui hai lavorato puoi anche comprare.
Qual è, penso, un grosso problema.
C’è una lista di libri
e quando si fa clic su uno nella vista di dettaglio
controller, vedrai la copertina del libro
e alcuni dettagli.
Lo farò rapidamente tramite viste stack
per mostrarti com’è facile.
Bene, il mio schermo dei dettagli è totalmente
vuoto.
Che è un buon inizio
Quello che voglio è
un po ‘di testo che lo farà
mostra il nome del libro e il
anni di rilascio e così via.
Chiamerò questo titolo,
un’etichetta come questa
Quindi, questo
Chiamerò il titolo del libro.
Questo sarà molto più grande
e con un font più elaborato.
Troppo elegante …
Ho due etichette come questa,
e le viste stack sono un modo per raggruppare le viste.
Hai qualche punto di vista, vogliamo raggrupparli insieme
per sempre.
Questa è la strada da percorrere.
E c’è un nuovo pulsante in
in Xcode
dove prima c’era
il quarto pulsante di layout automatico
nessuno l’ha mai usato e l’hanno appena ucciso
e metti questo nuovo che, si spera, tutti
userà.
È fondamentalmente un piccolo tavolo con una freccia
puntando in basso così.
Quando hai le opinioni che hai
vuoi raggruppare insieme selezionato,
e basta fare clic su questo,
e poi li mette insieme in a
vista pila.
Ora sono fondamentalmente in un gruppo.
C’è lo schema, quindi c’è una vista dello stack
e quindi le due viste sono sotto-viste di questo.
Quindi, la vista dello stack è carina perché
può fare cose folli.
Puoi fare cose pazzesche come questa …
C’è una proprietà chiamata Axis,
che definisce se la vista dello stack
è una pila orizzontale o una pila verticale.
È davvero facile fare clic qui
e cambialo.
Questo lo sistemerà ora verticalmente,
e se lo clicco, le sistemerà di nuovo
orizzontalmente. È molto bello.
E c’è una proprietà di allineamento
che puoi cambiare dall’alto
e allinearli tutti all’inizio del contenuto,
o in basso come questo,
o centro, che è abbastanza bello.
Inserirò una spaziatura di 10 punti
tra i due così avranno sempre un po ‘
di spaziatura in mezzo.
È un modo davvero nuovo e di fantasia
abbattere l’interfaccia utente che è pazzo.
Android ha avuto questo per sempre.
Avrò il titolo del libro
e poi raddoppiare questo, e inserire qui
Anno.
Questo sarà Libro, Anno,
quindi ne ho due ora.
Questo è un buon inizio
Direi.
Ma non mi interessa mai
nel caso in cui fossero disallineati.
Non sono mai interessato al caso in cui
saranno così sullo schermo.
Voglio anche
impilarli verticalmente,
perché sembrerebbero file in una tabella,
sarebbe davvero fantastico.
Selezionerò le due viste dello stack
insieme,
premi di nuovo questo pulsante,
ora Interface Builder li ha raggruppati verticalmente,
quindi ho due file con un po ‘di
informazioni in ciascuno.
Ho una vista dello stack
di due viste dello stack.
È anche bello perché adesso
in cima alla pila posso cambiare da verticale a orizzontale,
averli così.
Tutto questo è davvero bello,
davvero fantastico,
Direi.
Ho già punti vendita per questa etichetta,
quindi li collegherò rapidamente.
E poi aggiungerò la vista dell’immagine
per la copertina del libro.
Ho intenzione di trascinarlo qui, per mettere un segnaposto
Immagine.
E
quello che ho intenzione di fare ora è, voglio raggruppare
tutti questi insieme verticalmente.
Selezionerò la vista dell’immagine,
e la vista dello stack superiore che ho adesso,
e di nuovo basta premere questo pulsante qui
metterli in pila.
Ora ho un tavolo
di un tavolo, di pochi tavoli, di pochi tavoli.
Persone che hanno mai fatto il web design
dirà,
“Questo non va bene.
perché abbiamo divs ora. “
Non abbiamo div su iOS,
inoltre funziona in modo diverso quindi va bene.
La vista pila non fa nulla,
La vista stack non funziona
qualunque…
cosa “bip”.
Questo è tutto.
La vista stack mantiene solo il riferimento a queste viste
che sono sistemati lì,
e prenderà in considerazione tutte le proprietà
hai detto che dovrebbe essere verticale, dovrebbe essere centrato,
dovrebbe essere allineato, e così via.
Tutto ciò che fa è gestire i vincoli
per le viste organizzate in modo da non dover cambiare
il vincolo di quelle viste. Creerà il
vincoli per te
in modo che siano allineati nel modo in cui li vuoi
Colleghiamo questo e poi
passiamo alle animazioni perché
non abbiamo tempo
Ho intenzione di allineare questo
al centro
e si spera che adesso tutto dovrebbe funzionare
quindi possiamo anche vedere alcune animazioni.
Buona.
Non troppo buono, ma
ancora dovrai prenderlo.
Tutto apposto.
Abbiamo questo che funziona già.
Questo è perfetto perché il mio stack view
si prende cura del layout,
e se ruoto il telefono, questo è ancora abbastanza buono
perché tutto è ancora allineato
nel modo in cui lo voglio
Ma, inevitabilmente, me ne accorgo
la disposizione verticale funziona davvero bene
su ritratto, ma non così buono nel paesaggio.
Questo è dove la superpotenza delle viste dello stack
entrare in gioco.
Posso dire-
voglio
la vista pila che mostra loro di essere
allineato verticalmente è perfetto ma,
Voglio aggiungere una classe di dimensioni qui e dire,
“Non importa la larghezza dello schermo,
nel caso in cui l’altezza è veramente compatta, quindi,
nel caso in cui sono in paesaggio,
aggiungi una nuova impostazione. “
La nuova impostazione sarà orizzontale.
In questo modo avrò una vista verticale in pila
ritratto e una vista orizzontale orizzontale in orizzontale.
Proviamolo.
Vediamo cosa succede.
Ecco come appare il layout,
e quando ruoto il simulatore,
ruota così e diventa una vista orizzontale.
Questo è davvero
un modo fantastico per risolvere i cambiamenti di orientamento del dispositivo,
perché per essere giusto,
non sono veramente facili.
Con Auto Layout, davvero non potevi farlo
in ogni modo ragionevole invece di avere
vincoli separati su tutti i tuoi punti di vista.
Questo è veramente bello e come puoi vedere
il cambiamento a
l’orientamento accade
nella transizione tra paesaggio e ritratto,
quindi è anche animato.
E puoi vedere che cambia il
vincoli e posizioni, quindi tutto
cade a posto davvero bello.
Abbiamo creato un’animazione
non abbiamo scritto alcun codice per,
e quello è stato grandioso.
Molto velocemente…
Reale, molto veloce …
Lasciami selezionare questo
e fare la stessa cosa
Voglio cambiare l’allineamento
in base al fatto che stiamo guardando
ritratto o paesaggio.
Ho intenzione di cambiare l’allineamento al centro in verticale
e…
leader nel paesaggio da mostrare
tu come sembra.
Abbiamo iniziato con questo.
I testi qui sono centrati
perché ho detto che nel ritratto voglio il centro.
Quando ruoto, ora sono allineati al
lato sinistro di questa particolare vista dello stack.
Il tuo
il layout scorre letteralmente con qualsiasi modifica
allo schermo che stai facendo, ed è
facile da fare.
Che è, personalmente penso, fantastico.
Ho un minuto?
Perché … (commento non udibile dal pubblico)
Va bene (ride).
Una demo finale.
Una riga di codice per mostrarti come farlo
anche dal codice perché lo abbiamo fatto
da Interface Builder ed è stato divertente,
ma voglio
fai un’animazione quando clicco su qualcosa.
Sto per dire view.addGestureRecognizer,
aggiungi un riconoscitore tocco,
UITapGestureRecognizer, che attiverà un metodo
didTap.
Ecco il mio metodo chiamato didTap,
che è-questo sta per fare-
Qualcosa di veramente veloce.
Settimana IBOutlet
Non sto neanche più spiegando,
per essere sicuri che non lo facciano
tirami con a-
(ride)
Ho bisogno di collegare questo.
Ho fatto uno sbocco al
vista pila. Questo è tutto quello che avete bisogno di sapere.
Posso accedere alla mia vista pila,
Posso accedere a una proprietà chiamata arrangedSubviews
che è tutte le viste secondarie che una vista pila
ha organizzato. Quindi, posso dire l’ultimo
Ho bisogno di accedere, e vuole impostare la sua proprietà a
nascosto, o per attivare questa proprietà.
Ogni volta che clicco sul controller della vista,
sarà nascosto su questa vista,
lo cambierà semplicemente.
Questo è fantastico per
mostrando i menu che si piegano da qualche parte
se fossero stati nascosti prima, e mostrali.
Possono presentarsi in questo modo e riorganizzare
il tuo layout per adattarsi, e questo è davvero grande.
Puoi farlo anche da un
animazione con chiamata di durata.
Quello sarà l’ultimo per me.
Come di solito dico-
Grazie, è stato grandioso.
Come dico di solito, devi fermarmi
perché posso parlare di animazioni fino ad aprile.
Ora, dal momento che ho avvolto questa linea in a
le chiamate di animazione, quindi questa è anche una cosa animata.
Qualsiasi proprietà che modifichi nella visualizzazione dello stack
può essere animato perché
la vista dello stack cambia solo i vincoli,
e i vincoli cambiano solo la posizione e le dimensioni,
che sono animabili. Tutto funziona dalle viste dello stack.
È così, lo prometto.
Questo è tutto.
Eccolo.
Il modo per entrare in contatto con me è la mia pagina
dove sono tutti i miei contatti, si chiama underplot.com,
come la parola sottotrama.
Sono una delle ultime persone che hanno afferrato
la parola dominio dot com è stata abbastanza interessante.
underplot.com.
Non dimenticare di valutare la sessione,
sarebbe molto, molto carino da parte tua.
Questo è tutto da parte mia, grazie mille.
(applausi)
– Alrighty,
l’ora è le tre e mezza,
e possiamo iniziare con animazioni con Auto Layout
e impilare le viste.
Un po ‘di me,
Sono uno sviluppatore e autore indipendente,
e ho diviso il mio tempo tra il mio piccolo
studio per creare app per iPhone,
e lavorando su un sito web chiamato raywenderlich.com,
Woohoo!
Dove scriviamo tutorial,
scrivere libri e così via, e così via,
e `veramente forte.
E, poiché all’inizio di quest’anno,
Ho pubblicato un libro intitolato iOS Animations di Tutorials.
Qual è il mio fantastico libro sulle animazioni
su iOS e ho scritto una newsletter di animazioni,
è una newsletter mensile sull’animazione
quindi faccio cose pazze una volta al mese e le mando in giro
per le persone che sono interessate alle animazioni.
Ecco perché sono qui oggi
per parlare di layout automatico e impilare le visualizzazioni.
Possiamo iniziare.
Le animazioni sono fantastiche,
specialmente in iOS 7 e iOS 8 e iOS 9.
Perché?
Perché non lo abbiamo davvero
queste ricche interfacce utente che hanno
lo sfondo di legno o il
grondaie in acciaio
e cose del genere che avevamo in UI.
Al momento è principalmente testo
e testo con colore.
Devi trovare nuovi modi per mettere il tuo marchio
davanti a tutti
e rendi la tua app distinguibile
da altre app.
Per esempio,
questo screenshot qui
potrebbe essere una delle app integrate
alla fine che viene fornito con iOS,
o potrebbe essere un’app personalizzata che qualcuno
ha investito centinaia di ore nella progettazione.
Ma non puoi dirlo subito,
quindi è davvero difficile.
E se tu potessi vedere come interagisce l’interfaccia utente
con l’utente e in che modo l’interfaccia utente reagisce a
interazione dell’utente così via, forse c’è un delizioso
Non lo so … forse il
il portatile sta saltando un po ‘
quando lo premi, o forse il
la parola palloncino vola via quando la tocchi
o qualcosa di simile.
Questo è un modo davvero semplice per distinguere qualcuno
mettere un sacco di sforzo in questa app senza
avere tutto il
interfaccia visiva vecchio-temporizzatore.
Ma non puoi dirlo subito,
e le animazioni sono davvero un modo fantastico
per rendere davvero unica la tua app.
Questa è l’app contatti integrata in iOS,
ma non si poteva davvero dire perché
si tratta davvero di spazio bianco, davvero di testo,
si tratta davvero del colore.
Le animazioni sono fantastiche perché
se hai mai scritto
un’app su iOS
hai fatto
almeno una singola animazione
perché è così facile.
Ecco come iniziano tutte le esercitazioni di animazione …
con il quadrato rosso.
A volte il quadrato è blu
ma è principalmente rosso.
E poi il quadrato si muove un po ‘
lungo e c’è una singola riga di codice
e le persone sono davvero impressionate
e loro sono come
“Sì, posso fare animazioni su iOS,
perché è solo una riga di codice! “
È animato da WithDuration, tu dici
per quanto tempo vuoi che l’animazione vada,
e poi c’è una chiusura dove dici
che tipo di bersaglio
i valori finali per l’animazione sono
E poi questa super UIKit API super-intelligente
prenderà i valori correnti, per esempio,
in questa particolare animazione prenderà il
posizione attuale del quadrato rosso
e creerà una piccola animazione per un secondo
e lo sposteremo in
sull’asse x sul valore di 200.
Assomiglierà a questo.
Ta da.
E ‘carino
Tutti sanno come farlo su iOS.
Però,
le cose cambiano nel tempo
E ‘stato fantastico quando iOS 3 era fuori,
ed è stato fantastico quando iOS 4 era fuori,
ed è stato fantastico quando iOS 5 era fuori,
ma poi abbiamo iniziato ad avere schermi diversi.
Schermi più grandi, schermi più piccoli,
schermi divisi, visualizzare il contenimento del controller
e cose così.
Spostando il quadrato rosso a
il punto 200 sull’asse x non ha davvero
significa molto più.
Prima di avere diverse dimensioni dello schermo
era predeterministico, sapevi dove inizia lo schermo,
0.0, e poi lo hai spostato di 200 punti
a destra, era perfetto.
Ora, con 6+ o 6, o 5S o qualsiasi altra cosa,
non lo sai davvero
cosa significa passare al punto 200.
Potrebbe essere davvero vicino al bordo dello schermo,
potrebbe essere dritto al centro
dello schermo, potrebbe essere qualsiasi cosa.
E mi fa davvero male-
(si schiarisce la voce) Mi dispiace, mi fa davvero male,
oh mio dio, okay …
Emozionale qui. (risata)
Mi fa davvero male quando le persone
avere un problema di questo tipo
e scapperebbe subito a Stack Overflow.
E diremo come fare questa cosa dell’animazione
nella mia app perché non la capisco davvero
e la gente dirà,
“Oh sì, certo includo questo Bloated.framework
da qualcuno e incolla questo codice! “
E poi sicuramente accettalo, funziona.
Ma non è davvero così
la via.
Fa male quando tu-
Se inizi a litigare con le persone
su questi tipi di siti web è così
anche peggio di
facendo nulla. È sempre
una domanda su cosa fare.
Ma comunque, non dovresti farlo.
Il mio punto è questo
è meglio capire come funzionano le cose
e perché accadono perché poi tu
sapere cosa fare la prossima volta che succede
come quello.
Andiamo alle domande.
“Animazioni, no lavoro?”
Non funzionano perché
Layout automatico è diverso da
pre layout automatico.
Cosa voglio dire?
Tempo per una rapida demo.
La sessione sarà
meno diapositive e altro mostra cose sullo schermo.
Alla fine e spero che tu sappia come
le cose funzionano alla fine e tu sai come
avvicinarsi a loro e come creare animazioni
con Auto Layout e più avanti nella sessione
con le viste dello stack.
Ecco il mio storyboard
e come la sua attuale applicazione,
Sto usando il layout automatico.
Non proprio adatto a questo tipo di risoluzione,
ma ancora puoi vedere la maggior parte di ciò che è abbastanza.
Quello che ho qui, è una schermata di accesso per
un’app immaginaria.
E ho il nome utente e un campo password
qui in alto perché ho l’idea di animarli
verso il centro dello schermo
quando l’utente apre l’app.
E ho un piccolo bottone qui che dice andare
quale farà il login, per esempio.
Ho preparato tutto
in Interface Builder. Li ho centrati
e poi ho messo un po ‘di costrizione qui
su nome utente e password,
e questo è davvero fantastico.
E poi, immaginiamo che vado a impilare
Overflow, e ci vedo
Super Awesome Ninja Dev
ha risposto alla mia domanda,
“Oh sì, certo,
chiama la tua animazione con durata
e quindi modificare la proprietà centrale
e dovrebbe funzionare. “
Vado al mio codice qui in vista del pari
dove ho intenzione di provare cosa Super Awesome Ninja Dev
consigliato. Ho intenzione di mettere dentro
UIView.animationWithDuration,
con
mezza durata.
Ho due prese qui,
nome utente e password.
Ci proverò
animare loro
proprietà del centro.
Password, centro Y.
Penso che 200 punti saranno sufficienti.
E poi perché mi sento già
molto avanzato nelle animazioni
Verrà aggiunto un secondo da animare
il campo del nome utente, con un po ‘
un po ‘di ritardo in seguito.
Questi sono i built-in standard
API, niente di veramente stravagante sta succedendo qui.
Basta eseguire un’animazione
sul campo username.
Va bene,
self.fldUsername.center.y
Va bene.
Molto velocemente.
Uno si sposta verso il basso e l’altro si sposta verso il basso,
allora dovrebbe sembrare davvero fantastico.
Sembra davvero fantastico.
Non sono ancora veramente visibili perché
Li ho fatti
non completamente opaco.
Li renderò opachi pure.
Facciamo anche questo.
Va bene, sei felice,
stai codificando, tutto è perfetto.
Vado anche io
mostralo comunque.
E ora la mia transizione è perfetta.
Il layout automatico non mi preoccupa davvero.
Cambio la proprietà centrale
ed è tutto abbastanza buono.
Poi, scappo a Stack Overflow,
accetta la risposta
da Super Awesome Ninja Dev,
e poi dico,
“Ok, ora devo fare la parte di login
di questo.”
Quando provo a inserire il nome utente,
allora abbiamo questo.
C’è il problema
Appena mi concentro sul campo di testo,
tutto salta.
Possiamo vedere accadere due cose.
Prima i campi sono stati riposizionati nel punto in cui erano originariamente.
Secondo, non svanirono come erano
originariamente. Hanno iniziato da
appena visibile e sono ancora
completamente opaco come li ho animati a.
Sembra che questa catena
questa animazione qui è stata ripristinata,
ma queste due linee non furono ripristinate.
Questo perché è davvero importante capire
cosa fa Auto Layout. Come suggerisce il nome,
rende automaticamente il tuo layout per te.
Si prende cura dei tuoi layout per te.
E qui sei andato oltre la sua testa
e ha cambiato la posizione di queste viste
manualmente, e quello non era veramente buono.
E hai cambiato l’alfa manualmente
e quello andava bene, perché l’alfa non è davvero
parte del layout. Non è davvero un posizionamento
o dimensionamento o altro
La prima morale di questo discorso è
non tutto cambia con Auto Layout.
Non tutto sui cambiamenti di animazione.
Non è davvero un mondo completamente nuovo.
È stato un nuovo mondo coraggioso?
Non è davvero un nuovo mondo coraggioso.
Si tratta di posizionamento e dimensionamento
perché questo è parte del layout.
Se hai animato l’alfa, se hai animato
chiamata di sottofondo o qualcosa del genere,
va bene. Funziona ancora alla vecchia maniera.
Cosa non funziona alla vecchia maniera
sta cambiando il centro manualmente.
Ma tu dirai,
“No, funziona un po ‘.”
Funziona.
Non è come non funziona,
è che in realtà non lo è
lavoro per sempre.
Questa è la cosa veramente importante
che voglio che tu capisca in questo discorso
e da quel momento in poi tutto sarà veramente facile.
La domanda è: perché è saltato indietro così quando tocchi
nel campo di testo?
Questo è davvero semplicistico
spiegazione di come funziona il layout automatico.
Abbiamo le tue opinioni sullo schermo.
Ci saranno pulsanti, ci saranno etichette,
ci saranno immagini e cose del genere.
Quando li deponi in Interface Builder
e hai impostato i tuoi vincoli,
stai allegando una lista di vincoli
su quelle viste che spiegano
la relazione tra loro, tra le opinioni
e tra le viste e il contenitore
del tuo controller di visualizzazione.
Che, di solito, l’iPhone è lo schermo,
quindi alla fine tutto dipende dalla dimensione dello schermo.
Ad esempio quando la tastiera salta,
o forse quando la chiamata è in arrivo,
quindi anche la dimensione del contenitore o del
guarda anche il controller cambia. 308 00: 12: 56,182 -> 00: 12: 58,400,
Non saltiamo troppo avanti.
Abbiamo una lista di vincoli
e quei vincoli, se vai alla documentazione,
Sottoclasse NSLayoutConstraint
NSObject.
Non è alcun tipo di
classe visiva. esso
non ha davvero la tremenda logica
Dietro. È solo un modello.
Contiene poche proprietà
definire
un’equazione come questa, quindi puoi
impostare regole come i pulsanti dovrebbero essere
sempre centrato Dovrebbe essere sempre
posizionato al centro o al centro del
larghezza del controllo della vista. O forse questo pulsante
dovrebbe sempre avere la stessa posizione di quest’altra
pulsante. Questo è
espresso in queste equazioni, ma ciò che è importante è quello
questi vincoli si progettano in Interface Builder
sono modelli, oggetti dati che contengono
poche informazioni. Non fanno davvero niente
con UIKit.
Voglio dire che in realtà non disegnano nulla, in realtà non lo fanno
sposta le tue opinioni.
Ciò che muove le tue visualizzazioni è Auto Layout.
La struttura dell’app per il layout automatico.
Sarebbe più preciso chiamarlo
UIKit, ma chiamiamolo layout automatico per questo scopo.
Quando le cose devono apparire sullo schermo o le cose hanno bisogno
per trovare dove il loro posto è sullo schermo,
Layout automatico acquisisce questo elenco di
vincoli, risolve tutte le equazioni
e trova dove dovrebbero apparire tutte queste viste
sullo schermo. Ciò che produce è questo
cambierà il centro e i limiti dei tuoi punti di vista.
Davvero semplice
Se guardi la lista che ho lì,
c’è ogni tipo di vincoli. C’è larghezza, altezza,
centro x, margine y, rapporto tra larghezza e altezza,
spazio verticale e verticale ai margini e tutti i tipi
di vincoli. Ma, quando Auto Layout risolve tutti questi
regole che hai impostato, con cosa finisce
cambiando la posizione dei tuoi punti di vista e le loro dimensioni.
Questo è tutto ciò che fa.
Tutto ciò che fa è cambiare la dimensione e la posizione.
E naturalmente, quando lo fa, questo si riflette nel tuo
viste riposizionate, ridimensionate.
E questo è tutto per il layout automatico. È davvero pazzesco
Tutto ciò che fa è solo impostare la dimensione e la posizione
dei tuoi punti di vista
Ora che lo sappiamo,
le cose si fanno interessanti perché
la prossima cosa da guardare è,
“Quando succede?”
Perché i campi hanno cambiato posizione quando ho fatto clic
nel campo di testo.
Il layout automatico reagisce a
modifiche interne ed esterne al layout.
Le modifiche interne avverranno se si modifica un vincolo,
o se si rimuove uno dei vincoli o se si
fare qualcosa dal codice, per esempio.
E i cambiamenti esterni possono essere
se l’utente ruota il dispositivo,
quindi anche la dimensione del controller della vista cambia.
Quello sarà un cambiamento esterno.
Layout automatico reagisce solo a quelli.
Quando carichi, diciamo
che si spinge un controller di visualizzazione, e questo sarà
il suo ciclo di vita. Quando lo spingi, prima
carica la vista dallo story board.
E in questo momento, Auto Layout ha bisogno di risolvere il layout
in modo che sappia dove mostrare le cose sullo schermo.
Molto carino. Facciamo un passaggio
proprio come ti ho mostrato nella diapositiva precedente.
Risolve tutti i tuoi vincoli e trova la posizione
di tutti i punti di vista
E poi, niente.
Quindi è come la calma.
Niente succede davvero molto.
Le cose sono posizionate, non si muovono,
e qui puoi saltare dentro e cambiare il tuo centro
senza problemi
Tuttavia, se si tocca un campo di testo, ad esempio,
come ho fatto io, poi la tastiera si aprirà e così sarà
cambia la dimensione dei margini del controller della vista.
Questo attiverà un altro passaggio sul layout
e il layout automatico lo farà
cambiare l’orientamento qui, ma la stessa cosa.
Layout automatico recupera l’elenco dei vincoli,
calcolarli in base alla dimensione del contenitore,
e poi riposizionarli di nuovo.
Se hai cambiato il frame o il centro delle viste,
questo cambiamento verrà quindi ripristinato a ciò che il
i vincoli dicono che la posizione e le dimensioni saranno.
Come detto, questo potrebbe essere un cambiamento di orientamento,
che innescherà un passaggio del genere.
Oppure, viene visualizzata una tastiera. Questo sarà
innescare un altro passaggio dal layout.
Se cambi tu stesso uno di questi vincoli,
che farà scattare un passaggio.
Ecco perché questo esempio ha funzionato con
campi che vanno giù, perché è stata vista la visualizzazione del carico.
L’app carica la storyboard, mostra loro dove
dovevano essere, poi li ho animati
me stesso, quindi questo non causa problemi.
Ma poi, visto che i margini sono cambiati quando fai il pop up
la tastiera, Auto Layout ha fatto un altro passaggio, ricalcolato
tutti i vincoli, e dal momento che il vincolo
non ha cambiato, ha spostato i campi di nuovo dove erano.
Puoi saltare tra questi
e fai qualche piccolo aggiustamento al centro,
ma poi di nuovo, quando qualcosa cambia
quelli saranno sovrascritti.
Ok, cosa possiamo fare per fare le animazioni corrette?
Bene…
Diamo un’occhiata a
come appare un’animazione normale.
Si cambia centro o cornice
nel tuo codice, e ciò accade all’istante.
Non appena cambi il centro di una vista
appare solo in quel punto.
E quindi chiami animateWithDuration che è
la normale API per me. Quindi, qualsiasi cosa tu faccia
all’interno della chiusura che inserisco sullo sfondo giallo,
tutte queste modifiche che fai vengono quindi animate.
La differenza tra queste due linee di codice
è quello che si trova nella chiusura delle animazioni
e uno non è solo in una chiusura di animazioni.
Tutte le modifiche che fai dall’interno della chiusura
sono animati.
E
c’è una lista delle proprietà animabili,
cose come alpha, background chiamante, posizione,
dimensione, e così via, che è possibile modificare all’interno
la chiusura, che verrà automaticamente automatizzata
di UIKit.
Questo è ciò che si spera abbia fatto prima.
Cosa puoi fare da Auto Layout,
è-sai come funziona.
Abbiamo già detto che questo è il modo in cui funziona.
Ora dobbiamo fare la connessione
un passaggio sul layout automatico prende tutti i vincoli,
ricalcola e cambia centro e limiti.
Centro e limiti sono proprietà animabili.
Ci stiamo avvicinando molto a quello che stava succedendo
prima. Quello che dobbiamo fare è cambiare il
vincoli e quindi dall’interno del blocco di animazione,
forzare un passaggio sul layout.
All’interno del blocco di animazioni, dì ad Auto Layout,
“Ehi, prendi la lista di tutti i vincoli,
trova dove dovrebbero apparire ora le mie opinioni
con questi vincoli. “
E poiché Auto Layout cambia solo in posizione
e la dimensione dei punti di vista e quelli sono animabili,
allora questo aiuterà in modo automatico.
Il tuo compito è trovare i vincoli che desideri modificare,
cambiarli come vuoi, e poi da un
blocco di animazione, trigger a
passare il layout.
Stabiliamo tutto questo,
ma lascia che ti mostri rapidamente come si fa
dal codice
Questo è il mio prossimo
esempio per mostrare i vincoli
e come animarli.
Ho una piccola app con una piccola lista qui.
È un’app da fare.
E sto avendo questo bar in alto qui
che voglio ridimensionare in modo dinamico.
Per mostrarti la premessa,
fammi aprire il file story board.
Ok, è davvero facile. C’è una vista in alto
e una vista tabella in basso.
La vista dall’alto è
appuntato in alto, la vista tabella
è bloccato in fondo, e poi sono
bloccato l’uno all’altro.
Ho il vincolo di altezza di questo
quello dice che sarà altezza 60 punti.
E questo è il mio …
Questa è la mia app in esecuzione.
Quello che voglio fare qui per mostrarti come funzionano le cose
sto andando a fare clic sul pulsante più, e questo si allargherà
questa barra in alto e vedrai più UI
lì dentro e così via.
Esistono due modi per animare i vincoli.
Entrambi sono molto semplici, quindi inizierò con
il primo.
Il primo è quando vuoi cambiare il
costante di un vincolo. Fammi aprire le proprietà qui.
Va bene…
Qui tutti i vincoli che vengono applicati
al mio piccolo bar qui, ma sono davvero interessato
nell’altezza. L’altezza è impostata su 60 punti,
e quando modifichi il vincolo puoi vedere
che dice solo 60 punti e basta.
È un’altezza difficile.
Voglio cambiare la costante in qualcos’altro,
al valore di 200 o giù di lì, per ingrandire
la barra in alto.
È davvero facile farlo. Sapevo quale
vincolo che voglio animare, quindi ho intenzione di andare
al mio punto di vista controller e
Ho intenzione di fare uno sbocco.
Poiché i vincoli sono qualcosa
che ti trovi in Interface Builder,
quindi puoi anche fare degli outlet per loro
e quindi utilizzare la presa per accedervi
in tempo reale. È piuttosto semplice
Inserirò un IBOutlet
chiamato altezza del menu,
e sarà di tipo NSLayoutConstraint
Così.
E poi qualsiasi altra vista del pulsante,
visualizzazione del testo o qualsiasi altra cosa tu sia abituato a fare
per essere utilizzato dalle prese,
puoi andare allo story board …
Trova il vincolo di altezza, eccolo lì,
vieni all’ispettore di Connections,
e quindi trascinare dal
nuova presa di riferimento per visualizzare il controller
e connetti il tuo outlet al vincolo.
Ora la tua presa punta al vincolo,
e puoi accedervi in tempo reale.
Davvero bello e davvero semplice.
Penso che non avrò tempo per
tutto ciò che avevo in mente, quindi vado a
saltare alcune cose.
Questa azione è già collegata al mio pulsante più,
Qui posso dire altezza del menu,
costante, che è la costante di Interface Builder,
uguale a qualcos’altro
Posso dire che è uguale a 200, in questo modo.
E ciò che ciò comporterà è,
non appena clicco,
non succede molto Non è quello che volevo.
Forse questo non è-
Sì, sembra che non sia giusto.
Oh, vero, non è connesso, okay.
Grazie.
Va bene, non appena lo clicco
quindi prende in considerazione la nuova altezza.
Ho cambiato il vincolo e questo è un cambiamento
non sarà annullato a caso, perché ora il vincolo
dice che sarà questa altezza.
Ma vogliamo le animazioni vero?
Poiché ora possiamo controllare il vincolo, le animazioni
sono veramente facili da fare. Racchiudilo con la chiamata di razione.
Può anche essere un’animazione di primavera. Facciamolo per divertimento.
Userò un’animazione di primavera.
Questa è l’API UIKit predefinita, di nuovo.
Niente di veramente pazzo in corso.
Quello che ho detto sulla mia diapositiva
e ho intenzione di attenermi ad esso, è stato
cambiando i vincoli ovunque nel codice,
e quindi forzare un passaggio su quel layout automatico
dall’interno del blocco di animazione.
Il passaggio del layout è quello che cambia
il centro e i limiti e così via.
Modifica dei vincoli
non fa nulla Non è così
Fai qualcosa.
Avere un pass per il layout e
layout che cambia centro e limiti,
questo è ciò che fa qualcosa.
Facciamo esattamente questo.
Mio
il vincolo qui è aggiornato,
e qui dal blocco delle animazioni
Sto solo per dire,
“Visualizza il layout se necessario”
che costringerà
Layout automatico per immediatamente
considera tutti i vincoli e, se qualcosa è cambiato,
quindi ricalcolare tutto e modificare il
posizione e dimensioni delle viste.
Ecco perché è chiamato,
“Layout se necessario.”
Perché forse non hai cambiato nulla,
allora non farà nulla.
Questa volta, quando clicco,
allora questo cambiamento nel vincolo è già animato.
Ciò che è veramente importante qui
da notare è quello
Non animare nulla sulla vista tabella.
Ho solo una riga che modifica il vincolo
sulla barra in alto. Io non davvero
dì alla vista tabella di fare qualsiasi cosa,
ma…
poiché la vista dall’alto e la vista tabella sono bloccate
insieme,
cambia anche l’altezza di quella
l’altezza dell’altro.
Non lo faccio esplicitamente, io
lasciare Layout automatico per risolvere tutte le regole
che ho deposto. E dal momento che le regole che ho fatto
era così che rimanessero insieme, che cambia entrambi.
Anche le modifiche ad entrambe sono animate
perché
i loro limiti sono stati cambiati
dall’interno del blocco di animazione.
Questo è davvero
facile e ora puoi farlo
tutti i tipi di altre cose più lontano da qui.
Finché sai perché
l’animazione funziona così,
allora sei un buon modo per capire
come fare cose più complesse.
La seconda cosa che voglio mostrare sui vincoli
è-
È semplicemente fantastico
quando devi cambiare la costante
un vincolo, così come quello che aveva ora.
Abbiamo avuto un’altezza hard set di 60 punti
e volevamo farlo 200.
E questo è veramente facile.
Voglio che la costante sia questo valore.
E quindi attivare un’animazione,
Tutto è fantastico.
Il problema è
se vuoi cambiare il moltiplicatore
su un vincolo.
Se dici,
“Voglio cambiare il moltiplicatore
a 1,5 o qualsiasi altra cosa. “
Il moltiplicatore è
sola lettura.
Puoi cambiare i vincoli
che sono valori fissi, ma non è possibile
cambiare i vincoli che dicono,
“Voglio la vista nel mezzo
dello schermo.
O se voglio la vista in una terza altezza
dello schermo “
perché quei vincoli usano moltiplicatori,
e non puoi davvero cambiarli.
Cosa dovremmo fare?
L’unico modo è passare oltre
tutti i vincoli, trova quello che vuoi
per cambiare, ucciderlo e poi inserire
il nuovo al suo posto.
Facciamolo.
È davvero facile Non è un problema.
Come ho detto, entrambi i modi sono davvero facili.
Voglio spostare il titolo
un po ‘a sinistra
quando il menu si apre.
E questo è grande perché il vincolo che
Ho intenzione di animare è chiamato
allinea il centro a x.
E allinea il centro a x ha una costante di 0
moltiplicatore 1, e che lo posiziona nel
molto al centro della barra superiore.
In Xcode 7, lì
è un nuovo campo quando stai modificando
i tuoi vincoli, chiamati Identificatore.
L’identificatore è un modo per dare il tuo
costringere un nome.
Questa proprietà esisteva anche in iOS 8,
ma Xcode 6 non aveva questa piccola casella di testo.
Se stai ancora utilizzando Xcode 6,
tutto ciò che dirò è valido, ne avrai bisogno
utilizzare gli attributi definatore e tempo dell’utente
per impostare l’identificatore.
Dovrai dire qui
stringa identificativa, quindi
imposta l’identificatore in questo modo.
Poiché Xcode 7 è ora stabile,
Ora userò la scatola integrata.
Ancora, questo è ancora possibile con Xcode 6,
hai solo bisogno di impostare l’identificatore in modo diverso.
L’identificatore è solo un modo per dare il tuo vincolo
un nome. Questo è fantastico perché puoi
loop sui tuoi vincoli, controlla il nome,
e poi trova quello che vuoi uccidere.
Chiamerò questo centro
e ora posso trovarlo e ucciderlo.
Se faccio una stampa qui
e stampare tutti i vincoli
dal mio punto di vista
per assicurarsi che tutto funzioni.
Quando clicco, okay-
È brutto.
Scusate.
Ho intenzione di scrivere a
per c in view.constraints …
Quindi stampa c in questo modo.
Questo dovrebbe farlo.
Va bene.
Qui tutti i pazzi tipi di vincoli
che stanno definendo il mio layout.
Sto cercando l’uno
Sono interessato a.
Troppi vincoli.
Troppi vincoli.
Lasciami fare qualcos’altro.
Titolo, etichetta, super vista.
Questo dovrebbe darci solo il vincolo
questo ci riguarda
Veramente?
Va bene.
L’importante è
non perdersi d’animo, per continuare a provare. (risata)
Va bene,
questo ci darà
i vincoli a cui siamo interessati
Quindi, abbiamo questo
riassunto criptico da Apple
questo ci dice cosa fanno
Puoi notare che uno di loro
dice centro, e
è quello che voglio trovare
e usare Questo è davvero, davvero utile.
Quello che sto per fare è-
se quello che sto attualmente guardando
ha l’identificatore fuori centro,
quindi imposta la proprietà attiva su false,
che lo rimuoverà dalla gerarchia del layout
e completamente ucciderlo.
Se io
clicca ora,
come lo vedi spostato di lato
perché non c’è più allineamento orizzontale.
Questo vincolo non viene considerato
più nel layout.
Perde la sua
l’allineamento orizzontale è
di fianco.
Ora è facile come
creando un nuovo vincolo e
imposta qualsiasi vincolo che desideri dal codice.
Lo farò molto velocemente.
NC sarà il mio nuovo
NSLayoutConstraint e useremo il completamento automatico
per i 20 parametri che entrano in seguito.
Voglio applicare questo vincolo
sull’etichetta
Molto carino.
Ho intenzione di cambiare il vincolo del centro x,
anche carino
Userò un uguale,
quindi tutto questo è il codice che
Interface Builder scrive per te
quando si crea un vincolo.
Puoi essere felice solo se lo usi
Interface Builder.
Rapidamente, ho intenzione di ricreare
questo e cambia il moltiplicatore.
Sto per dire 0.5
per spostarlo un po ‘a destra.
Qualsiasi vincolo che vuoi fare
e hai fatto molte volte,
e se è blu possiamo anche crearlo
da codice come quello
Questo nuovo vincolo, l’unica cosa che devi fare
è impostato su true
e così sarà
forzare il layout automatico per considerarlo
al passaggio successivo e aggiungerlo alla gerarchia del layout.
Questo uccide il vecchio,
questo ne crea uno nuovo,
e questo dice,
“Okay, dovrebbe essere considerato questo nuovo
nel layout. “
Questo è tutto ciò che serve per animare un vincolo
come questo.
(domanda non udibile dal pubblico) Scusa, per aggiungerla?
Vedo da dove viene la confusione;
Odio Apple per averlo fatto.
Di solito in Cocoa devi impostare i delegati,
devi costruire relazioni e cose
in questo modo, ma non con questa API.
Con questa API,
finché si imposta attivo
proprietà sul vincolo a false,
la prossima volta Auto Layout esegue un passaggio,
dirà,
“Questo vincolo non è attivo,
Non ne ho bisogno. “
E lo rimuoveremo dalla lista dei vincoli.
E il
il vincolo perderà tutti quelli che
lo conserva e verrà ucciso.
Questa linea qui è la condanna a morte
per questo vincolo. È tutto per questo.
È finita.
Se non lo tratti in nessun altro modo,
allora è finita per questo.
Quindi la stessa cosa quando sei
aggiungendo nuovi vincoli, questo crea
un oggetto che semplicemente
si blocca lì nell’universo.
Quindi, quando si imposta attivo,
la prossima volta che Auto Layout esegue un passaggio, dirà,
“Questo è attivo.”
Lo aggiungerà all’elenco dei vincoli
e questo lo manterrà.
Poiché il vincolo lo ha già
un’idea che sono le due opinioni che sono
preoccupato di questo, è tutto te
devo fare.
Questo è il modo di ucciderne uno,
e questo è il modo di
aggiungi uno come quello
Questo è praticamente
tutti.
C’è un’API che è statica
metodo su NSLayoutConstraint
dove puoi aggiungere
più vincoli allo stesso tempo,
ma quello che fa è
andare su tutti loro e impostare attivo su true.
Questo è tutto.
Quando fanno clic qui ora questo,
quindi la lista di imballaggio si sposta a destra
perché ho appena aumentato il moltiplicatore.
Due semplici modi per … (il pubblico prende una foto)
Va bene … (risate)
Per animare i vincoli.
È facile quando sai come
Funziona.
Uno era fare uno sbocco e cambiare una costante.
L’altro era
se vuoi cambiare un moltiplicatore devi
rimuovi questo e poi aggiungine uno nuovo.
E poi il più importante,
chiama layoutIfNeeded () all’interno di un blocco di animazione.
Davvero semplice Questo è tutto ciò
Il layout automatico prende.
Quindi, tutte le altre animazioni che vuoi fare
come alfa, colore, tinta, qualcosa del genere,
puoi farlo nel modo normale.
È abbastanza facile
Ma quest’anno
abbiamo viste stack.
Le viste dello stack sono
se vai ai documenti Apple,
puoi vedere che i mercati Apple impilano le visualizzazioni come,
“Layout automatico senza vincoli”.
Questo è un modo per creare animazioni di layout automatico
senza dover animare i vincoli.
E ‘carino Tutto il tempo
che ho lasciato … se qualcuno mi segnerà
quanto tempo mi rimane?
No?
9 minuti, perfetto.
Salterò le diapositive e andrò dritto
l’altro progetto.
Ragazzi volete vedere come le viste dello stack
sono animati?
È più sì che ums.
Ho un terzo progetto di esempio qui
per mostrarti come fare le viste dello stack.
La sua premessa è
è una piccola applicazione del negozio.
Se lo acquisti dall’app store
ti mostrerà la lista di tutti i libri
su cui hai lavorato puoi anche comprare.
Qual è, penso, un grosso problema.
C’è una lista di libri
e quando si fa clic su uno nella vista di dettaglio
controller, vedrai la copertina del libro
e alcuni dettagli.
Lo farò rapidamente tramite viste stack
per mostrarti com’è facile.
Bene, il mio schermo dei dettagli è totalmente
vuoto.
Che è un buon inizio
Quello che voglio è
un po ‘di testo che lo farà
mostra il nome del libro e il
anni di rilascio e così via.
Chiamerò questo titolo,
un’etichetta come questa
Quindi, questo
Chiamerò il titolo del libro.
Questo sarà molto più grande
e con un font più elaborato.
Troppo elegante …
Ho due etichette come questa,
e le viste stack sono un modo per raggruppare le viste.
Hai qualche punto di vista, vogliamo raggrupparli insieme
per sempre.
Questa è la strada da percorrere.
E c’è un nuovo pulsante in
in Xcode
dove prima c’era
il quarto pulsante di layout automatico
nessuno l’ha mai usato e l’hanno appena ucciso
e metti questo nuovo che, si spera, tutti
userà.
È fondamentalmente un piccolo tavolo con una freccia
puntando in basso così.
Quando hai le opinioni che hai
vuoi raggruppare insieme selezionato,
e basta fare clic su questo,
e poi li mette insieme in a
vista pila.
Ora sono fondamentalmente in un gruppo.
C’è lo schema, quindi c’è una vista dello stack
e quindi le due viste sono sotto-viste di questo.
Quindi, la vista dello stack è carina perché
può fare cose folli.
Puoi fare cose pazzesche come questa …
C’è una proprietà chiamata Axis,
che definisce se la vista dello stack
è una pila orizzontale o una pila verticale.
È davvero facile fare clic qui
e cambialo.
Questo lo sistemerà ora verticalmente,
e se lo clicco, le sistemerà di nuovo
orizzontalmente. È molto bello.
E c’è una proprietà di allineamento
che puoi cambiare dall’alto
e allinearli tutti all’inizio del contenuto,
o in basso come questo,
o centro, che è abbastanza bello.
Inserirò una spaziatura di 10 punti
tra i due così avranno sempre un po ‘
di spaziatura in mezzo.
È un modo davvero nuovo e di fantasia
abbattere l’interfaccia utente che è pazzo.
Android ha avuto questo per sempre.
Avrò il titolo del libro
e poi raddoppiare questo, e inserire qui
Anno.
Questo sarà Libro, Anno,
quindi ne ho due ora.
Questo è un buon inizio
Direi.
Ma non mi interessa mai
nel caso in cui fossero disallineati.
Non sono mai interessato al caso in cui
saranno così sullo schermo.
Voglio anche
impilarli verticalmente,
perché sembrerebbero file in una tabella,
sarebbe davvero fantastico.
Selezionerò le due viste dello stack
insieme,
premi di nuovo questo pulsante,
ora Interface Builder li ha raggruppati verticalmente,
quindi ho due file con un po ‘di
informazioni in ciascuno.
Ho una vista dello stack
di due viste dello stack.
È anche bello perché adesso
in cima alla pila posso cambiare da verticale a orizzontale,
averli così.
Tutto questo è davvero bello,
davvero fantastico,
Direi.
Ho già punti vendita per questa etichetta,
quindi li collegherò rapidamente.
E poi aggiungerò la vista dell’immagine
per la copertina del libro.
Ho intenzione di trascinarlo qui, per mettere un segnaposto
Immagine.
E
quello che ho intenzione di fare ora è, voglio raggruppare
tutti questi insieme verticalmente.
Selezionerò la vista dell’immagine,
e la vista dello stack superiore che ho adesso,
e di nuovo basta premere questo pulsante qui
metterli in pila.
Ora ho un tavolo
di un tavolo, di pochi tavoli, di pochi tavoli.
Persone che hanno mai fatto il web design
dirà,
“Questo non va bene.
perché abbiamo divs ora. “
Non abbiamo div su iOS,
inoltre funziona in modo diverso quindi va bene.
La vista pila non fa nulla,
La vista stack non funziona
qualunque…
cosa “bip”.
Questo è tutto.
La vista stack mantiene solo il riferimento a queste viste
che sono sistemati lì,
e prenderà in considerazione tutte le proprietà
hai detto che dovrebbe essere verticale, dovrebbe essere centrato,
dovrebbe essere allineato, e così via.
Tutto ciò che fa è gestire i vincoli
per le viste organizzate in modo da non dover cambiare
il vincolo di quelle viste. Creerà il
vincoli per te
in modo che siano allineati nel modo in cui li vuoi
Colleghiamo questo e poi
passiamo alle animazioni perché
non abbiamo tempo
Ho intenzione di allineare questo
al centro
e si spera che adesso tutto dovrebbe funzionare
quindi possiamo anche vedere alcune animazioni.
Buona.
Non troppo buono, ma
ancora dovrai prenderlo.
Tutto apposto.
Abbiamo questo che funziona già.
Questo è perfetto perché il mio stack view
si prende cura del layout,
e se ruoto il telefono, questo è ancora abbastanza buono
perché tutto è ancora allineato
nel modo in cui lo voglio
Ma, inevitabilmente, me ne accorgo
la disposizione verticale funziona davvero bene
su ritratto, ma non così buono nel paesaggio.
Questo è dove la superpotenza delle viste dello stack
entrare in gioco.
Posso dire-
voglio
la vista pila che mostra loro di essere
allineato verticalmente è perfetto ma,
Voglio aggiungere una classe di dimensioni qui e dire,
“Non importa la larghezza dello schermo,
nel caso in cui l’altezza è veramente compatta, quindi,
nel caso in cui sono in paesaggio,
aggiungi una nuova impostazione. “
La nuova impostazione sarà orizzontale.
In questo modo avrò una vista verticale in pila
ritratto e una vista orizzontale orizzontale in orizzontale.
Proviamolo.
Vediamo cosa succede.
Ecco come appare il layout,
e quando ruoto il simulatore,
ruota così e diventa una vista orizzontale.
Questo è davvero
un modo fantastico per risolvere i cambiamenti di orientamento del dispositivo,
perché per essere giusto,
non sono veramente facili.
Con Auto Layout, davvero non potevi farlo
in ogni modo ragionevole invece di avere
vincoli separati su tutti i tuoi punti di vista.
Questo è veramente bello e come puoi vedere
il cambiamento a
l’orientamento accade
nella transizione tra paesaggio e ritratto,
quindi è anche animato.
E puoi vedere che cambia il
vincoli e posizioni, quindi tutto
cade a posto davvero bello.
Abbiamo creato un’animazione
non abbiamo scritto alcun codice per,
e quello è stato grandioso.
Molto velocemente…
Reale, molto veloce …
Lasciami selezionare questo
e fare la stessa cosa
Voglio cambiare l’allineamento
in base al fatto che stiamo guardando
ritratto o paesaggio.
Ho intenzione di cambiare l’allineamento al centro in verticale
e…
leader nel paesaggio da mostrare
tu come sembra.
Abbiamo iniziato con questo.
I testi qui sono centrati
perché ho detto che nel ritratto voglio il centro.
Quando ruoto, ora sono allineati al
lato sinistro di questa particolare vista dello stack.
Il tuo
il layout scorre letteralmente con qualsiasi modifica
allo schermo che stai facendo, ed è
facile da fare.
Che è, personalmente penso, fantastico.
Ho un minuto?
Perché … (commento non udibile dal pubblico)
Va bene (ride).
Una demo finale.
Una riga di codice per mostrarti come farlo
anche dal codice perché lo abbiamo fatto
da Interface Builder ed è stato divertente,
ma voglio
fai un’animazione quando clicco su qualcosa.
Sto per dire view.addGestureRecognizer,
aggiungi un riconoscitore tocco,
UITapGestureRecognizer, che attiverà un metodo
didTap.
Ecco il mio metodo chiamato didTap,
che è-questo sta per fare-
Qualcosa di veramente veloce.
Settimana IBOutlet
Non sto neanche più spiegando,
per essere sicuri che non lo facciano
tirami con a-
(ride)
Ho bisogno di collegare questo.
Ho fatto uno sbocco al
vista pila. Questo è tutto quello che avete bisogno di sapere.
Posso accedere alla mia vista pila,
Posso accedere a una proprietà chiamata arrangedSubviews
che è tutte le viste secondarie che una vista pila
ha organizzato. Quindi, posso dire l’ultimo
Ho bisogno di accedere, e vuole impostare la sua proprietà a
nascosto, o per attivare questa proprietà.
Ogni volta che clicco sul controller della vista,
sarà nascosto su questa vista,
lo cambierà semplicemente.
Questo è fantastico per
mostrando i menu che si piegano da qualche parte
se fossero stati nascosti prima, e mostrali.
Possono presentarsi in questo modo e riorganizzare
il tuo layout per adattarsi, e questo è davvero grande.
Puoi farlo anche da un
animazione con chiamata di durata.
Quello sarà l’ultimo per me.
Come di solito dico-
Grazie, è stato grandioso.
Come dico di solito, devi fermarmi
perché posso parlare di animazioni fino ad aprile.
Ora, dal momento che ho avvolto questa linea in a
le chiamate di animazione, quindi questa è anche una cosa animata.
Qualsiasi proprietà che modifichi nella visualizzazione dello stack
può essere animato perché
la vista dello stack cambia solo i vincoli,
e i vincoli cambiano solo la posizione e le dimensioni,
che sono animabili. Tutto funziona dalle viste dello stack.
È così, lo prometto.
Questo è tutto.
Eccolo.
Il modo per entrare in contatto con me è la mia pagina
dove sono tutti i miei contatti, si chiama underplot.com,
come la parola sottotrama.
Sono una delle ultime persone che hanno afferrato
la parola dominio dot com è stata abbastanza interessante.
underplot.com.
Non dimenticare di valutare la sessione,
sarebbe molto, molto carino da parte tua.
Questo è tutto da parte mia, grazie mille.
(applausi)
Please follow and like us: