Como lidar com a escala da imagem em todas as resoluções do iPhone disponíveis?

Quais tamanhos seriam os melhores para usar nas imagens: background.png, background@2x.png e background@3x.png se quisermos usar esta imagem, por exemplo, para cobrir toda a largura e meia altura da tela em todas as resoluções para Aplicativo de retrato para iPhone?

Isso é o que temos agora:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

Algumas pessoas dizem que para imagem de ponta a ponta (como um banner na parte inferior da borda esquerda para a direita da tela) para iPhone 6 Plus, eles preparariam back@3x.png com largura 1242 e para iPhone 6 back@2x.png com largura 750 para corresponder ao tamanho da tela do iPhone 6, no entanto, não acho que seja uma boa ideia porque 1242/3 = 414 e 750/2 = 375, portanto, nomeá-los como @ 2x e @ 3x não faz sentido. E então que largura deve ter back.png - 375 ou 414?

Os nomes dos gráficos usam sufixos @ 2x e @ 3x, portanto, se por exemplo image@3x.png tiver resolução de 30x30, o pensamento lógico de image@2x.png deve ter resolução de 20x20 e image.png deve ter 10x10. Isso significa que se quisermos ter uma imagem de largura total nítida para cada tela, provavelmente devemos criar back@3x.png com largura 414 3 = 1242px, back@2x.png com largura 414 2 = 828px e back.png com largura 414px . No entanto, isso significa que em todos os iPhone, exceto no iPhone 6 Plus, você precisará configurar suas uiimages para usar, por exemplo, o modo de conteúdo de ajuste de aspecto e elas serão reduzidas, portanto, esta não é uma solução perfeita e provavelmente tornaria o aplicativo realmente lento se usamos muito scalling em dispositivos mais antigos.

Então, qual você acha que seria a melhor solução para resolver esse problema?

Você não precisa ter cada imagem em todas as escalas se ela não for usada. Faça apenas os tamanhos necessários e nomeie-os de acordo com a largura. Para imagens de largura total do dispositivo em retrato, você precisa de 320 px de largura em 1x e 2x, 375 px de largura em 2x e 414 px de largura em 3x.

4 "dispositivos usaram o sufixo" -568h "para nomear suas imagens de lançamento, então eu recomendo um esquema de nomenclatura semelhante:

• ImageName-320w (@ 1x e @ 2x)
• ImageName-375w (@ 2x)
• ImageName-414w (@ 3x)

Em seguida, descubra de qual imagem você precisa no tempo de execução:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

Isso pode quebrar se outras larguras forem adicionadas no futuro, mas até agora a Apple sempre exigiu a reconstrução do aplicativo para suportar novos monitores, então eu acho que é um pouco seguro assumir que eles continuarão fazendo isso.

Eu pessoalmente estarei fazendo:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

A lógica por trás disso é que ele mostra uma diferença entre todos os dispositivos, enquanto a largura compartilha o mesmo valor no iPhone 5s e no iPhone 4s

Editar:

Esta é apenas a convenção de nomenclatura que estou usando para recursos que dependem do dispositivo, como uma imagem de plano de fundo ocupando a tela inteira, na maioria das vezes tudo o que você deseja é:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / modo Zoom

Para a discussão @ 2x e @ 3x, você realmente não precisa se preocupar com isso. Cuidado com o tamanho do ponto da tela e certifique-se de que haja ativos @ 2x com o dobro do tamanho do ponto e ativos @ 3x com o dobro do tamanho do ponto em pixels. O dispositivo escolherá automaticamente o correto. Mas lendo sua postagem, acho que você já sabe disso.

Para imagens de ponta a ponta, infelizmente você deve fazer isso para todas as resoluções de tela. Então, para um iPhone retrato, seriam 320 pontos, 375 pontos e 414 pontos, onde os 414 pontos um teria que ser @ 3x. Uma solução melhor pode ser tornar suas imagens escaláveis ​​configurando o fatiamento no construtor de interface (se você usar catálogos de imagens, isto é). Mas, dependendo da imagem, isso pode ou não ser uma opção, dependendo se a imagem tem uma parte repetível ou extensível. Imagens escaláveis ​​configuradas como esta têm muito pouco impacto no desempenho.

o @ 2 e @ 3 não é o dimensionamento da imagem real, mas apenas representa quanto pixel real representa um pixel virtual na tela, algum tipo de hdpi / xhdpi / xxhdpi / blabla do universo android. ele apenas mostra ao sistema qual imagem deve ser usada para a tela de algum dispositivo.

portanto, se você precisar usar a imagem da tela inteira - prepare-a de acordo com o tamanho real da tela.

Dependendo dos gráficos em alguns casos, pode funcionar bem quando usamos apenas uma única imagem, por exemplo, um banner com tamanho 414 pontos de largura x 100 pontos de altura (a maior largura possível e alguma altura fixa) e o colocamos em um UIImageView que é fixado em as bordas esquerda e direita da tela fixaram a altura 100 e definiram o modo de preenchimento de aspecto para esse UIImageView. Então, em dispositivos menores, os lados esquerdo e direito da imagem serão cortados e veremos apenas a parte central da imagem.

Criei uma categoria para isso:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

você pode pegar o código completo aqui: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Acho que a melhor solução para imagens de ponta a ponta ou em tela cheia é se preocupar com o tamanho real da tela em pixels (não no ponto), e você deve verificar em tempo de execução o modelo do dispositivo e escolher a imagem apropriada, ou seja:

image-iphone4-4s.png (640x960/2) for 1/2 screen height, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height, image-iphone6-6s.png (750x1334/2) for 1/2 screen height, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

não há necessidade de @? x nesta situação do autor da pergunta.

Acho que devemos usar diferentes tamanhos de imagens de fundo para diferentes dispositivos. Basta usar imagens em escala @ 3x para o fundo.

Você pode detectar o dispositivo com as linhas abaixo.

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)