Image
A Image serve para mostrar imagens e símbolos dentro do seu programa. Estas imagens podem ser carregadas de vários locais diferentes, como:
- Arquivos de imagem na pasta de assets do seu app;
- Instâncias de uma UIImage;
- Símbolos provenientes do SF Symbols.
Existem diversas formas de lidar com uma imagem em SwiftUi, então vamos ver a aplicação de algumas delas.
Inicialmente, precisamos importar uma imagem para o nosso Catálogo de Assets. Vamos dizer que importamos uma imagem chamada “aviao_1”.
Se quiséssemos adicionar ela a nossa view, precisaríamos primeiro criar uma Image passando como parâmetro o nome da imagem que importamos:
Criando um Frame para a Imagem
Assim como outras views em SwiftUI, é possível colocar uma Image em um frame de tamanho específico, dando mais possibilidades para customizar nosso app.
Este frame possui três possíveis parâmetros:
width: Uma largura fixa para a view.
height: Uma altura fixa para a view.
alignment: O alinhamento dentro da view resultante.
Redimensionando a Imagem
Por padrão, a imagem ocupará na tela as mesmas dimensões que tinha originalmente.
Então caso queira mudar seu tamanho para caber na interface do seu aplicativo, é preciso usar o método resizable, que vai redimensionar a imagem para ocupar a view em que está presente.
Aspect Ratio
Ao redimensionar uma imagem, ela será escalada de forma diferente em seus eixos (Altura e largura).
Para preservar as proporções originais se faz necessário utilizar o método aspectRatio, usando uma das duas possíveis estratégias definidas:
contentMode: .fit
Escala a imagem para encaixar em uma view em um eixo, podendo deixar um espaço em branco no outro eixo.
Por exemplo, ela fica dentro da view no eixo vertical (Altura), mas no eixo horizontal (Largura) ela pode extrapolar os limites da view caso a imagem redimensionada seja maior.
contentMode: .fill
Escala a imagem para preencher toda a view.
Mantendo a Imagem Dentro dos Limites de uma View
Um problema recorrente é quando a imagem foi redimensionada, mas passou dos limites de uma view.
Isso pode ser resolvido utilizando o método clipped para cortar o excesso de imagem que está sendo renderizado fora do frame da view.
Repetindo uma Imagem
Se você tiver uma imagem que é bem menor do que o espaço no qual ela será renderizada, é possível utilizar o modificador .tile como fator de redimensionamento, dentro do resizable para repetir esta imagem até preencher a view:
Este método pode ser melhor aplicado caso a imagem usada tenha uma padrão de repetição, criando um aspecto visual de repeticão infinita.
Utilizando Símbolos
A Image também nos permite usar diretamente os elementos gráficos do sistema provenientes do SF Symbols.
Para isso, basta utilizar o parâmetro systemName ao instanciar uma Image, e passar o nome do símbolo correspondente do SF Symbols.
Acessibilidade
É possível tornar o app mais acessível ao possibilitar que os frameworks de acessibilidade do sistema possam interagir com suas imagens.
Definir a propriedade label ao instanciar sua imagem, permite que usuários utilizando o VoiceOver possam interagir com seu app usando o nome das imagens.
Caso a imagem sirva apenas para propósitos estéticos, é possível utilizar o parâmetro decorative. Isso faz o sistema de acessibilidade ignorar estas imagens.