1
00:00:02,240 --> 00:00:07,730
Ora il bello è che ovviamente non è necessario utilizzare questa larghezza e

2
00:00:07,730 --> 00:00:14,310
altezza predefinite, è possibile impostare le proprie. Quindi puoi dare uno stile a questa immagine e

3
00:00:14,350 --> 00:00:22,490
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%

4
00:00:22,550 --> 00:00:28,850
di questa vista dello schermo, quindi L'80% della larghezza dello schermo quindi e forse un'altezza di 300 pixel

5
00:00:28,880 --> 00:00:30,260
e ora possiamo

6
00:00:30,260 --> 00:00:36,380
assegnare questo stile di immagine qui a questo componente immagine usando il puntello di stile lì e

7
00:00:36,380 --> 00:00:38,990
puntando a stili di immagine come questo

8
00:00:39,000 --> 00:00:46,850
e se lo facciamo ora, vediamo che è molto meglio e ora l'immagine si adatta allo schermo e viene ridimensionata di conseguenza.

9
00:00:46,850 --> 00:00:50,560
A proposito, puoi anche controllare il modo in cui

10
00:00:50,570 --> 00:00:56,420
l'immagine viene ridimensionata se definisci una larghezza e un'altezza che non soddisfano le proporzioni dell'immagine

11
00:00:56,420 --> 00:01:02,750
originale, quindi se le proporzioni larghezza-altezza non sono le stesse dell'immagine il file e le probabilità

12
00:01:02,750 --> 00:01:04,470
sono che tu abbia

13
00:01:04,610 --> 00:01:12,670
un rapporto di aspetto diverso, quindi puoi impostare una modalità di ridimensionamento qui e questa è semplicemente una stringa in cui

14
00:01:12,730 --> 00:01:13,550
puoi

15
00:01:13,630 --> 00:01:20,260
scegliere tra diverse opzioni e ad esempio copertina è un'opzione in cui ridimensionerai l'immagine per mantenere la

16
00:01:20,260 --> 00:01:26,980
sua proporzioni e inseriscilo in questa casella qui. Per contenere, è simile ma per contenere, non necessariamente occuperà l'intera scatola

17
00:01:26,980 --> 00:01:28,330
come puoi vedere qui, qui

18
00:01:28,360 --> 00:01:33,430
contiene l'immagine e semplicemente la restringe in modo che non superi la larghezza e l'altezza della scatola che

19
00:01:33,430 --> 00:01:35,950
ci riserviamo . Per quanto

20
00:01:35,950 --> 00:01:41,740
riguarda la copertura, mantiene anche le proporzioni, ma non necessariamente riduce l'immagine per

21
00:01:41,740 --> 00:01:48,430
adattarla a questa casella, invece ritaglia semplicemente l'immagine oltre i confini dell'accesso che altrimenti supererebbe.

22
00:01:48,490 --> 00:01:53,880
Quindi possiamo semplicemente giocare con queste diverse impostazioni per ottenere l'impostazione desiderata, la copertina è

23
00:01:53,920 --> 00:02:01,480
l'impostazione predefinita ma nel caso in cui si desideri mantenere l'intera immagine e non si desidera ritagliarla su nessun asse, è

24
00:02:02,050 --> 00:02:06,770
possibile impostarla su contenere e puoi giocare anche con gli altri valori.

25
00:02:06,790 --> 00:02:09,110
Vado con copertina che è di nuovo

26
00:02:09,140 --> 00:02:13,960
l'impostazione predefinita, quindi puoi rimuovere questo oggetto qui ma per mostrare che puoi impostarlo, lo lascerò qui.

27
00:02:13,960 --> 00:02:20,390
Ora questo ti permette di aggiungere un'immagine qui sullo schermo e ovviamente puoi assegnare più stili, ad

28
00:02:20,410 --> 00:02:24,010
esempio potremmo provare a dare questi angoli arrotondati aggiungendo

29
00:02:24,010 --> 00:02:30,940
ora un raggio di confine qui e impostandolo su diciamo 200, così grande raggio del bordo per il

30
00:02:30,940 --> 00:02:32,800
rendering di un'immagine arrotondata.

31
00:02:32,800 --> 00:02:39,580
Ora sembra un po 'strano, un modo migliore di impostare questo è semplicemente avvolgere l'immagine

32
00:02:39,580 --> 00:02:48,740
in una vista circostante come questa e quindi assegnare gli stili che dovrebbero aggiungere angoli arrotondati o rilasciare ombre o qualcosa

33
00:02:48,740 --> 00:02:51,670
del genere a quella vista circostante.

34
00:02:51,680 --> 00:02:58,130
Quindi lì puoi fare riferimento all'elica del contenitore di immagini o qualcosa del genere e aggiungerla qui nel tuo

35
00:02:58,130 --> 00:03:05,560
foglio di stile e ora su quel contenitore di immagini, potresti impostare un raggio del bordo di diciamo 200, forse anche una

36
00:03:06,240 --> 00:03:10,050
larghezza del bordo di 3 e un bordo colore del nero

37
00:03:10,080 --> 00:03:11,480
in modo da

38
00:03:11,490 --> 00:03:13,660
avere anche un bordo visivo e

