WEBVTT 00:00.170 --> 00:00.990 Bentornati. 00:01.010 --> 00:07.730 Il primo passo per creare un'applicazione di revisione delle schede è iniziare con il layout dell'elemento della vista scheda, 00:07.730 --> 00:13.040 che è un layout XML che rappresenta il layout di un singolo elemento nella vista riciclatore. 00:13.070 --> 00:21.800 Aprite Android Studio Selezionate Nuovo progetto Selezionate l'attività Viste vuote e chiamatela applicazione Sport. 00:22.220 --> 00:28.070 Premiamo finish e passiamo alla cartella risorse della cartella layout. 00:28.070 --> 00:34.910 Fate clic sulla risorsa Layout di visualizzazione e assegnatele il nome di layout dell'elemento scheda. 00:36.420 --> 00:41.700 Modalità Split e iniziamo a costruire la nostra vista scheda. 00:42.480 --> 00:49.980 Il primo passo è rimuovere il constraintlayout e sostituirlo con la vista scheda. 00:50.040 --> 00:55.140 Android x dot Cardview dot widget dot card view. 00:55.140 --> 00:57.750 E questo è il nostro layout di visualizzazione della carta. 00:57.780 --> 01:02.740 Sono molti gli attributi che si possono impostare per la visualizzazione delle schede. 01:02.760 --> 01:09.750 Il primo è il raggio d'angolo e per utilizzare gli attributi della vista scheda è necessario importare 01:09.750 --> 01:12.330 i collegamenti dell'applicazione. 01:12.330 --> 01:15.750 Quindi basta digitare app e importare questa riga. 01:15.750 --> 01:17.350 Allora userò l'app. 01:17.370 --> 01:22.080 Ci sono molti attributi che possiamo usare per la vista della scheda. 01:22.110 --> 01:28.470 Inizierò con il raggio dell'angolo, che definisce il raggio dell'angolo delle tessere. 01:28.470 --> 01:31.800 Lo imposterò a 20 dpi per vederlo meglio. 01:31.800 --> 01:34.590 Posso impostare il colore di sfondo del biglietto. 01:34.590 --> 01:43.120 Ad esempio, scheda app, colore di sfondo e seleziono il nero e si possono vedere gli angoli, gli angoli arrotondati 01:43.120 --> 01:45.490 della vista scheda. 01:45.490 --> 01:48.580 Posso aumentare questi angoli a 40. 01:48.610 --> 01:51.040 È possibile vedere il raggio dell'angolo. 01:51.070 --> 01:57.610 L'elevazione della tessera è un attributo che controlla l'elevazione o l'ombra della tessera. 01:57.610 --> 01:59.830 Ad esempio, lo imposterò a 20 DPI. 01:59.980 --> 02:06.700 Inoltre, è possibile aggiungere un padding all'interno della vista della scheda per creare una spaziatura tra il contenuto della scheda e i 02:06.730 --> 02:07.330 suoi bordi. 02:07.360 --> 02:13.120 Inoltre, è possibile impostare i margini per controllare la spaziatura tra le visualizzazioni di più schede. 02:13.120 --> 02:17.500 Ad esempio, posso impostare un margine di otto DPI. 02:18.070 --> 02:25.270 Imposterò l'altezza a 120 DPI e vedrete che questa è la nostra carta. 02:25.300 --> 02:32.770 Il contenuto all'interno della vista scheda può essere costituito da qualsiasi layout, come constraintlayout relativamente 02:32.770 --> 02:42.280 out, linearmente out e da qualsiasi vista, come le viste di testo, le viste di immagine o altre viste che consentono di creare elementi dell'interfaccia utente 02:42.310 --> 02:43.870 ricchi e informativi. 02:44.020 --> 02:46.690 Inizierò con la visualizzazione delle immagini. 02:46.690 --> 02:52.960 Creerò una vista immagine con Matchparent e Height Matchparent. 02:55.490 --> 02:58.090 Ho preparato questi beni. 02:58.100 --> 03:03.080 Sei immagini, una per l'intestazione e cinque per le schede. 03:03.140 --> 03:05.930 Li ho inseriti nella cartella dei disegnabili. 03:09.160 --> 03:10.420 Ed eccoci qui. 03:10.630 --> 03:15.700 Posso utilizzare l'SRC dell'immagine per visualizzarla nel carrello. 03:15.730 --> 03:17.320 Il calcio. 03:17.650 --> 03:18.770 Lo si può vedere. 03:18.790 --> 03:22.320 Posso cambiarlo in pallavolo e così via. 03:22.330 --> 03:31.270 Quindi posso cambiare l'altezza di questa vista carrello a 200 e si può vedere che si riempie. 03:31.630 --> 03:37.180 L'immagine riempie il carrello e si possono notare gli angoli arrotondati intorno all'immagine. 03:37.180 --> 03:42.940 E come detto prima, il contenuto della vista carrello può essere qualsiasi layout. 03:43.030 --> 03:46.420 Quindi creerò un layout di vincoli qui. 03:46.540 --> 03:49.660 Matchparent Matchparent. 03:50.110 --> 03:57.490 E, premendo il tasto shift e il segno maggiore, vi applicherò un tag di chiusura. 03:57.490 --> 04:05.770 Posizionerò questa vista immagine all'interno del layout di vincolo, in modo da vedere che la vista immagine è all'interno del 04:05.770 --> 04:10.130 layout di vincolo e il layout di vincolo riempie la vista scheda. 04:10.160 --> 04:15.210 Faccio clic su questa immagine per visualizzare i vincoli ed eccoci al punto di partenza. 04:15.230 --> 04:19.410 Si può notare che la larghezza e l'altezza sono impostate per riempire il genitore. 04:19.430 --> 04:23.060 Posso aggiungere un altro widget che è una vista di testo. 04:23.120 --> 04:35.480 Aggiungerò la larghezza come matchparent wrap content e l'id sarà text view e imposterò un attributo text a questa text 04:35.480 --> 04:41.230 view title size 48 e si può vedere questo è il titolo. 04:41.240 --> 04:50.360 Lo trascinerò in altri vincoli e vedrò che nel pannello Attributi posso modificare questa vista di 04:50.360 --> 04:54.350 testo all'interno del layout dei vincoli. 04:54.350 --> 04:56.540 Ad esempio, l'ATP. 04:57.140 --> 05:05.180 ATP e naturalmente posso modificare il colore della visualizzazione del testo qui e lo imposterò su nero. 05:05.180 --> 05:09.110 Questo è il nostro progetto di layout dell'elemento della vista scheda. 05:09.140 --> 05:17.210 Passiamo ora all'attività underscore main, passiamo alla modalità split, rimuoviamo la vista testo e sostituiamola 05:17.210 --> 05:22.190 con la vista riciclatore e sopra la vista riciclatore. 05:22.190 --> 05:27.200 Creerò una vista immagine che fungerà da intestazione per questa applicazione. 05:27.210 --> 05:35.870 Image View Matchparent Wrap content o 1 o 220 è un buon mare profondo. 05:36.290 --> 05:41.690 Sarebbe la testata e va bene in ulteriori vincoli. 05:47.700 --> 05:50.640 Ora modifichiamo la vista del riciclatore. 05:50.670 --> 05:52.050 Il punto di vista del riciclatore. 05:52.200 --> 05:57.330 Rimuoviamo tutti i vincoli e trasciniamo la destra. 05:57.330 --> 06:01.650 E questo vincolo, lo trascinerò e lo lascerò cadere. 06:02.310 --> 06:04.320 Ed ecco, questa vista dell'immagine. 06:04.320 --> 06:09.450 Aggiungerò il vincolo al genitore, non all'inizio della vista riciclatore. 06:09.450 --> 06:11.040 Allora questo è un bene. 06:11.040 --> 06:16.110 Modifico l'altezza a zero e si può vedere che riempirà il genitore. 06:16.110 --> 06:26.430 Questo è il layout della nostra scheda e questa è la vista del riciclatore con l'immagine di intestazione dell'attività principale.