iOS: preparación de imágenes de background para aplicaciones

Sobre todo, cada aplicación de iOS tiene una vista con una image como background. ¿Hay alguna guía de dimensionamiento de imágenes por ahí? Por ejemplo, aquí hay una pantalla de iOS diseñada en Sketch:

introduzca la descripción de la imagen aquí

Como puede ver, hay una image de background. 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 a iPhone 6s Plus. Tienen diferentes tamaños de pantalla y resoluciones. Al crear activos Xcode, estoy dando 3 imágenes de background con diferentes tamaños: @1x, @2x, @3x . ¿Qué tamaños deberían ser?

La forma en que lo veo tiene 2 opciones:

  1. Aquí encontrarás las resoluciones de los iPhone:

resoluciones de la pantalla del iphone

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

  1. La solución más simple es crear 1 image 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 rest. No olvide configurar la vista de la image como relleno de aspecto.

Además, no olvides consultar este hilo: ¿Cómo manejar la escala de imágenes en todas las resoluciones de iPhone disponibles? . Te dará pistas sobre con qué estás lidiando exactamente. TL; DR, son las opciones que escribí.

Las imágenes de background que solo necesita dar son @ 2x y @ 3x, porque los dispositivos @ 1x ya no están en las polvorientas páginas de la historia.

Hablando de @ 2x y @ 3x, las resoluciones de image que le das al desarrollador deberían ser las mismas con la 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 networkingucción de escala no debería ser un problema porque las proporciones de aspecto de todos los iPhones que admiten iOS 10 son iguales (16: 9).

Nota para desarrollador (es):

 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. 

Hay matices de layout en imágenes de background de tamaño completo. Casi si el aspecto de la escala se llena lo suficiente para diferentes tamaños, debe diseñar solo el tamaño del dispositivo más grande que el rest de escalas para adaptarse tal como está. Algunas veces parte del background necesita mantener visible o El propósito de mantener la printing de poca memory en sets de dispositivos pequeños es que necesita crear alternativas más pequeñas.

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

Una cosa más que debo señalar sobre el layout del vector. Si su layout está hecho solo con vectores, puede elegir exportar vector pdf. El tablero de instrumentos puede aceptar activos vectoriales y lo están haciendo muy bien al escalar en backgrounds completos.

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

Puede get un tamaño de pantalla de dispositivo, usando

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

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

Y después de que puede seleccionar mediante progtwigción la image que desea, del set de imágenes del package. O hacer una gran image para cambiar el tamaño, usar conocimientos de la documentation y cambiar el tamaño de una image en consecuencia. O … tu eleccion.

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

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

La image está comprimida JPG para mantener el tamaño networkingucido. Tenga en count que le permite 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 proporciono la image para el iPad Pro de 12.7 pulgadas, serán 5464x4096 points (@ 2x) y 2732x2048 pixels y la compression JPG debería ser tan alta (si quisiera mantener el tamaño hacia abajo), que la calidad de la image era baja en comparación con la escala.

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

Si aún tienes el mismo problema, entonces puedes probar este. Para esto, debe agregar solo una image con buena resolución y debajo del código.

 UIImage *bgImage = [UIImage imageNamed:@"art_background_star@3x.jpg"]; 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; 

introduzca la descripción de la imagen aquí

Hay 3 types de dispositivos Apple (iPhone e iPad) que son

Dispositivo normal que expresa 1 píxel = 1 punto @ 1x (dispositivos iPhone y iPad antiguos)

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

Retina iPhone6 ​​y iPad que términos a 9 píxeles (3 x 3) = 1 punto @ 3x (iPhone6 ​​+)

introduzca la descripción de la imagen aquí

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

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