WEBVTT 1 00:01.670 --> 00:09.470 I layout sono utilizzati per disporre e organizzare gli elementi dell'interfaccia utente o gli elementi componibili sullo schermo. 2 00:09.500 --> 00:16.550 Definiscono la struttura e il posizionamento dei componenti dell'interfaccia utente in un determinato spazio. 3 00:16.550 --> 00:21.200 Abbiamo tre layout: colonna, riga e casella. 4 00:21.200 --> 00:29.480 La colonna riproduce gli elementi in verticale sullo schermo, la riga riproduce gli elementi 5 00:29.480 --> 00:33.050 in orizzontale sullo schermo e il riquadro mette gli elementi uno sopra l'altro. 6 00:33.080 --> 00:41.540 I layout svolgono un ruolo cruciale nella costruzione di interfacce utente visivamente 7 00:41.540 --> 00:45.830 accattivanti, reattive e adattabili a diverse dimensioni e orientamenti dello schermo. 8 00:45.860 --> 00:55.430 In Jetpack Compose, column, row e box sono compositori di layout utilizzati per 9 00:55.430 --> 00:58.670 disporre gli elementi dell'interfaccia utente in diverse configurazioni all'interno di un contenitore padre. 10 00:58.700 --> 01:07.130 Questi componibili offrono un modo flessibile e potente di strutturare la gerarchia dell'interfaccia utente. 11 01:07.130 --> 01:15.920 Compose supporta anche layout basati su vincoli, in cui è 12 01:15.920 --> 01:18.140 possibile definire relazioni e vincoli tra diversi elementi dell'interfaccia utente. 13 01:18.170 --> 01:25.640 Il layout a vincoli è un potente contenitore di layout che consente di creare 14 01:25.670 --> 01:36.260 layout complessi specificando i vincoli tra i figli I modificatori componibili consentono di decorare 15 01:36.260 --> 01:40.640 o aumentare un modificatore componibile che consente di fare questo tipo di cose. 16 01:40.640 --> 01:45.860 Modificare le dimensioni, il layout, il comportamento e l'aspetto dei composables. 17 01:45.860 --> 01:49.280 Aggiungere informazioni come le etichette di accessibilità. 18 01:49.280 --> 01:51.230 Elaborare l'input dell'utente. 19 01:51.230 --> 01:59.690 Aggiungere interazioni di alto livello, come rendere un elemento cliccabile, scrollabile, trascinabile o zoomabile. 20 01:59.690 --> 02:03.020 Anche in questo caso, la maggior parte degli attributi XML. 21 02:03.020 --> 02:04.220 Imbottitura ID. 22 02:04.220 --> 02:04.760 Margine. 23 02:04.760 --> 02:05.270 Colore. 24 02:05.300 --> 02:11.130 Il rapporto alfa, l'elevazione e altri vengono utilizzati con l'aiuto di modificatori. 25 02:11.160 --> 02:16.260 Ora facciamo un salto in Android Studio e impariamo a conoscere i layout. 26 02:16.260 --> 02:21.660 Dichiarerò un altro componibile chiamato testo. 27 02:21.660 --> 02:23.580 Scaricatelo da Play Store. 28 02:23.610 --> 02:31.080 Si può notare nell'anteprima, o se si esegue, che i due testi sono sovrapposti. 29 02:31.080 --> 02:37.500 E questo non va bene perché non abbiamo bisogno di visualizzare il testo in questo modo. 30 02:37.500 --> 02:39.900 Scaricatelo dal Play Store. 31 02:39.930 --> 02:42.330 Ciao master coding app testo. 32 02:42.360 --> 02:44.520 Qual è la soluzione? La 33 02:44.520 --> 02:47.430 soluzione è usare i layout. 34 02:47.430 --> 02:51.390 Inizierò a definire il primo layout per noi qui. 35 02:51.390 --> 02:57.630 All'interno della funzione di saluto, inizierò con i due punti e all'interno dei due punti. 36 02:57.630 --> 03:02.820 Sposterò questi due compositori e vedrete la magia. 37 03:02.850 --> 03:12.090 I due testi sono posizionati l'uno sotto l'altro in modo verticale, quindi 38 03:12.090 --> 03:16.590 la colonna componibile dispone i suoi figli verticalmente, impilandoli l'uno sull'altro. 39 03:16.620 --> 03:25.500 È comunemente usato per elenchi verticali, moduli e altri componenti dell'interfaccia utente, dove 40 03:25.500 --> 03:29.070 gli elementi devono essere visualizzati con una disposizione dall'alto verso il basso. 41 03:29.100 --> 03:35.160 Se passiamo alla colonna compostabile, controllo e clicco con il tasto sinistro del mouse. 42 03:35.160 --> 03:42.300 Possiamo vedere gli attributi modificatore, disposizione verticale, allineamento orizzontale e contenuto. 43 03:42.300 --> 03:51.990 Posso quindi specificare uno dei quattro parametri 44 03:51.990 --> 03:53.400 modificatore, disposizione verticale, allineamento orizzontale e contenuto. 45 03:53.400 --> 04:00.810 Ad esempio, utilizzerò l'attributo modificatore e la classe modificatrice dot padding. 46 04:00.810 --> 04:04.410 E qui userò 16 dpi. 47 04:04.410 --> 04:06.360 E questa è l'anteprima. 48 04:06.360 --> 04:08.100 Dopo il rendering. 49 04:08.100 --> 04:11.370 E se lo eseguiamo sull'emulatore è possibile vederlo. 50 04:11.400 --> 04:16.110 È molto chiaro che sono disposti l'uno sull'altro. 51 04:16.140 --> 04:20.820 Un altro layout componibile che possiamo utilizzare è la riga. 52 04:20.850 --> 04:27.900 Se si esegue nuovamente, si può notare che la riga componibile dispone i suoi figli. 53 04:27.930 --> 04:34.050 Questi due testi sono disposti orizzontalmente, da sinistra a destra. 54 04:34.050 --> 04:40.740 È utile per visualizzare gli elementi uno accanto all'altro o per creare elenchi orizzontali. 55 04:40.740 --> 04:50.490 Inoltre, possiamo spostarci sulla riga componibile e vedere che contiene 56 04:50.490 --> 04:53.700 quattro attributi: modificatore, disposizione orizzontale, allineamento verticale e contenuto. 57 04:53.700 --> 05:00.120 Nei prossimi video parleremo della disposizione orizzontale e dell'allineamento verticale. 58 05:00.150 --> 05:03.210 Un altro layout è la scatola. 59 05:03.210 --> 05:11.010 Se eseguiamo l'applicazione, possiamo notare che il box composable è un semplice 60 05:11.010 --> 05:16.480 contenitore di layout che consente di sovrapporre i suoi figli l'uno sull'altro. 61 05:16.480 --> 05:24.820 Viene comunemente utilizzato per posizionare gli elementi l'uno rispetto all'altro o per creare complessi layout personalizzati. 62 05:24.820 --> 05:32.260 Se si passa il mouse, è possibile vedere il contenuto del modificatore, i vincoli di allineamento e il contenuto. 63 05:32.260 --> 05:42.430 Quindi possiamo usare il modificatore con ogni layout componibile per regolare il 64 05:42.430 --> 05:45.160 layout, le dimensioni, l'allineamento, il padding e altre proprietà dei suoi figli. 65 05:45.160 --> 05:46.210 Composizioni. 66 05:46.210 --> 05:55.330 All'interno del layout, i Composable possono essere ulteriormente personalizzati con i propri modificatori, 67 05:55.330 --> 06:01.990 consentendo un controllo preciso dell'aspetto e del comportamento di ciascun elemento dell'interfaccia utente. 68 06:01.990 --> 06:13.060 Questi layout componibili sono versatili e possono essere combinati e 69 06:13.060 --> 06:14.470 annidati per creare layout UI complessi in Jetpack Compose.