iOS: Preparación de imágenes de fondo para aplicaciones.

background image view ios

Question

La mayoría de las aplicaciones de iOS tienen una vista con una imagen como fondo. ¿Hay alguna guía de tamaño de imagen por ahí? Por ejemplo aquí hay una pantalla de iOS diseñada en Sketch:

Como puedes ver hay una imagen de fondo. Ahora hay muchos dispositivos Apple que todas las aplicaciones deberían admitir. El nuevo iOS 10 es compatible con todos los dispositivos, desde iPhone 5 hasta iPhone 6s Plus. Tienen diferentes tamaños de pantalla y resoluciones. Al crear los recursos de Xcode, doy 3 imágenes de fondo con diferentes tamaños: @1x, @2x, @3x . ¿Qué tamaños deben tener?

Answer 1

A mi modo de ver tienes 2 opciones:

1. here encontrarás las resoluciones de los iPhone:

• No necesita la imagen @ 1 ya que no es compatible con iPhone 4 y 4s (iOS 10) .
• @ 2 es para iPhone 5,5c, 5S, 6 y 6s, así que básicamente puedes crear una imagen @ 2 de la resolución más alta que es el iPhone 6 y esta imagen funcionará bien para la familia del iPhone 5.
• O bien, puede crear una imagen con resolución para cada iPhone y, utilizando una lógica codificada, configure la imagen para cada teléfono. es decir: if iphone5c { setImage("iphone5cImage") } etc etc.

2. La solución más sencilla es crear 1 imagen con la resolución más alta. El @ 3 es el más alto para el iPhone 6S + y se verá increíble para el resto. No te olvides de configurar la vista de la imagen como relleno de aspecto.

Además, no olvide consultar this hilo: ¿Cómo manejar la escala de la imagen en todas las resoluciones de iPhone disponibles? . Le dará pistas de lo que está tratando exactamente. TL; DR, son las opciones que escribí.

Answer 2

Eche un vistazo a la página en la documentación, hay imágenes de pantalla de inicio estático, y puede capturar tamaños desde allí.

Puede obtener un tamaño de pantalla del dispositivo, usando

CGSize screenSize = [UIScreen mainScreen].bounds.size // (Objective-C)


let screenSize: CGSize = UIScreen.mainScreen().bounds.size // (Swift)

Y después, puede seleccionar mediante programación la imagen que desee del conjunto de imágenes del paquete. O hacer una imagen grande para cambiar el tamaño, usar los conocimientos de la documentación y cambiar el tamaño de una imagen en consecuencia. O ... tu elección.

Diferentes "tamaños" @ 2x, @ 3x es la scale . Y aquí está la buena explicación.

Answer 3

Hay matices de diseño en las imágenes de fondo a tamaño completo. La mayoría de las veces, si el aspecto de la escala es lo suficientemente bueno para los diferentes tamaños, debe diseñar solo el tamaño de dispositivo más grande que el resto de la escala para que se ajuste como es. A veces, una parte del fondo debe mantenerse visible o con el fin de mantener la impresión con poca memoria en conjuntos de dispositivos pequeños, necesita crear alternativas más pequeñas.

Cada vez que tome una decisión con el tamaño de diseño del activo, necesita crear @ 3x, @ 2x variantes.

Una cosa más que debo señalar acerca de los diseños vectoriales. Si su diseño está hecho solo con vectores, puede elegir exportar a pdf vector.Storyboard puede aceptar activos vectoriales y les está yendo muy bien al escalar en fondos completos.

Answer 4

Las imágenes de fondo que solo necesitas proporcionar son @ 2x y @ 3x, porque los dispositivos @ 1x ya han desaparecido en las polvorientas páginas de la historia.

Hablando de @ 2x y @ 3x, las resoluciones de imagen que le das al desarrollador deben ser las mismas con el iPhone de mayor resolución que usa ese tamaño dado.

Para @2x , ese es el iPhone 6, que es 750x1334 , y para @3x , el iPhone 6+ que es 1242x2208 .

La reducción de escala no debería ser un problema porque las relaciones de aspecto de todos los iPhones compatibles con iOS 10 son las mismas (16: 9).

Nota para el desarrollador (s):

The UIImageView will then down-scale the images appropriately,
provided: 

1. you created an image set with the provided @2x and @3x images, 
2. correctly constrainted the UIImageView to the edges of the superview, and
3. selected the Content Mode of the UIImageView as Scale to Fill or Aspect Fill.

Answer 5

Si todavía tienes el mismo problema, puedes probar este. Para esto solo tiene que agregar una imagen con buena resolución y debajo del código.

UIImage *bgImage = [UIImage imageNamed:@"[email protected]"];
CGSize screenSize = [UIScreen mainScreen].bounds.size;
UIGraphicsBeginImageContextWithOptions(screenSize, NO, 0.f);
[bgImage drawInRect:CGRectMake(0.f, 0.f, screenSize.width, screenSize.height)];
UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIColor *backgroundColor = [UIColor colorWithPatternImage:resultImage];
self.view.backgroundColor = backgroundColor;

Answer 6

Uso imágenes de fondo en mis aplicaciones. Para resolver este problema, utilizo una imagen que tiene la resolución para cubrir todos los iPhones y todos los iPad, excepto el grande. El tamaño de la imagen es de 2048x2048 points o 1024x1024 pixels at @2x para cubrir el iPad de 9.7 pulgadas.

La imagen está comprimida en JPG para mantener el tamaño hacia abajo. Tenga en cuenta que lo permito escalar para iPhone 6 Pluse (@ 3x) y 12.7 pulgadas iPad Pro (@ 2x) ya que la calidad no parece verse afectada. Puedo justificar la escala para los dispositivos más grandes, porque si proporcioné una imagen para el iPad Pro de 12.7 pulgadas, será de 5464x4096 points (@ 2x) y 2732x2048 pixels y luego la compresión JPG tendría que ser tan alta (si quisiera mantener el tamaño hacia abajo), que la calidad de la imagen era baja en comparación con la escala.

Si necesita alta calidad, intente comparar JPG y PNG, ya que PNG se vuelve muy grande para imágenes complejas, pero ofrece la mejor calidad.

Answer 7

Hay 3 tipos de dispositivos Apple (iPhone y iPad) que son

Dispositivo normal que equivale a 1 píxel = 1 punto @ 1x (dispositivos iPhone y iPad más antiguos)

Dispositivo de retina que se expresa en 4 píxeles (2 x 2) = 1 punto @ 2x (iPhone 5+)

Retina iPhone6 ​​y iPad con 9 píxeles (3 x 3) = 1 punto @ 3x (iPhone6 ​​+)

Para iOs 10 que no son compatibles con iPhone 4s, solo necesita las imágenes @ 2x y @ 3x.

Como puede ver arriba, la imagen adjunta iPhone 6 también es compatible con @ 2x Scale, así que use el tamaño de imagen para @ 2x es de 750 * 1334 y para @ 3x es de 1242 * 2208 con modo de imagen.