1
00:00:02,240 --> 00:00:07,730
Agora, o bom é que, obviamente, você não precisa usar essa largura e

2
00:00:07,730 --> 00:00:14,310
altura padrão. Você pode definir o seu. Para que você possa dar um estilo a esta imagem

3
00:00:14,350 --> 00:00:22,490
e eu faço isso, aqui vou adicionar uma propriedade de imagem na folha de estilo e dar a ela uma largura de, digamos, 80% da

4
00:00:22,550 --> 00:00:28,850
visualização principal, 80% dessa visualização da tela, então 80% da largura da tela, portanto, e talvez uma altura de

5
00:00:28,880 --> 00:00:30,260
300 pixels, e

6
00:00:30,260 --> 00:00:36,380
agora podemos atribuir esse estilo de imagem aqui a esse componente de imagem usando o suporte de estilo

7
00:00:36,380 --> 00:00:38,990
ali e apontando para estilos de imagem

8
00:00:39,000 --> 00:00:46,850
como esse; se fizermos isso agora, veremos que é muito melhor e agora a imagem se encaixa na tela e é redimensionada de acordo.

9
00:00:46,850 --> 00:00:50,560
Agora, a propósito, você também pode controlar como a imagem

10
00:00:50,570 --> 00:00:56,420
é redimensionada se definir uma largura e uma altura que não atendam à proporção da imagem

11
00:00:56,420 --> 00:01:02,750
original, portanto, se a proporção entre largura e altura não for a mesma que a imagem arquivo e

12
00:01:02,750 --> 00:01:04,470
as chances são de que

13
00:01:04,610 --> 00:01:12,670
você tenha uma proporção diferente, bem, então você pode definir um modo de redimensionamento aqui e isso é simplesmente uma string onde você

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

15
00:01:13,630 --> 00:01:20,260
escolher entre diferentes opções e, por exemplo, cover é uma opção em que você redimensiona a imagem para

16
00:01:20,260 --> 00:01:26,980
manter sua imagem aspecto e encaixe-o nesta caixa aqui. Para conter, é semelhante, mas para conter, não necessariamente terá a caixa inteira

17
00:01:26,980 --> 00:01:28,330
como você pode ver aqui, aqui

18
00:01:28,360 --> 00:01:33,430
ela contém a imagem e a reduz apenas para que não exceda a largura e a altura da caixa que

19
00:01:33,430 --> 00:01:35,950
reservamos para ela . Para cobertura,

20
00:01:35,950 --> 00:01:41,740
ele também mantém a proporção, mas não reduz a imagem para caber nessa

21
00:01:41,740 --> 00:01:48,430
caixa, apenas recorta a imagem além dos limites do acesso que excederia de outra forma.

22
00:01:48,490 --> 00:01:53,880
Para que possamos simplesmente brincar com essas configurações diferentes para obter a configuração desejada,

23
00:01:53,920 --> 00:02:01,480
a capa é o padrão, mas caso você queira manter a imagem inteira e não a recorte em nenhum eixo,

24
00:02:02,050 --> 00:02:06,770
defina-a como contém e você pode brincar com os outros valores também.

25
00:02:06,790 --> 00:02:09,110
Eu irei com a capa, que novamente é

26
00:02:09,140 --> 00:02:13,960
o padrão, para que você possa remover esse suporte aqui, mas para mostrar que pode definir isso, deixarei aqui.

27
00:02:13,960 --> 00:02:20,390
Agora, isso permite que você adicione uma imagem aqui na tela e, é claro, você pode atribuir

28
00:02:20,410 --> 00:02:24,010
mais estilos; por exemplo, podemos tentar fornecer cantos arredondados

29
00:02:24,010 --> 00:02:30,940
adicionando agora um raio de borda e definindo isso como digamos 200, muito grandes raio da borda para

30
00:02:30,940 --> 00:02:32,800
renderizar uma imagem arredondada.

31
00:02:32,800 --> 00:02:39,580
Agora que parece um pouco estranho, uma maneira melhor de definir isso é simplesmente agrupar

32
00:02:39,580 --> 00:02:48,740
a imagem em uma vista circundante como essa e depois atribuir os estilos que devem adicionar cantos arredondados ou sombras projetadas

33
00:02:48,740 --> 00:02:51,670
ou algo parecido à vista circundante.

34
00:02:51,680 --> 00:02:58,130
Então você pode consultar o suporte do contêiner de imagem ou algo assim e adicioná-lo aqui em sua

35
00:02:58,130 --> 00:03:05,560
folha de estilo e agora nesse contêiner de imagem, você pode configurar um raio de borda de, digamos, 200, talvez

36
00:03:06,240 --> 00:03:10,050
também a largura de 3 e uma borda cor do

37
00:03:10,080 --> 00:03:11,480
preto para que

38
00:03:11,490 --> 00:03:13,660
também tenhamos uma borda visual

