WEBVTT

1
00:01.280 --> 00:04.850
Abbiamo terminato i livelli del modello e
del modello della vista.

2
00:04.850 --> 00:07.220
Passiamo ora al livello di
visualizzazione.

3
00:07.250 --> 00:12.590
Lo scopo di questo livello è informare il
modello di vista sull'azione dell'utente.

4
00:12.590 --> 00:19.610
Questo livello osserva il modello della
vista e non contiene alcun tipo di logica
applicativa.

5
00:19.610 --> 00:21.380
Torniamo al nostro progetto.

6
00:21.380 --> 00:28.070
Mi è sfuggito di rimuovere l'istruzione
return, quindi creerò un nuovo pacchetto
chiamato screens.

7
00:28.070 --> 00:32.960
All'interno di questo pacchetto di
schermate, creerò un nuovo file Kotlin.

8
00:32.960 --> 00:37.370
Inizierò a creare l'elemento del film
Composable functions.

9
00:37.370 --> 00:41.870
Inizio con la voce film, poi l'elenco film
e la schermata film.

10
00:41.870 --> 00:42.770
Fare clic su OK.

11
00:42.770 --> 00:46.940
Cominciamo con la funzione componibile
movie item.

12
00:46.970 --> 00:51.650
Questo elemento filmato prende come
parametro un oggetto filmato.

13
00:51.650 --> 00:53.870
Importare il film ed ecco che si parte.

14
00:53.900 --> 01:01.400
Dobbiamo creare una scheda componibile e
al suo interno dobbiamo aggiungere
l'immagine e due testi.

15
01:01.400 --> 01:02.090
Per questo.

16
01:02.090 --> 01:04.490
Inizio con le carte componibili.

17
01:04.520 --> 01:10.700
Definisco alcuni parametri come
l'elevazione uguale ai valori predefiniti
della carta.

18
01:10.700 --> 01:13.220
Carta dei punti di elevazione ATP.

19
01:13.340 --> 01:20.810
Inoltre, è necessario aggiungere un altro
parametro come il modificatore dot padding
12 dp dot fill.

20
01:20.840 --> 01:22.430
Larghezza massima.

21
01:22.430 --> 01:28.250
All'interno di questa scheda definirò una
riga componibile con un modificatore.

22
01:28.430 --> 01:32.300
Equivale al modificatore dot padding otto
dp.

23
01:32.300 --> 01:40.670
All'interno di questa riga, definirò
un'immagine e due testi separati da uno
spaziatore. Per usare la

24
01:40.670 --> 01:48.470
libreria coil che abbiamo definito qui e
che abbiamo implementato in Build.gradle,
dobbiamo usare l'immagine async.

25
01:48.500 --> 01:51.110
L'immagine asincrona proviene dalla
bobina.

26
01:51.110 --> 01:54.530
Dobbiamo definire il modello e la
descrizione del contenuto.

27
01:54.560 --> 01:58.160
Il modello è il link dell'immagine e la
descrizione del contenuto.

28
01:58.160 --> 02:00.170
La descrizione del contenuto
dell'immagine.

29
02:00.200 --> 02:07.010
Async image è una funzione componibile
fornita dalla libreria coil composed,

30
02:07.040 --> 02:10.370
che fa parte del progetto coil coroutine
image loader per Android.

31
02:10.370 --> 02:18.490
Permette di caricare e visualizzare le
immagini in modo asincrono in
un'interfaccia utente di Jetpack Compose;

32
02:18.520 --> 02:23.530
qui definiamo la libreria di bobine e poi,
per utilizzarla, usiamo l'immagine
asincrona, il modello.

33
02:23.530 --> 02:29.860
Può essere un ID di risorsa, un file o
qualsiasi altro tipo supportato da

34
02:29.890 --> 02:33.550
coil e la descrizione del contenuto una
descrizione per l'immagine ai fini
dell'accessibilità.

35
02:33.550 --> 02:35.230
Torniamo a Tmdb.

36
02:35.500 --> 02:39.130
Org voglio che vi concentriate con me su
questo sito.

37
02:39.130 --> 02:44.200
Se andiamo alla risposta e la
modifichiamo, andiamo al percorso del
poster.

