ios - tamaños - ¿Cómo manejar la escala de imagen en todas las resoluciones de iPhone disponibles?
tamaño fotos iphone 6 (9)
¿Qué tamaños serían los mejores para usar en imágenes: background.png, [email protected] y [email protected] si queremos utilizar esta imagen, por ejemplo, para cubrir el ancho y medio 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 Physical PPI Size
iPhone X 812x375 2436x1125 3x 2436x1125 458 5.8"
iPhone 6 Plus 736x414 2208x1242 3x 1920x1080 401 5.5"
iPhone 6 667x375 1334x750 2x 1334x750 326 4.7"
iPhone 5 568x320 1136x640 2x 1136x640 326 4.0"
iPhone 4 480x320 960x640 2x 960x640 326 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3.5"
Algunas personas dicen que para la imagen de borde a borde (como una pancarta en la parte inferior del borde izquierdo al derecho de la pantalla) para iPhone 6 Plus prepararían [email protected] con ancho 1242 y para iPhone 6 [email protected] con 750 de ancho para que coincida con el tamaño de pantalla del iPhone 6, pero no creo que esta sea una buena idea porque 1242/3 = 414 y 750/2 = 375 por lo que nombrarlos como @ 2x y @ 3x no tiene sentido. Y entonces, ¿qué ancho debería tener back.png - 375 o 414?
Los nombres de los gráficos usan los sufijos @ 2x y @ 3x, por lo que si, por ejemplo, [email protected] tiene una resolución de 30x30, lógicamente, imagine que [email protected] 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 [email protected] con un ancho de 414 * 3 = 1242px, [email protected] con un ancho de 414 * 2 = 828px y back.png con ancho 414px. Sin embargo, esto significa que en cada iPhone, excepto en iPhone 6 Plus, necesitarás configurar tus uiimages para usar, por ejemplo, el modo de contenido de ajuste de aspecto y se reducirán para que esto no sea una solución perfecta y probablemente ralentizará la aplicación si usamos mucho scalling en dispositivos más antiguos.
Entonces, ¿cuál crees que sería la mejor solución para resolver este problema?
Creé 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 deberíamos usar diferentes tamaños de imágenes de fondo para diferentes dispositivos. Solo usa imágenes de escala @ 3x para fondo.
Puedes detectar el dispositivo con las líneas a continuación.
#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)
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 el punto), 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 asker.
Dependiendo de los gráficos, en algunos casos podría funcionar bien cuando utilizamos una sola imagen, por ejemplo, un banner con un tamaño de 414 puntos de ancho x 100 puntos de alto (el mayor ancho posible y una altura fija) y lo colocamos en un UIImageView que está fijado a el borde izquierdo y derecho de la pantalla, tiene una altura fija 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 el derecho de la imagen y solo veremos la parte central de la imagen.
No necesita tener cada imagen en todas las escalas si no se va a usar. Haga solo los tamaños que necesita y asígneles un nombre de acuerdo a su ancho. Para las imágenes de retrato de ancho total del dispositivo, necesita 320 píxeles de ancho a 1x y 2x, 375 píxeles de ancho a 2x y 414 píxeles de ancho a 3x.
4 "dispositivos utilizados" -568h "sufijo 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 averigua qué imagen necesitas 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 que admita pantallas nuevas, así que supongo que es bastante seguro asumir que continuarán haciéndolo.
Para la discusión @ 2x y @ 3x, realmente no tiene que preocuparse por eso. Tenga en cuenta el tamaño del punto de la pantalla y asegúrese de que haya activos @ 2x con el doble del tamaño del punto y activos @ 3x con tres veces el tamaño del punto en píxeles. El dispositivo seleccionará automáticamente el correcto. Pero leyendo tu publicación, supongo que ya sabes esto.
Para imágenes de borde a borde, desafortunadamente debe hacerlo para todas las resoluciones de pantalla. Entonces, para un retrato de iPhone, sería 320 puntos, 375 puntos y 414 puntos, donde los 414 puntos uno tendría que ser @ 3x. Una mejor solución puede ser hacer escalables sus imágenes configurando el corte en el constructor de interfaz (si usa catálogos de imágenes, eso es). Pero, dependiendo de la imagen, esta puede o no ser una opción, dependiendo de si la imagen tiene una parte repetible o estirable. Las imágenes escalables configuradas así tienen muy poco impacto en el rendimiento.
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 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 ocupa toda la pantalla, la mayoría de las veces lo único que desea es:
ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / modo Zoom
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 width comparte el mismo valor en el iPhone 5s y iPhone 4s .
Esta es solo la convención de nomenclatura que estoy usando para los recursos que dependen del dispositivo, como una imagen de fondo que ocupa toda la pantalla, la mayoría de las veces lo único que desea es:
ImageName@2x iPhone 4/4s/5/5s/6
ImageName@3x iPhone 6Plus/Zoom mode
el @ 2 y @ 3 no es la escala real de la imagen, sino que solo representa la cantidad real de píxeles que representa un píxel virtual en la pantalla, una especie de hdpi / xhdpi / xxhdpi / blabla del universo de Android. solo muestra al sistema qué imagen debe usarse para la pantalla de algún dispositivo.
así que si necesita usar una imagen de pantalla completa, prepárela de manera dependiente del tamaño real de la pantalla.