39
00:03:13,800 --> 00:03:21,000
e, se fizermos isso e salvarmos, obteremos uma aparência estranha. A razão para isso é que não definimos largura e altura

40
00:03:21,000 --> 00:03:25,770
no contêiner e, portanto, devemos fazer isso e, na verdade, usar a largura e a

41
00:03:25,770 --> 00:03:30,480
altura que estávamos configurando na imagem, defini-la no contêiner e na imagem, podemos Agora, basta

42
00:03:30,480 --> 00:03:36,630
usar uma largura de 100% e uma altura de 100% porque a imagem está dentro desse contêiner. Portanto, 100% aqui

43
00:03:36,630 --> 00:03:40,230
e aqui significa que é preciso a largura e a altura

44
00:03:40,230 --> 00:03:41,610
que estamos configurando

45
00:03:41,730 --> 00:03:47,280
no contêiner, mas agora o contêiner também possui esses valores para que o contêiner seja dimensionado adequadamente.

46
00:03:47,280 --> 00:03:51,660
Agora, o que você pode ver é algo estranho, a imagem se sobrepõe ao contêiner.

47
00:03:51,660 --> 00:03:53,510
Vemos os cantos arredondados, vemos

48
00:03:53,520 --> 00:03:59,700
o círculo aqui no fundo, aqui com esses cantos ou bordas pretas aqui, mas a imagem não

49
00:03:59,700 --> 00:04:03,670
é cortada nesse círculo, por assim dizer, e isso pode ser

50
00:04:03,750 --> 00:04:04,900
alcançado adicionando

51
00:04:04,900 --> 00:04:09,120
outra propriedade no contêiner que contém a imagem e essa é

52
00:04:09,410 --> 00:04:12,650
a propriedade overflow com o valor de hidden.

53
00:04:12,660 --> 00:04:18,030
Isso significa que qualquer criança dentro do contêiner que meio que

54
00:04:18,030 --> 00:04:23,510
sairia do contêiner, que iria além dos limites do contêiner é cortada, será

55
00:04:23,760 --> 00:04:30,420
cortada, de modo que agora espremamos a imagem nesse contêiner com o arredondado cantos que

56
00:04:30,420 --> 00:04:31,440
chegamos aqui.

57
00:04:31,470 --> 00:04:36,490
Agora, o que também podemos adicionar é um pouco de margem no eixo vertical, talvez

58
00:04:36,660 --> 00:04:41,350
30 para ter algum espaçamento em torno da imagem em cima e em baixo

59
00:04:41,520 --> 00:04:44,910
e, com isso, isso não parece tão ruim, eu diria.

60
00:04:44,910 --> 00:04:51,420
Agora, uma coisa que você notará é que ele não parece um círculo perfeito aqui no Android.

61
00:04:51,430 --> 00:04:55,990
A razão para isso é que o raio da borda não é calculado perfeitamente, o raio da borda

62
00:04:55,990 --> 00:04:58,570
deve ter metade da sua largura e altura e o

63
00:04:58,570 --> 00:05:01,060
problema é que a largura e a altura

64
00:05:01,060 --> 00:05:06,380
não são iguais; portanto, devemos renderizar um quadrado aqui e adicionar um raio da borda para obter um círculo perfeito.

65
00:05:06,490 --> 00:05:13,510
Portanto, a solução seria definir a largura de 300 aqui no contêiner de imagem e ter a mesma largura que a altura,

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

67
00:05:13,980 --> 00:05:18,640
agora usar um raio de borda que é metade do que é de 150

68
00:05:18,640 --> 00:05:21,600
e agora obteremos um círculo perfeito nos dois dispositivos.

69
00:05:21,600 --> 00:05:28,480
Isso também significa que em dispositivos muito pequenos, nossa imagem aqui, nosso círculo pode não caber na tela se

70
00:05:28,480 --> 00:05:35,590
os dispositivos tiverem uma tela menor que 300 pixels em relação à sua largura, mas aprenderemos sobre ferramentas, como descobrir qual

71
00:05:35,590 --> 00:05:41,830
largura do dispositivo nosso dispositivo possui e como podemos ajustar os estilos para isso no próximo módulo.

72
00:05:41,830 --> 00:05:47,380
Por enquanto, vamos usar o valor codificado aqui, que fica bem nessas telas aqui e abordaremos novamente

73
00:05:47,500 --> 00:05:50,950
ferramentas que nos ajudarão com outras telas de dispositivos posteriormente.

74
00:05:50,950 --> 00:05:56,380
Então é assim que você pode adicionar uma imagem e como estilizá-la, como torná-la arredondada como você faz aqui, o que

75
00:05:56,380 --> 00:05:59,680
obviamente não precisa fazer, mas que parece bom nesse caso aqui, eu

76
00:05:59,680 --> 00:06:03,420
acho, como você pode fazer isso se você tiver a imagem como um arquivo aqui.

77
00:06:03,430 --> 00:06:05,530
Agora, e se a imagem vier da web?