Agora, o bom é que, obviamente, você não precisa usar essa largura e
altura padrão. Você pode definir o seu. Para que você possa dar um estilo a esta imagem
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
visualização principal, 80% dessa visualização da tela, então 80% da largura da tela, portanto, e talvez uma altura de
300 pixels, e
agora podemos atribuir esse estilo de imagem aqui a esse componente de imagem usando o suporte de estilo
ali e apontando para estilos de imagem
como esse; se fizermos isso agora, veremos que é muito melhor e agora a imagem se encaixa na tela e é redimensionada de acordo.
Agora, a propósito, você também pode controlar como a imagem
é redimensionada se definir uma largura e uma altura que não atendam à proporção da imagem
original, portanto, se a proporção entre largura e altura não for a mesma que a imagem arquivo e
as chances são de que
você tenha uma proporção diferente, bem, então você pode definir um modo de redimensionamento aqui e isso é simplesmente uma string onde você
pode
escolher entre diferentes opções e, por exemplo, cover é uma opção em que você redimensiona a imagem para
manter sua imagem aspecto e encaixe-o nesta caixa aqui. Para conter, é semelhante, mas para conter, não necessariamente terá a caixa inteira
como você pode ver aqui, aqui
ela contém a imagem e a reduz apenas para que não exceda a largura e a altura da caixa que
reservamos para ela . Para cobertura,
ele também mantém a proporção, mas não reduz a imagem para caber nessa
caixa, apenas recorta a imagem além dos limites do acesso que excederia de outra forma.
Para que possamos simplesmente brincar com essas configurações diferentes para obter a configuração desejada,
a capa é o padrão, mas caso você queira manter a imagem inteira e não a recorte em nenhum eixo,
defina-a como contém e você pode brincar com os outros valores também.
Eu irei com a capa, que novamente é
o padrão, para que você possa remover esse suporte aqui, mas para mostrar que pode definir isso, deixarei aqui.
Agora, isso permite que você adicione uma imagem aqui na tela e, é claro, você pode atribuir
mais estilos; por exemplo, podemos tentar fornecer cantos arredondados
adicionando agora um raio de borda e definindo isso como digamos 200, muito grandes raio da borda para
renderizar uma imagem arredondada.
Agora que parece um pouco estranho, uma maneira melhor de definir isso é simplesmente agrupar
a imagem em uma vista circundante como essa e depois atribuir os estilos que devem adicionar cantos arredondados ou sombras projetadas
ou algo parecido à vista circundante.
Então você pode consultar o suporte do contêiner de imagem ou algo assim e adicioná-lo aqui em sua
folha de estilo e agora nesse contêiner de imagem, você pode configurar um raio de borda de, digamos, 200, talvez
também a largura de 3 e uma borda cor do
preto para que
também tenhamos uma borda visual
e, se fizermos isso e salvarmos, obteremos uma aparência estranha. A razão para isso é que não definimos largura e altura
no contêiner e, portanto, devemos fazer isso e, na verdade, usar a largura e a
altura que estávamos configurando na imagem, defini-la no contêiner e na imagem, podemos Agora, basta
usar uma largura de 100% e uma altura de 100% porque a imagem está dentro desse contêiner. Portanto, 100% aqui
e aqui significa que é preciso a largura e a altura
que estamos configurando
no contêiner, mas agora o contêiner também possui esses valores para que o contêiner seja dimensionado adequadamente.
Agora, o que você pode ver é algo estranho, a imagem se sobrepõe ao contêiner.
Vemos os cantos arredondados, vemos
o círculo aqui no fundo, aqui com esses cantos ou bordas pretas aqui, mas a imagem não
é cortada nesse círculo, por assim dizer, e isso pode ser
alcançado adicionando
outra propriedade no contêiner que contém a imagem e essa é
a propriedade overflow com o valor de hidden.
Isso significa que qualquer criança dentro do contêiner que meio que
sairia do contêiner, que iria além dos limites do contêiner é cortada, será
cortada, de modo que agora espremamos a imagem nesse contêiner com o arredondado cantos que
chegamos aqui.
Agora, o que também podemos adicionar é um pouco de margem no eixo vertical, talvez
30 para ter algum espaçamento em torno da imagem em cima e em baixo
e, com isso, isso não parece tão ruim, eu diria.
Agora, uma coisa que você notará é que ele não parece um círculo perfeito aqui no Android.
A razão para isso é que o raio da borda não é calculado perfeitamente, o raio da borda
deve ter metade da sua largura e altura e o
problema é que a largura e a altura
não são iguais; portanto, devemos renderizar um quadrado aqui e adicionar um raio da borda para obter um círculo perfeito.
Portanto, a solução seria definir a largura de 300 aqui no contêiner de imagem e ter a mesma largura que a altura,
e
agora usar um raio de borda que é metade do que é de 150
e agora obteremos um círculo perfeito nos dois dispositivos.
Isso também significa que em dispositivos muito pequenos, nossa imagem aqui, nosso círculo pode não caber na tela se
os dispositivos tiverem uma tela menor que 300 pixels em relação à sua largura, mas aprenderemos sobre ferramentas, como descobrir qual
largura do dispositivo nosso dispositivo possui e como podemos ajustar os estilos para isso no próximo módulo.
Por enquanto, vamos usar o valor codificado aqui, que fica bem nessas telas aqui e abordaremos novamente
ferramentas que nos ajudarão com outras telas de dispositivos posteriormente.
Então é assim que você pode adicionar uma imagem e como estilizá-la, como torná-la arredondada como você faz aqui, o que
obviamente não precisa fazer, mas que parece bom nesse caso aqui, eu
acho, como você pode fazer isso se você tiver a imagem como um arquivo aqui.
Agora, e se a imagem vier da web?