Cómo subir imágenes a Xcode

Para usar imágenes en Xcode, debe cargarlas en Assets.xcassets, ubicado en la Supporting Filescarpeta. Hay dos opciones con las que puede elegir: mapas de bits (también conocidos como pngarchivos) o vectores (también conocidos como .pdfarchivos). El primer paso es decidir qué tipo de archivo le gustaría usar.

La diferencia entre mapas de bits y activos vectoriales

La mayoría de los tutoriales en línea utilizan activos de mapa de bits, que son .pngarchivos. Esto requiere que arrastre más de 3 copias de la imagen a Xcode.

Sin embargo, existe una escuela de pensamiento que cree que los activos vectoriales son superiores. Este artículo tiene una gran explicación de por qué ese es el caso. Los activos vectoriales son .svgarchivos (o .pdfpara Xcode). Si elige usar activos de vectores, solo necesita cargar una versión de la imagen a Xcode.

Esto es lo que he escuchado de aquellos teléfonos mucho más sabios que I – Android usan algoritmos del activo vectorial para generar la imagen en cualquier tamaño requerido. Tiene sentido dada la gran variedad de dispositivos y tamaños de pantalla para Android.

Sin embargo, los activos vectoriales en iPhones en realidad no se escalan con algoritmos (aparentemente). Por lo tanto, no obtiene imágenes de mayor calidad utilizando vectores sobre mapas de bits. En cambio, lo que obtiene es la misma calidad que el mapa de bits. El iPhone simplemente toma el activo "vector" y lo convierte a los mismos tres tamaños de mapa de bits.

Aparte de la lógica del algoritmo anterior, hay algunasBeneficios más objetivos del uso de activos vectoriales para iPhones.

  1. Reduce la probabilidad de errores humanos. En este momento hay tres tamaños de mapa de bits (1x, 2x, 3x). Eso significa que debe cargar tres imágenes en sus activos. Son tres oportunidades para arrastrar y soltar accidentalmente la imagen incorrecta. Cuando usa activos vectoriales (que aparecen como universales en Xcode), solo necesita cargar una imagen en lugar de tres. Hay menos posibilidades de cargar una imagen o un tamaño incorrecto.
  2. Velocidad. La misma razón que la # 1. Si está utilizando muchas imágenes en su aplicación, el uso de activos vectoriales reduce en un tercio la cantidad de imágenes que necesita cargar.
  3. Prueba de futuro. Actualmente, el iPhone solo usa tres tamaños de imagen (1x, 2x, 3x). Esto tiene que ver con el aumento de la calidad de la retina de las pantallas. Cuando Apple introdujo las pantallas de alta retina hace unos años, la cantidad de píxeles por punto aumentó para obtener una imagen más nítida.

    Parece muy probable que se sigan produciendo aumentos tecnológicos similares. En el futuro, es posible que necesitemos cargar imágenes 4x, 5x y 6x. Si usamos un activo vectorial, la aplicación escalará la imagen por nosotros. Esto nos ahorra tener que introducir los nuevos tamaños del activo de mapa de bits.

    Aunque debo admitir que estoy un poco confundido acerca de esto, dado que los activos vectoriales de iPhone no parecen funcionar realmente en algoritmos. Así que no estoy seguro de cómo se escalarán automáticamente a tamaños más grandes. ¡Pero mi sabio mentor me explicó esto y confío en él!

La gran desventaja de usar activos vectoriales en Xcode es que la mayoría de los lugares no proporcionan el .pdfarchivo. Necesita convertirlo .svgusted mismo.

Actualización del 18 de junio de 2017 : ¡Apple ha anunciado en la WWDC que iOS ahora admite imágenes escalares reales! O al menos, eso creo que anunciaron. Ahora hay aún más razones para usar una sola escala.

Cómo cargar un activo vectorial

Dirígete al menú de atributos. Cambie las escalas a "escala única" y marque la casilla de cambio de tamaño para "conservar los datos vectoriales". Esto cambiará la opción de carga a "todos" en lugar de 1x, 2x, 3x.

A continuación, arrastre y suelte su .pdfarchivo en la única ranura. No estoy muy seguro de cómo convertir .svga .pdftodavía, pero supongo que es bastante fácil con vista previa.

Cómo subir archivos .png

Si decide continuar .png, deberá cargar tres versiones de su archivo. Esto es para cubrir las diferentes resoluciones de pantalla de los diferentes iPhones.

Primero, asegúrese de que la opción "escalas" en el menú de atributos esté configurada en "escalas individuales". Esta es la opción predeterminada y le mostrará tres espacios que debe llenar:

En segundo lugar, busque una imagen que desee utilizar en su aplicación. Supongamos que es este icono:

Vaya, eso es grande. Es porque descargué la versión de 512 píxeles del sitio. Sin embargo, solo quiero que la imagen sea de 20 x 20 píxeles en mi aplicación. Para convertir la imagen a 20 píxeles, cambiaré su tamaño en Vista previa.

Haz tres copias de la imagen original. Los nombres de la imagen debe ser algo como esto: zen.png, [email protected], [email protected]. Lo importante es que todos los archivos tienen el mismo nombre (aquí estoy usando zen) y dos de ellos terminan con @2xy @3x. Cuando utilice esta convención de nomenclatura, Xcode podrá encontrar automáticamente el tamaño correcto según el tipo de dispositivo.

A continuación, abra la imagen en Vista previa y vaya a Herramientas> Ajustar tamaño para que aparezca el menú a continuación. Especifique 20 x 20 píxeles. Presione ok y guarde el cambio. Esta es la imagen base, zen.png.

Haz lo mismo por [email protected]. Solo esto debería ser de 40 x 40 píxeles. Una vez más para [email protected]. Este será de 60 x 60 píxeles.

Ahora puede arrastrar y soltar las imágenes en los cuadros correctos en Xcode. ¡Hecho!