I layout sono utilizzati per disporre e organizzare gli elementi dell'interfaccia utente o gli elementi componibili sullo schermo.
Definiscono la struttura e il posizionamento dei componenti dell'interfaccia utente in un determinato spazio.
Abbiamo tre layout: colonna, riga e casella.
La colonna riproduce gli elementi in verticale sullo schermo, la riga riproduce gli elementi
in orizzontale sullo schermo e il riquadro mette gli elementi uno sopra l'altro.
I layout svolgono un ruolo cruciale nella costruzione di interfacce utente visivamente
accattivanti, reattive e adattabili a diverse dimensioni e orientamenti dello schermo.
In Jetpack Compose, column, row e box sono compositori di layout utilizzati per
disporre gli elementi dell'interfaccia utente in diverse configurazioni all'interno di un contenitore padre.
Questi componibili offrono un modo flessibile e potente di strutturare la gerarchia dell'interfaccia utente.
Compose supporta anche layout basati su vincoli, in cui è
possibile definire relazioni e vincoli tra diversi elementi dell'interfaccia utente.
Il layout a vincoli è un potente contenitore di layout che consente di creare
layout complessi specificando i vincoli tra i figli I modificatori componibili consentono di decorare
o aumentare un modificatore componibile che consente di fare questo tipo di cose.
Modificare le dimensioni, il layout, il comportamento e l'aspetto dei composables.
Aggiungere informazioni come le etichette di accessibilità.
Elaborare l'input dell'utente.
Aggiungere interazioni di alto livello, come rendere un elemento cliccabile, scrollabile, trascinabile o zoomabile.
Anche in questo caso, la maggior parte degli attributi XML.
Imbottitura ID.
Margine.
Colore.
Il rapporto alfa, l'elevazione e altri vengono utilizzati con l'aiuto di modificatori.
Ora facciamo un salto in Android Studio e impariamo a conoscere i layout.
Dichiarerò un altro componibile chiamato testo.
Scaricatelo da Play Store.
Si può notare nell'anteprima, o se si esegue, che i due testi sono sovrapposti.
E questo non va bene perché non abbiamo bisogno di visualizzare il testo in questo modo.
Scaricatelo dal Play Store.
Ciao master coding app testo.
Qual è la soluzione? La
soluzione è usare i layout.
Inizierò a definire il primo layout per noi qui.
All'interno della funzione di saluto, inizierò con i due punti e all'interno dei due punti.
Sposterò questi due compositori e vedrete la magia.
I due testi sono posizionati l'uno sotto l'altro in modo verticale, quindi
la colonna componibile dispone i suoi figli verticalmente, impilandoli l'uno sull'altro.
È comunemente usato per elenchi verticali, moduli e altri componenti dell'interfaccia utente, dove
gli elementi devono essere visualizzati con una disposizione dall'alto verso il basso.
Se passiamo alla colonna compostabile, controllo e clicco con il tasto sinistro del mouse.
Possiamo vedere gli attributi modificatore, disposizione verticale, allineamento orizzontale e contenuto.
Posso quindi specificare uno dei quattro parametri
modificatore, disposizione verticale, allineamento orizzontale e contenuto.
Ad esempio, utilizzerò l'attributo modificatore e la classe modificatrice dot padding.
E qui userò 16 dpi.
E questa è l'anteprima.
Dopo il rendering.
E se lo eseguiamo sull'emulatore è possibile vederlo.
È molto chiaro che sono disposti l'uno sull'altro.
Un altro layout componibile che possiamo utilizzare è la riga.
Se si esegue nuovamente, si può notare che la riga componibile dispone i suoi figli.
Questi due testi sono disposti orizzontalmente, da sinistra a destra.
È utile per visualizzare gli elementi uno accanto all'altro o per creare elenchi orizzontali.
Inoltre, possiamo spostarci sulla riga componibile e vedere che contiene
quattro attributi: modificatore, disposizione orizzontale, allineamento verticale e contenuto.
Nei prossimi video parleremo della disposizione orizzontale e dell'allineamento verticale.
Un altro layout è la scatola.
Se eseguiamo l'applicazione, possiamo notare che il box composable è un semplice
contenitore di layout che consente di sovrapporre i suoi figli l'uno sull'altro.
Viene comunemente utilizzato per posizionare gli elementi l'uno rispetto all'altro o per creare complessi layout personalizzati.
Se si passa il mouse, è possibile vedere il contenuto del modificatore, i vincoli di allineamento e il contenuto.
Quindi possiamo usare il modificatore con ogni layout componibile per regolare il
layout, le dimensioni, l'allineamento, il padding e altre proprietà dei suoi figli.
Composizioni.
All'interno del layout, i Composable possono essere ulteriormente personalizzati con i propri modificatori,
consentendo un controllo preciso dell'aspetto e del comportamento di ciascun elemento dell'interfaccia utente.
Questi layout componibili sono versatili e possono essere combinati e
annidati per creare layout UI complessi in Jetpack Compose.