Abbiamo terminato i livelli del modello e del modello della vista.
Passiamo ora al livello di visualizzazione.
Lo scopo di questo livello è informare il modello di vista sull'azione dell'utente.
Questo livello osserva il modello della vista e non contiene alcun tipo di logica applicativa.
Torniamo al nostro progetto.
Mi è sfuggito di rimuovere l'istruzione return, quindi creerò un nuovo pacchetto chiamato screens.
All'interno di questo pacchetto di schermate, creerò un nuovo file Kotlin.
Inizierò a creare l'elemento del film Composable functions.
Inizio con la voce film, poi l'elenco film e la schermata film.
Fare clic su OK.
Cominciamo con la funzione componibile movie item.
Questo elemento filmato prende come parametro un oggetto filmato.
Importare il film ed ecco che si parte.
Dobbiamo creare una scheda componibile e al suo interno dobbiamo aggiungere l'immagine e due testi.
Per questo.
Inizio con le carte componibili.
Definisco alcuni parametri come l'elevazione uguale ai valori predefiniti della carta.
Carta dei punti di elevazione ATP.
Inoltre, è necessario aggiungere un altro parametro come il modificatore dot padding 12 dp dot fill.
Larghezza massima.
All'interno di questa scheda definirò una riga componibile con un modificatore.
Equivale al modificatore dot padding otto dp.
All'interno di questa riga, definirò un'immagine e due testi separati da uno spaziatore. Per usare la
libreria coil che abbiamo definito qui e che abbiamo implementato in Build.gradle, dobbiamo usare l'immagine async.
L'immagine asincrona proviene dalla bobina.
Dobbiamo definire il modello e la descrizione del contenuto.
Il modello è il link dell'immagine e la descrizione del contenuto.
La descrizione del contenuto dell'immagine.
Async image è una funzione componibile fornita dalla libreria coil composed,
che fa parte del progetto coil coroutine image loader per Android.
Permette di caricare e visualizzare le immagini in modo asincrono in un'interfaccia utente di Jetpack Compose;
qui definiamo la libreria di bobine e poi, per utilizzarla, usiamo l'immagine asincrona, il modello.
Può essere un ID di risorsa, un file o qualsiasi altro tipo supportato da
coil e la descrizione del contenuto una descrizione per l'immagine ai fini dell'accessibilità.
Torniamo a Tmdb.
Org voglio che vi concentriate con me su questo sito.
Se andiamo alla risposta e la modifichiamo, andiamo al percorso del poster.
Otterremo il nome del punto immagine jpg, ma non c'è alcun link per accedere a questa immagine.
Se lo copio e lo incollo qui, non succede nulla perché
ci indirizza a Google e non è un link valido.
Come caricare l'immagine da questa API? Se torniamo a Tmdb e
qui nelle guide scendiamo fino alle immagini, facciamo clic sulle basi.
Come già detto, si noterà che gli oggetti movie, TV
e person contengono riferimenti a percorsi di file diversi.
Per generare un URL di immagine perfettamente funzionante, sono necessari tre dati.
Questi elementi sono Bazel, la dimensione del file e il percorso del file.
In risposta, abbiamo il percorso del file.
Questo è il percorso del file.
Abbiamo bisogno dell'URL di base e delle dimensioni del file.
Ecco l'esempio completo.
Se lo copio e lo incollo qui, verrà visualizzata un'immagine valida.
Ok, questo è quello che mi serve.
Torniamo quindi alla documentazione dell'API.
Abbiamo questo URL di base, con dimensioni del file pari a 500.
E questo è il percorso del file.
Se scorrete in basso, ci sono molti esempi qui.
Abbiamo l'originale e la W 500.
Queste sono le dimensioni dei file.
Questo è l'URL di base e questo è il percorso del file.
Quindi, quello che devo fare è ottenere la dimensione del file w 500 con l'URL di base, copiarla e incollarla qui.
Quindi è necessario ottenere il percorso del poster per farlo dobbiamo ottenerlo dall'oggetto movie dot poster path.
L'oggetto film viene passato qui all'interno del parametro movie item.
È molto semplice, ragazzi.
Questa è la dimensione del file dell'URL di base e questo è il percorso del file, la descrizione del contenuto.
È possibile inserire l'immagine del filmato che si desidera.
Quindi è necessario creare un modificatore distanziale della larghezza del punto di otto dpi.
Poi devo creare una colonna che contenga i due testi.
Impostare un modificatore su questo modificatore di colonna per l'imbottitura del testo a 16 dpi.
Dobbiamo ottenere il testo dal titolo del punto film e lo stile.
Possiamo impostarlo come un'etichetta di tema materiale di grandi dimensioni, un altro filmato di testo, una descrizione o una panoramica.
Tema materiale di stile.
Tipografia punto corpo piccolo.
Ok, questo è l'oggetto del film.
Si tratta di una scheda contenente un'immagine dalla libreria di bobine e una colonna contenente due testi, uno
che mostra il percorso della locandina del film e l'altro il titolo e la panoramica del film.