WEBVTT 1 00:00.710 --> 00:01.730 Bentornati. 2 00:01.760 --> 00:03.080 Aprire Android Studio. 3 00:03.110 --> 00:06.830 Creare un nuovo progetto di composizione denominato applicazione Corsi. 4 00:06.830 --> 00:13.310 E all'interno di questo pacchetto creerò un nuovo pacchetto, chiamato Screens. 5 00:13.310 --> 00:21.290 E all'interno di questo pacchetto creare un nuovo file Kotlin, chiamato Constraintlayout screen. 6 00:21.680 --> 00:24.890 Iniziamo a costruire la nostra complessa interfaccia utente. 7 00:24.920 --> 00:31.910 Vorrei che vi concentraste con me, perché è un'applicazione molto 8 00:31.940 --> 00:33.650 importante per capire e padroneggiare il layout dei vincoli. 9 00:33.650 --> 00:37.520 Per prima cosa dobbiamo aggiungere la dipendenza del Constraintlayout. 10 00:37.520 --> 00:44.510 Andate quindi su Developer.android.com slash jetpack slash Android X slash releases 11 00:44.510 --> 00:48.740 slash Constraintlayout o cercate semplicemente la dipendenza Constraintlayout per Jetpack Compose. 12 00:48.740 --> 00:54.320 Scorrere verso il basso, selezionare Kotlin e usare questo per usare Constraintlayout. 13 00:54.320 --> 00:58.160 In compose, dobbiamo importare questa dipendenza. 14 00:58.190 --> 01:01.190 Andare al livello del modulo Build.gradle. 15 01:01.190 --> 01:05.020 Scorrere verso il basso, aggiungere la dipendenza e sincronizzare ora. 16 01:05.020 --> 01:06.010 Ed eccoci qui. 17 01:06.010 --> 01:09.880 Ora siamo pronti a usare il Constraintlayout nel nostro progetto. 18 01:09.880 --> 01:17.650 All'interno dello schermo Constraintlayout, creare un nuovo componibile chiamato schermo Constraintlayout. 19 01:17.650 --> 01:24.430 E all'interno di questa funzione componibile, creeremo un Constraintlayout. 20 01:24.430 --> 01:29.410 All'interno di questo scoop, creeremo e chiameremo altri Composable. 21 01:29.410 --> 01:34.300 Per prima cosa, aggiungiamo alcuni parametri per questo Constraintlayout. 22 01:34.300 --> 01:40.660 Se passiamo al Constraintlayout come revisione, possiamo impostare il modificatore, 23 01:40.660 --> 01:43.840 il livello di ottimizzazione, le animazioni e il contenuto. 24 01:43.870 --> 01:55.960 Inizierò con il modificatore modificatore punto sfondo materiale tema punto schema colori punto superficie. 25 01:55.960 --> 02:03.730 Quindi questo modificatore background imposterà il colore di sfondo del constraintlayout e del tema del materiale. 26 02:03.940 --> 02:05.020 Combinazione di colori. 27 02:05.020 --> 02:11.700 La superficie a punti consente di accedere ai colori definiti nei colori del tema dell'applicazione. 28 02:11.700 --> 02:20.040 Surface è tipicamente usato per il colore di sfondo di 29 02:20.040 --> 02:21.840 superfici come carte, trucchi ed elenchi in un'applicazione Material Design. 30 02:21.870 --> 02:29.160 Riempi dimensione massima per riempire la larghezza e l'altezza massime e lo scorrimento verticale. 31 02:29.160 --> 02:33.720 Ricordare lo stato di scorrimento o lo stato di scorrimento. 32 02:33.750 --> 02:40.020 In questo modo si ottiene uno scroll verticale componibile e scorrevole. 33 02:40.050 --> 02:46.440 È il modificatore che abilita lo scorrimento verticale per il componente a cui è applicato. 34 02:46.470 --> 02:54.090 Consente di far scorrere verticalmente il contenuto all'interno 35 02:54.120 --> 02:54.480 del composable quando il contenuto supera l'altezza disponibile. 36 02:54.510 --> 02:56.760 Ricordare lo stato di scorrimento. 37 02:56.760 --> 03:04.950 Questa funzione crea una memoria e ricorda un oggetto stato 38 03:04.950 --> 03:06.450 di scorrimento, necessario per il modificatore di scorrimento verticale. 39 03:06.480 --> 03:14.120 Lo stato di scorrimento contiene la posizione di scorrimento corrente e altre informazioni relative allo scorrimento. 40 03:14.120 --> 03:22.310 Questa riga viene utilizzata per creare uno stato di scorrimento che compose ricorderà 41 03:22.310 --> 03:26.120 in tutte le ricomposizioni, assicurando un comportamento di scorrimento fluido e coerente. 42 03:26.150 --> 03:33.710 Questi sono i parametri di Constraintlayout e questo 43 03:33.710 --> 03:34.250 è il modificatore all'interno dello scoop di Constraintlayout. 44 03:34.250 --> 03:43.100 Definiremo alcuni altri Composable per realizzare la nostra applicazione 45 03:43.100 --> 03:45.770 come di consueto, iniziando con la definizione dei riferimenti. 46 03:45.770 --> 03:48.410 Ciò avviene attraverso la creazione di val. 47 03:48.410 --> 03:53.450 E all'interno di questa val creeremo dei riferimenti. 48 03:53.450 --> 03:57.470 Inizierò con lo sfondo sfumato. 49 03:57.500 --> 04:01.100 Questo è il primo riferimento che userò. 50 04:01.100 --> 04:05.660 Creare riferimenti funzione val gradiente di sfondo. 51 04:05.660 --> 04:08.780 Si tratta di una dichiarazione di distruzione in Kotlin. 52 04:08.780 --> 04:18.430 In questo contesto viene utilizzato per assegnare il riferimento creato 53 04:18.430 --> 04:20.500 dalla funzione create reference a una variabile denominata background gradient. 54 04:20.530 --> 04:21.850 Creare grafici. 55 04:21.850 --> 04:26.890 Questa funzione fa parte dell'API Constraintlayout di Jetpack Composer. 56 04:26.920 --> 04:32.350 Crea uno o più oggetti di riferimento constraintlayout. 57 04:32.350 --> 04:40.000 Questi riferimenti vengono utilizzati per definire i vincoli per i compositi all'interno del constraintlayout. 58 04:40.030 --> 04:46.990 Quando si utilizza Constraintlayout, è necessario definire i vincoli per il posizionamento e il dimensionamento dei Composable. 59 04:46.990 --> 04:55.780 A tale scopo, si creano dei riferimenti utilizzando la funzione create graphs 60 04:55.780 --> 04:56.500 o create graph se si ha bisogno di un solo riferimento. 61 04:56.500 --> 04:59.290 Ma creeremo molti riferimenti. 62 04:59.290 --> 05:02.590 Quindi utilizzerò le funzioni di creazione dei riferimenti. 63 05:02.590 --> 05:11.560 Questi riferimenti fungono da maniglie che si possono usare per impostare relazioni o 64 05:11.560 --> 05:16.060 vincoli tra diversi componibili o tra un componibile e il layout padre.