Início / coding / Perguntas / 79543044
Accepted
Shawn Frank
Asked: 2025-03-29 17:30:00 +0800 CST

Como renderizar imagens @2x e @3x de uma URL em uma imagem SwiftUI

  • 772

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:

  1. Se eu carregar 90 x 20, a altura das imagens será 20
  2. 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?

1 respostas

  1. Best Answer

    Você deve criar o UIImageusing init(data:scale:). Este inicializador permite que você especifique a escala e ela será dimensionada de acordo quando for exibida.

    Alternativamente, crie um CGDataProviderusando o que Datavocê obteve, então crie um CGImagea partir disso (por exemplo, este inicializador para pngs). Isso CGImagepermite que você acesse a largura e a altura em pixels, que você pode usar para calcular a escala. Finalmente, crie um SwiftUI Imageusando init(_:scale:orientation:label:), passe o CGImagee a escala. O labelé para acessibilidade.

    • 1

relate perguntas