WEBVTT 1 00:00.770 --> 00:06.800 Prima di continuare a progettare l'interfaccia utente, dobbiamo rendere il nostro codice più pulito. 2 00:06.800 --> 00:12.020 Per questo motivo, è necessario separare i compositi in nuovi file. 3 00:12.020 --> 00:15.620 Quindi, all'interno delle schermate, create un nuovo file. 4 00:15.620 --> 00:19.100 Lo chiamerò sfondo sfumato. 5 00:19.130 --> 00:23.060 Spostare questo componibile da qui e incollarlo qui. 6 00:23.060 --> 00:24.860 È molto semplice. 7 00:24.860 --> 00:31.010 Come si vede, stiamo chiamando il gradiente di sfondo componibile dal file del gradiente di sfondo. 8 00:31.010 --> 00:36.020 Allo stesso modo, creeremo un altro file chiamato header. 9 00:36.020 --> 00:41.180 All'interno di questa intestazione creeremo due funzioni componibili. 10 00:41.180 --> 00:43.460 Cominciamo con il principale componibile. 11 00:43.460 --> 00:50.360 E qui lo nominerò come testo dell'immagine del profilo nel parametro dell'oggetto modificatore. 12 00:50.360 --> 00:52.880 Inizierò con le immagini componibili. 13 00:52.880 --> 00:56.600 Imposterò la risorsa pittore arte disegnabile. 14 00:56.600 --> 01:01.100 Dobbiamo aggiungere alcune immagini alla cartella drawable. 15 01:01.100 --> 01:05.150 Ho preparato queste due immagini utente e la campana. 16 01:05.150 --> 01:11.310 Incolliamoli nella cartella drawable di Android Studio. 17 01:11.310 --> 01:12.540 Ed eccoci qui. 18 01:12.540 --> 01:22.590 Ora impostate il pittore sulla risorsa R dot drawable dot user import r Alt+. 19 01:22.590 --> 01:24.360 Entrate ed eccovi serviti. 20 01:24.390 --> 01:27.870 La descrizione del contenuto sarebbe un profilo. 21 01:27.900 --> 01:32.400 Quindi si imposta il modificatore uguale al modificatore passato. 22 01:32.430 --> 01:40.830 È inoltre possibile aggiungere altri parametri di modifica, come l'inizio del padding pari a 16 dpi. 23 01:41.010 --> 01:51.750 È inoltre possibile aggiungere un clip e impostarlo sulla forma del cerchio e sulla dimensione, ad esempio, di 32 dpi. 24 01:51.780 --> 01:54.270 Questo va bene per l'immagine del profilo. 25 01:54.270 --> 02:01.470 Ricordare che i vincoli sono inclusi nell'oggetto modificatore passato come parametro per questo componibile. 26 02:01.500 --> 02:06.120 Un'altra funzione componibile chiamata notifica. 27 02:06.150 --> 02:13.920 Il modificatore è un parametro e all'interno di questa notifica 28 02:13.920 --> 02:16.750 composta lo chiamo immagine di notifica, per evitare errori. 29 02:16.750 --> 02:24.970 In seguito imposterò il pittore di immagini, l'arte delle risorse, i punti disegnabili e la notifica della descrizione del contenuto. 30 02:24.970 --> 02:31.360 Inoltre, è possibile impostare il modificatore sul modificatore passato, perché 31 02:31.360 --> 02:34.300 è necessario aggiungere i vincoli per esso nel Constraintlayout. 32 02:34.300 --> 02:37.360 Inoltre, possiamo aggiungere alcuni padding. 33 02:37.360 --> 02:40.870 Ad esempio, fine equivale a 16 dpi. 34 02:41.200 --> 02:48.250 Inoltre, è possibile specificare la forma circolare della clip e la dimensione di 42 dpi. 35 02:48.280 --> 02:55.510 Passiamo ora alla schermata Constraintlayout e passiamo i vincoli 36 02:55.510 --> 02:56.830 per l'immagine del profilo e l'immagine di notifica. 37 02:56.830 --> 03:02.980 All'interno dell'ambito di Constraintlayout, dobbiamo passare i vincoli per l'intestazione. 38 03:03.010 --> 03:05.410 Inoltre, creeremo le catene. 39 03:05.410 --> 03:13.660 Quindi creerò linee guida superiori, iniziali e finali dall'alto, da sinistra e 40 03:13.690 --> 03:18.610 da destra Linee guida utilizzando Crea linea guida dall'alto 16 DPI. 41 03:18.610 --> 03:21.550 Nei video precedenti abbiamo parlato di linee guida. 42 03:21.550 --> 03:27.050 Pertanto, per saperne di più, vi invitiamo a consultare le lezioni sulle linee guida. 43 03:32.480 --> 03:35.660 Ora dobbiamo creare una catena. 44 03:35.660 --> 03:40.490 Dobbiamo iniziare a utilizzare il metodo di creazione della catena orizzontale. 45 03:40.490 --> 03:44.330 Devo impostare i riferimenti e lo stile della catena. 46 03:44.330 --> 03:47.090 Passiamo alla catena orizzontale di creazione. 47 03:47.090 --> 03:51.500 Possiamo vedere gli elementi var args e lo stile della catena. 48 03:51.500 --> 03:59.870 Come ho detto, per ogni elemento componibile 49 03:59.870 --> 04:00.470 all'interno del constraintlayout, dobbiamo creare un riferimento. 50 04:00.470 --> 04:06.350 Per creare un riferimento per l'immagine del profilo e 51 04:06.350 --> 04:07.370 per l'immagine di notifica, andiamo a questa funzione. 52 04:07.370 --> 04:14.840 E qui devo creare un'immagine del profilo e un'immagine di notifica di riferimento. 53 04:14.870 --> 04:22.100 Scorrere verso il basso per creare una catena orizzontale per l'immagine di notifica del profilo. 54 04:22.100 --> 04:27.440 Lo stile della catena equivale al punto stile catena diffuso all'interno. 55 04:27.440 --> 04:31.590 Richiamo queste due funzioni e passo i vincoli. 56 04:31.590 --> 04:37.740 Quindi nell'immagine del profilo imposterò il vincolo del punto modificatore come. 57 04:37.740 --> 04:41.040 Impostare il riferimento all'immagine del profilo. 58 04:41.040 --> 04:47.310 È necessario passare i vincoli di collegamento al punto superiore alla linea guida superiore. 59 04:47.310 --> 04:52.470 Inoltre, passeremo e chiameremo l'immagine di notifica. 60 04:52.470 --> 04:58.290 Passa il vincolo del punto modificatore come immagine di notifica. 61 04:58.290 --> 05:06.840 Impostare il modificatore o il vincolo come immagine di notifica 62 05:06.840 --> 05:09.570 e impostare i vincoli all'interno dell'ambito del vincolo come funzione. 63 05:09.600 --> 05:11.220 Collegamento al punto due in alto. 64 05:11.250 --> 05:18.780 Immagine del profilo punto superiore pulsante punto di collegamento due immagine del profilo punto inferiore. 65 05:18.780 --> 05:23.700 Questi sono i vincoli per l'immagine del profilo e l'immagine di notifica. 66 05:23.700 --> 05:25.710 Lasciatemi eseguire e vedere i cambiamenti. 67 05:25.710 --> 05:26.910 Ed eccoci qui. 68 05:26.940 --> 05:29.850 Questo è il nostro profilo e questa è la campana. 69 05:29.880 --> 05:31.380 Congratulazioni ragazzi. 70 05:31.380 --> 05:33.540 Abbiamo creato l'intestazione.