Abbiamo appena visto le basi degli autori layout, ma un modo migliore per imparare come usarli è fare pratica qua ho preparato due esempi che vedremo insieme.

Il primo è la tabella nel quale ti chiedo di applicare gli auto layout dal livello body in giu' in modo che il mockup sia ridimensionare le orizzontalmente, che la tabella possa accogliere altre righe e che le celle siano un minimo flessibili in base al contenuto.

Ti consiglio di mettere in pausa il video di questa lezione, provare tu sbatterci la testa e vedere se riesci da solo o da sola.

Dopodiché ritorna sul video e vedi la soluzione corretta.

Uno dei trucchi che uso è creare un componente che approfondiremo nel prossimo modulo.

Quando devo fare operazioni di questo tipo, facciamo così selezioniamo il mockup e premiamo su Craig Component.

Ora, come vedrete, se duplica o questo elemento, tutte le modifiche che effettua sul primo vengono poi replicate su quello sotto.

Questo ci permette di evitare fare delle prove sul primo elemento e vedere istantaneamente l'effetto sul secondo.

Possiamo poi modificare il secondo componente, stringerlo in modo da vedere istantaneamente se quello che facciamo ci avvicina o ci allontana dal risultato che vogliamo ottenere.

Mettiamoci subito al lavoro.

Ora vediamo tutti gli elementi e come modificarli per ottenere il risultato che vogliamo.

Abbiamo prima di tutto questo body che qua dentro vedete quando lo ridimensionò a questa dimensione qua strana.

Guardiamo nei mostri in cosa abbiamo impostato Vedete qua rimane nell'angolo in alto a sinistra a una certa distanza.

Quello che in realtà vogliamo è che mantenga la stessa distanza da sinistra a destra.

Quindi che mantenga questa distanza lasciando lo spazio per la navigazione a sinistra e che abbia a distanza zero.

Quindi si è attaccato al prodotto destro.

Vogliamo la stessa cosa anche per top Bottom e quindi per lo spazio in verticale selezioniamo top bottom e vedete qui.

Ora, se lo seleziono, prende le dimensioni che io voglio che abbia.

Dopodiché possiamo continuare applicando le auto layout e impostando la tabella e gli altri elementi al suo interno.

Prendiamo il body, creiamo un'auto layout.

Maiusc lo ridimensiona.

Siamo per dare una dimensione accettabile.

Mettiamo le impostazioni come abbiamo visto prima.

In questo modo si ridimensionerà.

Poi abbiamo la tabella, in questo caso un tram, ma vogliamo utilizzare ancora una volta una moto layout.

Guardate infatti cosa contiene.

Contiene un Eder e due elementi.

Se noi prendiamo un'auto layout, quello che succede è che si adatterà in base al contenuto.

E quindi se aggiungo degli elementi duplicando il primo, per esempio, questa si ridimensiona per raccoglierli.

Se guardiamo nell'esempio sotto.

Quello che succede però è che mantiene questa larghezza un po', un po' strana borda.

Vediamo infatti, come è definita la dimensione di questo elemento.

Vediamo che come racing content, quindi abbraccia il contenuto che può sbronzare dal contenitore in cui l'abbiamo inserito.

Selezioniamo quindi al content e diamogli il container.

Vedete qui cosa succede ora riempirà il contenitore e in questa versione più piccola lo farà mantenendo sempre la distanza che li abbiamo impostato.

Possiamo poi continuare adattando ulteriormente questa tabella, in modo che si comporti proprio come vogliamo nell'esempio qua sotto.

Per esempio, vengono tagliati gli elementi di status sull'ultima colonna, mentre noi vogliamo che vengano che vengano mostrati.

Prendiamo quindi le varie righe.

Facciamo così guardiamo un attimo come sono composte.

Abbiamo una riga, questo elemento che dentro vari elementi come sono divisi, avremmo prima di tutto all'interno della riga che sono questi due elementi l'icona per esempio qua in un posto sbagliato.

Possiamo trascinarla qui dentro la cella abbiamo le due celle.

Selezioniamo le MAIUSC per creare un'auto layout che formano il body, il contenitore la parte più interna della riga.

Rimaniamo lo abbiamo un po' il dividere che sta subito sotto questo elemento.

Infine questo elemento che include il corpo della riga il devi vedere che sta sotto di essa.

Anche in questo caso con shift a possiamo creare un'auto layout.

Controlliamo il racing.

In questo caso vorremmo Phil Container in modo che figli tutta questa dimensione qua vorremmo la stessa proprietà anche per Brody Row il leader vogliamo che prendono tutta la larghezza e le due celle all'interno vogliamo che abbiano una certa dimensione fissa per lo status, mentre che la riga principale che dà il titolo agli elementi prenda tutta la larghezza disponibile.

Infatti, se sentiamo qua il container vedete, quello che succede è che questa dimensione qui evidenzia Rossi in modo da mostrarla si ridimensiona sempre in base alla larghezza del del mockup.

Possiamo poi fare la stessa cosa per tutti gli altri elementi.

Vediamolo velocemente.

Possiamo prendere questo elemento qui, renderlo un'auto layout.

Questo é renderlo un'auto layout il suo contenitore La prima cella come prima avrà film, container e l'altra fake tweet che possiamo fare la stessa cosa anche con l'altro con l'altra riga con la seconda riga.

Quindi anche qua correggiamo la posizione dello spinner.

I tuoi out out layout il contenitore qua vedete cosa succede.

Viene spostato tutto perché abbiamo questa proprietà molto alta di distanza.

Sentiamo tutte le impostazioni di Racing, il container sulla cella, il container sugli elementi dentro l'auto layout.

In questo modo quello che temiamo Mhm, vediamo cosa non funziona qua.

Oh, certo, questo elemento non riempie il container.

In questo modo teniamo lo stesso effetto anche per la riga e per Lehder.

Questo il risultato finale applicato sulla tabella.

Lo possiamo vedere qua, restringendo e cambiando la dimensione a questo elemento vedete tutto quanto si adatta automaticamente in modo da accogliere al meglio.