Ora il bello è che ovviamente non è necessario utilizzare questa larghezza e
altezza predefinite, è possibile impostare le proprie. Quindi puoi dare uno stile a questa immagine e
lo farò, qui aggiungerò una proprietà immagine nel foglio di stile e darò una larghezza di diciamo l'80% della vista principale, quindi l'80%
di questa vista dello schermo, quindi L'80% della larghezza dello schermo quindi e forse un'altezza di 300 pixel
e ora possiamo
assegnare questo stile di immagine qui a questo componente immagine usando il puntello di stile lì e
puntando a stili di immagine come questo
e se lo facciamo ora, vediamo che è molto meglio e ora l'immagine si adatta allo schermo e viene ridimensionata di conseguenza.
A proposito, puoi anche controllare il modo in cui
l'immagine viene ridimensionata se definisci una larghezza e un'altezza che non soddisfano le proporzioni dell'immagine
originale, quindi se le proporzioni larghezza-altezza non sono le stesse dell'immagine il file e le probabilità
sono che tu abbia
un rapporto di aspetto diverso, quindi puoi impostare una modalità di ridimensionamento qui e questa è semplicemente una stringa in cui
puoi
scegliere tra diverse opzioni e ad esempio copertina è un'opzione in cui ridimensionerai l'immagine per mantenere la
sua proporzioni e inseriscilo in questa casella qui. Per contenere, è simile ma per contenere, non necessariamente occuperà l'intera scatola
come puoi vedere qui, qui
contiene l'immagine e semplicemente la restringe in modo che non superi la larghezza e l'altezza della scatola che
ci riserviamo . Per quanto
riguarda la copertura, mantiene anche le proporzioni, ma non necessariamente riduce l'immagine per
adattarla a questa casella, invece ritaglia semplicemente l'immagine oltre i confini dell'accesso che altrimenti supererebbe.
Quindi possiamo semplicemente giocare con queste diverse impostazioni per ottenere l'impostazione desiderata, la copertina è
l'impostazione predefinita ma nel caso in cui si desideri mantenere l'intera immagine e non si desidera ritagliarla su nessun asse, è
possibile impostarla su contenere e puoi giocare anche con gli altri valori.
Vado con copertina che è di nuovo
l'impostazione predefinita, quindi puoi rimuovere questo oggetto qui ma per mostrare che puoi impostarlo, lo lascerò qui.
Ora questo ti permette di aggiungere un'immagine qui sullo schermo e ovviamente puoi assegnare più stili, ad
esempio potremmo provare a dare questi angoli arrotondati aggiungendo
ora un raggio di confine qui e impostandolo su diciamo 200, così grande raggio del bordo per il
rendering di un'immagine arrotondata.
Ora sembra un po 'strano, un modo migliore di impostare questo è semplicemente avvolgere l'immagine
in una vista circostante come questa e quindi assegnare gli stili che dovrebbero aggiungere angoli arrotondati o rilasciare ombre o qualcosa
del genere a quella vista circostante.
Quindi lì puoi fare riferimento all'elica del contenitore di immagini o qualcosa del genere e aggiungerla qui nel tuo
foglio di stile e ora su quel contenitore di immagini, potresti impostare un raggio del bordo di diciamo 200, forse anche una
larghezza del bordo di 3 e un bordo colore del nero
in modo da
avere anche un bordo visivo e
se lo facciamo e lo salviamo, otteniamo questo strano aspetto. Il motivo di ciò è che non abbiamo impostato una larghezza
e un'altezza sul contenitore e quindi dovremmo farlo e effettivamente usare la larghezza e l'altezza
che stavamo impostando sull'immagine, impostarla sul contenitore invece e sull'immagine, possiamo ora usa semplicemente una
larghezza del 100% e un'altezza del 100% perché l'immagine è all'interno di questo contenitore, quindi un 100% qui e
qui significa che prende la larghezza e l'altezza che stiamo impostando
sul contenitore ma
ora anche il contenitore ha questi valori in modo che il contenitore sia dimensionato in modo appropriato.
Ora quello che puoi vedere è qualcosa di strano, l'immagine si sovrappone al contenitore.
Vediamo gli angoli arrotondati, vediamo
il cerchio qui sullo sfondo, qui con questi angoli o bordi neri qui ma l'immagine non è
ritagliata in quel cerchio per così dire e ciò può essere
ottenuto aggiungendo
un'altra proprietà sul contenitore che contiene l'immagine e questa è la
proprietà di overflow con il valore di hidden.
Ciò significa che qualsiasi bambino all'interno del contenitore che si spezzerebbe
dal contenitore, che andrebbe oltre i confini di quel contenitore viene effettivamente troncato,
viene tagliato in modo che ora comprimiamo l'immagine in quel contenitore con il angoli siamo
arrivati qui.
Ora, ciò che possiamo anche aggiungere è un po 'di margine sull'asse verticale, forse
di 30 per avere una spaziatura attorno all'immagine in alto e in basso
e con ciò, direi che non sembra male.
Ora una cosa che noterai è che non sembra un cerchio perfetto qui su Android.
Il motivo è che il nostro raggio del bordo non è calcolato perfettamente, il raggio del bordo dovrebbe
essere metà della tua larghezza e altezza e il problema
è che la larghezza e l'altezza non sono
uguali, quindi dovremmo effettivamente rendere un quadrato qui e quindi aggiungere un raggio del bordo per ottenere un cerchio perfetto.
Quindi la soluzione potrebbe essere quella di impostare qui la larghezza di 300 sul contenitore dell'immagine e di avere la stessa larghezza dell'altezza
quindi
e ora utilizziamo un raggio del bordo che è la metà di quello che è 150
e ora otterremo un cerchio perfetto su entrambi dispositivi.
Questo significa anche che su dispositivi molto piccoli, la nostra immagine qui, il nostro cerchio potrebbe non adattarsi allo schermo se
i dispositivi hanno uno schermo più piccolo di 300 pixel rispetto alla sua larghezza, ma impareremo a conoscere gli strumenti, come scoprire
quale larghezza del dispositivo il nostro dispositivo ha e come possiamo adattare gli stili a quelli nel prossimo modulo.
Per ora andiamo con il valore hardcoded qui che sembra buono su queste schermate qui e tratteremo di nuovo strumenti
che ci aiuteranno con le schermate di altri dispositivi in seguito.
Quindi è così che puoi aggiungere un'immagine e come puoi modellarla, come puoi farla arrotondare come fai qui, cosa che
ovviamente non è necessario fare ma che sembra carina in questo
caso qui penso, come puoi fare questo se hai l'immagine come file qui.
E se l'immagine venisse dal web però?