Tenho a necessidade de carregar uma imagem de anúncio no meu aplicativo e geralmente são logotipos de empresas.
O problema com os logotipos é que, embora eles possam ter uma altura específica, sua largura pode mudar.
Então comecei com uma solução muito simples: carreguei uma imagem png de 90 x 20 no armazenamento do Firebase e usei o código simples:
Image(uiImage: image)
e isso renderizou a imagem em 90 x 20.
Alguns detalhes deixados de fora são que eu faço uma solicitação de rede em segundo plano para baixar esta imagem e então - sinto que isso pode não ser relevante, mas posso adicionar código se necessário.
O problema é que em um dispositivo iPhone 16 (normal e profissional), essas imagens ficam muito borradas.
Então o que eu fiz foi carregar uma imagem 3x, mas o código anterior fez a imagem crescer muito, pois agora as dimensões da imagem eram 270 x 60.
Então, para renderizar a imagem de alta qualidade nas dimensões anteriores, fiz o seguinte:
Image(uiImage: image)
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(height: 20)
// The width of the parent view hosting this had a max width of infinity
Agora isso funcionou e as imagens ficaram mais nítidas. O problema com a especificação de uma altura codificada de 20, nós nos deparamos com o problema com alguns logotipos de empresas sendo um pouco mais altos, então nós criamos uma regra onde a altura máxima do logotipo deveria ser 28, então:
- Se eu carregar 90 x 20, a altura das imagens será 20
- Se eu carregasse 360 x 80, a altura da imagem seria 28
Eu consigo isso através de:
Image(uiImage: image)
.resizable()
.renderingMode(.template)
.tint(Constants.Colors.logo)
.scaledToFit()
.frame(height: min(image.size.height, 28))
Isso funciona para a maioria dos casos de uso, no entanto, se eu quiser que uma imagem seja renderizada em 90 x 20, mas com alta qualidade, e se eu carregar uma imagem em 3x 270 x 60, ela não será renderizada em 90 x 20, mas sim em 126 x 28 porque 28 é a altura máxima.
Embora isso possa ser aceitável, qual seria uma boa maneira de renderizar as imagens 2x e 3x em sua dimensão original em vez de fazer a imagem crescer até a altura máxima de 28?