38
02:44.200 --> 02:51.850
Otterremo il nome del punto immagine jpg,
ma non c'è alcun link per accedere a
questa immagine.

39
02:51.850 --> 02:59.770
Se lo copio e lo incollo qui, non succede
nulla perché

40
02:59.770 --> 03:00.280
ci indirizza a Google e non è un link
valido.

41
03:00.280 --> 03:04.090
Come caricare l'immagine da questa API? Se
torniamo a Tmdb e

42
03:04.090 --> 03:11.110
qui nelle guide scendiamo fino alle
immagini, facciamo clic sulle basi.

43
03:11.110 --> 03:17.920
Come già detto, si noterà che gli oggetti
movie, TV

44
03:17.920 --> 03:19.420
e person contengono riferimenti a percorsi
di file diversi.

45
03:19.420 --> 03:25.600
Per generare un URL di immagine
perfettamente funzionante, sono necessari
tre dati.

46
03:25.640 --> 03:29.510
Questi elementi sono Bazel, la dimensione
del file e il percorso del file.

47
03:29.510 --> 03:32.600
In risposta, abbiamo il percorso del file.

48
03:32.600 --> 03:33.980
Questo è il percorso del file.

49
03:33.980 --> 03:37.220
Abbiamo bisogno dell'URL di base e delle
dimensioni del file.

50
03:37.220 --> 03:39.500
Ecco l'esempio completo.

51
03:39.500 --> 03:45.470
Se lo copio e lo incollo qui, verrà
visualizzata un'immagine valida.

52
03:45.500 --> 03:47.630
Ok, questo è quello che mi serve.

53
03:47.630 --> 03:50.480
Torniamo quindi alla documentazione
dell'API.

54
03:50.480 --> 03:55.760
Abbiamo questo URL di base, con dimensioni
del file pari a 500.

55
03:55.760 --> 03:58.250
E questo è il percorso del file.

56
03:58.280 --> 04:01.910
Se scorrete in basso, ci sono molti esempi
qui.

57
04:01.910 --> 04:05.960
Abbiamo l'originale e la W 500.

58
04:05.990 --> 04:08.150
Queste sono le dimensioni dei file.

59
04:08.150 --> 04:12.320
Questo è l'URL di base e questo è il
percorso del file.

60
04:12.320 --> 04:20.510
Quindi, quello che devo fare è ottenere la
dimensione del file w 500 con l'URL di
base, copiarla e incollarla qui.

61
04:20.510 --> 04:29.930
Quindi è necessario ottenere il percorso
del poster per farlo dobbiamo ottenerlo
dall'oggetto movie dot poster path.

62
04:29.930 --> 04:35.100
L'oggetto film viene passato qui
all'interno del parametro movie item.

63
04:35.100 --> 04:36.540
È molto semplice, ragazzi.

64
04:36.540 --> 04:42.540
Questa è la dimensione del file dell'URL
di base e questo è il percorso del file,
la descrizione del contenuto.

65
04:42.540 --> 04:46.140
È possibile inserire l'immagine del
filmato che si desidera.

66
04:46.140 --> 04:52.380
Quindi è necessario creare un modificatore
distanziale della larghezza del punto di
otto dpi.

67
04:52.380 --> 04:56.790
Poi devo creare una colonna che contenga i
due testi.

68
04:56.790 --> 05:04.050
Impostare un modificatore su questo
modificatore di colonna per l'imbottitura
del testo a 16 dpi.

69
05:04.050 --> 05:08.910
Dobbiamo ottenere il testo dal titolo del
punto film e lo stile.

70
05:08.910 --> 05:18.150
Possiamo impostarlo come un'etichetta di
tema materiale di grandi dimensioni, un
altro filmato di testo, una descrizione o
una panoramica.

71
05:18.180 --> 05:20.190
Tema materiale di stile.

72
05:20.220 --> 05:22.830
Tipografia punto corpo piccolo.

73
05:22.860 --> 05:25.650
Ok, questo è l'oggetto del film.

74
05:25.650 --> 05:34.320
Si tratta di una scheda contenente
un'immagine dalla libreria di bobine e una
colonna contenente due testi, uno

75
05:34.320 --> 05:40.110
che mostra il percorso della locandina del
film e l'altro il titolo e la panoramica
del film.