39
00:03:13,800 --> 00:03:21,000
se lo facciamo e lo salviamo, otteniamo questo strano aspetto. Il motivo di ciò è che non abbiamo impostato una larghezza

40
00:03:21,000 --> 00:03:25,770
e un'altezza sul contenitore e quindi dovremmo farlo e effettivamente usare la larghezza e l'altezza

41
00:03:25,770 --> 00:03:30,480
che stavamo impostando sull'immagine, impostarla sul contenitore invece e sull'immagine, possiamo ora usa semplicemente una

42
00:03:30,480 --> 00:03:36,630
larghezza del 100% e un'altezza del 100% perché l'immagine è all'interno di questo contenitore, quindi un 100% qui e

43
00:03:36,630 --> 00:03:40,230
qui significa che prende la larghezza e l'altezza che stiamo impostando

44
00:03:40,230 --> 00:03:41,610
sul contenitore ma

45
00:03:41,730 --> 00:03:47,280
ora anche il contenitore ha questi valori in modo che il contenitore sia dimensionato in modo appropriato.

46
00:03:47,280 --> 00:03:51,660
Ora quello che puoi vedere è qualcosa di strano, l'immagine si sovrappone al contenitore.

47
00:03:51,660 --> 00:03:53,510
Vediamo gli angoli arrotondati, vediamo

48
00:03:53,520 --> 00:03:59,700
il cerchio qui sullo sfondo, qui con questi angoli o bordi neri qui ma l'immagine non è

49
00:03:59,700 --> 00:04:03,670
ritagliata in quel cerchio per così dire e ciò può essere

50
00:04:03,750 --> 00:04:04,900
ottenuto aggiungendo

51
00:04:04,900 --> 00:04:09,120
un'altra proprietà sul contenitore che contiene l'immagine e questa è la

52
00:04:09,410 --> 00:04:12,650
proprietà di overflow con il valore di hidden.

53
00:04:12,660 --> 00:04:18,030
Ciò significa che qualsiasi bambino all'interno del contenitore che si spezzerebbe

54
00:04:18,030 --> 00:04:23,510
dal contenitore, che andrebbe oltre i confini di quel contenitore viene effettivamente troncato,

55
00:04:23,760 --> 00:04:30,420
viene tagliato in modo che ora comprimiamo l'immagine in quel contenitore con il angoli siamo

56
00:04:30,420 --> 00:04:31,440
arrivati qui.

57
00:04:31,470 --> 00:04:36,490
Ora, ciò che possiamo anche aggiungere è un po 'di margine sull'asse verticale, forse

58
00:04:36,660 --> 00:04:41,350
di 30 per avere una spaziatura attorno all'immagine in alto e in basso

59
00:04:41,520 --> 00:04:44,910
e con ciò, direi che non sembra male.

60
00:04:44,910 --> 00:04:51,420
Ora una cosa che noterai è che non sembra un cerchio perfetto qui su Android.

61
00:04:51,430 --> 00:04:55,990
Il motivo è che il nostro raggio del bordo non è calcolato perfettamente, il raggio del bordo dovrebbe

62
00:04:55,990 --> 00:04:58,570
essere metà della tua larghezza e altezza e il problema

63
00:04:58,570 --> 00:05:01,060
è che la larghezza e l'altezza non sono

64
00:05:01,060 --> 00:05:06,380
uguali, quindi dovremmo effettivamente rendere un quadrato qui e quindi aggiungere un raggio del bordo per ottenere un cerchio perfetto.

65
00:05:06,490 --> 00:05:13,510
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

66
00:05:13,510 --> 00:05:13,960
quindi

67
00:05:13,980 --> 00:05:18,640
e ora utilizziamo un raggio del bordo che è la metà di quello che è 150

68
00:05:18,640 --> 00:05:21,600
e ora otterremo un cerchio perfetto su entrambi dispositivi.

69
00:05:21,600 --> 00:05:28,480
Questo significa anche che su dispositivi molto piccoli, la nostra immagine qui, il nostro cerchio potrebbe non adattarsi allo schermo se

70
00:05:28,480 --> 00:05:35,590
i dispositivi hanno uno schermo più piccolo di 300 pixel rispetto alla sua larghezza, ma impareremo a conoscere gli strumenti, come scoprire

71
00:05:35,590 --> 00:05:41,830
quale larghezza del dispositivo il nostro dispositivo ha e come possiamo adattare gli stili a quelli nel prossimo modulo.

72
00:05:41,830 --> 00:05:47,380
Per ora andiamo con il valore hardcoded qui che sembra buono su queste schermate qui e tratteremo di nuovo strumenti

73
00:05:47,500 --> 00:05:50,950
che ci aiuteranno con le schermate di altri dispositivi in seguito.

74
00:05:50,950 --> 00:05:56,380
Quindi è così che puoi aggiungere un'immagine e come puoi modellarla, come puoi farla arrotondare come fai qui, cosa che

75
00:05:56,380 --> 00:05:59,680
ovviamente non è necessario fare ma che sembra carina in questo

76
00:05:59,680 --> 00:06:03,420
caso qui penso, come puoi fare questo se hai l'immagine come file qui.

77
00:06:03,430 --> 00:06:05,530
E se l'immagine venisse dal web però?