¿Cómo manejar la escala de imagen en todas las resoluciones de iPhone disponibles?

¿Qué tamaños sería mejor usar para las imágenes: background.png, background@2x.png y background@3x.png si queremos usar esta imagen, por ejemplo, para cubrir el ancho completo y la mitad de la altura de la pantalla en todas las resoluciones para aplicación de retrato de iPhone?

Esto es lo que tenemos ahora:

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"

Algunas personas dicen que para la imagen de borde a borde (como un banner en la parte inferior desde el borde izquierdo al derecho de la pantalla) para iPhone 6 Plus, prepararían back@3x.png con ancho 1242 y para iPhone 6 back@2x.png con ancho 750 para que coincida con el tamaño de la pantalla del iPhone 6, sin embargo, no creo que sea una buena idea porque 1242/3 = 414 y 750/2 = 375, por lo que nombrarlos como @ 2x y @ 3x no tiene sentido. Y luego, ¿qué ancho debería tener back.png - 375 o 414?

Los nombres de los gráficos utilizan los sufijos @ 2x y @ 3x, por lo que si, por ejemplo, image@3x.png tiene una resolución de 30x30, entonces, lógicamente, image@2x.png debería tener una resolución de 20x20 y image.png debería ser de 10x10. Esto significa que si queremos tener una imagen nítida de ancho completo para cada pantalla, entonces probablemente deberíamos crear back@3x.png con ancho 414 3 = 1242px, back@2x.png con ancho 414 2 = 828px y back.png con ancho 414px . Sin embargo, esto significa que en todos los iPhone, excepto en el iPhone 6 Plus, deberá configurar sus imágenes de interfaz de usuario para usar, por ejemplo, el modo de contenido de ajuste de aspecto y se reducirán, por lo que nuevamente esta no es una solución perfecta y probablemente ralentizaría la aplicación si utilizamos mucho escalado en dispositivos más antiguos.

Entonces, ¿cuál crees que sería la mejor solución para resolver este problema?

No es necesario que tenga cada imagen en todas las escalas si no se utilizará. Haga solo los tamaños que necesite y nómbrelos de acuerdo con su ancho. Para imágenes verticales de ancho de dispositivo completo, necesita 320px de ancho a 1x y 2x, 375px de ancho a 2x y 414px de ancho a 3x.

Los dispositivos de 4 "usaban el sufijo" -568h "para nombrar sus imágenes de lanzamiento, por lo que recomendaría un esquema de nombres similar:

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

Luego, averigüe qué imagen necesita en tiempo de ejecución:

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

Esto podría romperse si se agregan otros anchos en el futuro, pero hasta ahora Apple siempre ha requerido reconstruir la aplicación para admitir nuevas pantallas, así que supongo que es algo seguro asumir que continuarán haciéndolo.

Yo personalmente estaré haciendo:

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

La lógica detrás de esto es que muestra una diferencia entre todos los dispositivos, mientras que el ancho comparte el mismo valor en el iPhone 5s y el iPhone 4s.

Editar:

Esta es solo la convención de nomenclatura que estoy usando para los recursos que dependen del dispositivo, como una imagen de fondo que toma toda la pantalla, la mayoría de las veces todo lo que desea es:

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

Para la discusión de @ 2x y @ 3x, realmente no tiene que preocuparse por eso. Tenga cuidado con el tamaño en puntos de la pantalla y asegúrese de que haya recursos @ 2x con el doble del tamaño en puntos y recursos @ 3x con el triple del tamaño en píxeles. El dispositivo seleccionará automáticamente el correcto. Pero al leer tu publicación supongo que ya lo sabes.

Para imágenes de borde a borde, desafortunadamente debe hacerlo para todas las resoluciones de pantalla. Entonces, para un iPhone vertical, serían 320 puntos, 375 puntos y 414 puntos, donde los 414 puntos tendrían que ser @ 3x. Una mejor solución puede ser hacer que sus imágenes sean escalables configurando la división en el generador de interfaces (si usa catálogos de imágenes, claro está). Pero, dependiendo de la imagen, esto puede ser una opción o no, dependiendo de si la imagen tiene una parte repetible o extensible. Las imágenes escalables configuradas como esta tienen muy poco impacto en el rendimiento.

@ 2 y @ 3 no es la escala de imagen real, sino que solo representan la cantidad de píxel real que representa un píxel virtual en la pantalla, una especie de hdpi / xhdpi / xxhdpi / blabla del universo Android. solo muestra al sistema qué imagen debe usarse para la pantalla de algún dispositivo.

por lo tanto, si necesita usar una imagen de pantalla completa, prepárela en función del tamaño de pantalla real.

Dependiendo de los gráficos, en algunos casos, podría funcionar bien cuando usamos una sola imagen, por ejemplo, un banner con un tamaño de 414 puntos de ancho x 100 puntos de alto (el ancho más grande posible y una altura fija) y lo colocamos en un UIImageView que está anclado a el borde izquierdo y derecho de la pantalla, tiene una altura fija de 100 y establece el modo de relleno de aspecto para ese UIImageView. Luego, en dispositivos más pequeños, se cortará el lado izquierdo y derecho de la imagen y solo veremos la parte central de la imagen.

He creado una categoría para esto:

+ (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;
}

puede tomar el código completo aquí: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Creo que la mejor solución para las imágenes de borde a borde o de pantalla completa es preocuparse por el tamaño real de la pantalla en píxeles (no en puntos), y debe verificar en tiempo de ejecución el modelo del dispositivo y elegir la imagen adecuada, es decir:

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,

no hay necesidad de @? x en esta situación del autor de la pregunta.

Creo que deberíamos usar diferentes tamaños de imágenes de fondo para diferentes dispositivos. Simplemente use imágenes a escala @ 3x para el fondo.

Puede detectar el dispositivo con las siguientes líneas.

#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)