¿Por qué no se puede reemplazar el ícono de la aplicación?
En primer lugar, necesitas instalar ImageMagick, que es un paquete de software de gráficos muy potente para procesar gráficos exclusivamente a través del terminal. Puedes instalar ImageMagick muy fácilmente a través de Homebrew. Si no tiene Homebrew instalado, o tal vez no sabe qué es, puede obtener información sobre él e instalarlo en la página de inicio. Si ha instalado Homebrew, abra la terminal e ingrese: brew update Esto es para confirmar si ha instalado el último paquete de instalación de Homebrew. Esto también es para confirmar si ha instalado Homebrew. Entonces, ahora, instale los paquetes de instalación que necesita usando Homebrew. Ahora ingresa el siguiente comando: brew install ImageMagick Verás una serie de cosas que muestran el proceso detallado de instalación de ImageMagick a través de Homebrew, así que sigue los pasos para instalarlo. A continuación, también necesitarás instalar Ghostscript porque el ImageMagick que usarás depende de ello. Ghostscript es un paquete de software para renderizar archivos PDF y PS. Lo necesita porque proporciona fuentes compatibles con ImageMagick. Instale Ghostscript ejecutando el siguiente comando: brew install ghostscript Si ocurre un error en el medio, ejecute este comando: brew doctor Si la instalación falla, recibirá un mensaje y le indicará cómo solucionarlo. Esto es todo lo que necesita instalar para usarlo en este tutorial. Hola Llama Hay muchos comandos en ImageMagick, pero en este tutorial, los que debes usar son convertir y componer (conversión y combinación): convertir: una imagen, modificarla y luego guardarla como una nueva imagen compuesta: una imagen; , superponga otra imagen encima y guárdela como una tercera imagen nueva. Se proporcionan algunos íconos de mapas simples para su uso en este tutorial. Por supuesto, también puedes usar tu propio ícono, pero debes cambiarlo al nombre de archivo correspondiente. Descarga el ícono aquí y, para este tutorial, colócalo en tu escritorio. Uno de los objetivos aquí es anular el ícono de la versión compilada de la aplicación. Entonces verás cómo usar ImageMagick para superponer una imagen de texto y poner Hola Mundo en uno de los íconos. Abra la terminal y vaya a la carpeta donde está el ícono de la aplicación: cd ~/Desktop/AppIconSet Ahora ingrese: convert AppIcon60x60@2x.png -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" test .png Desglosaré esta línea de comando una por una, para que entiendas lo que hace: 1. AppIcon60x60@2x.png es el nombre de la imagen de entrada 2. llenar blanco establece el texto en blanco; fuente Times-Bold Dile a ImageMagick qué fuente usar 4. pointize 18 establece el tamaño de fuente en 18 5. gravitación sur alinea el texto con la parte inferior de la imagen 6. anota 0 "Hello World" le dice a ImageMagick que gire la imagen; la anotación de texto "Hola mundo" El grado es 0 grados. test.png es el nombre del archivo de salida e ImageMagick sobrescribirá el archivo existente.
Si no ve ningún error en el terminal, verá un archivo llamado test.png en la carpeta AppIconSet. Después de abrirlo, verá esto: Consejo: si ve un mensaje de error o el script no funciona. , entonces es posible que no tengas instaladas las fuentes requeridas. Vea qué fuentes están disponibles ejecutando el siguiente comando. convert -list font Si no tienes la fuente Times, elige una que puedas usar en su lugar. Ahora, carga el logo beta en la imagen. Ingrese en la terminal: composite betaRibbon.png test.png test2.png Esto es para colocar betaRibbon.png encima de test.png, luego guarde la imagen sintetizada como test2.png y abra test2.png. Espera, lo que ves sigue siendo el test.png original. Entonces, ¿por qué? El tamaño de test.png es 120x120, sin embargo, betaRibbon.png es 1024x1014, por lo que solo la parte transparente de betaRibbon.png está en test.png y la parte restante está recortada. ¿No me crees? Luego intente con el mismo comando, pero intercambie las ubicaciones de betaRibbon.png y test.png. composite test.png betaRibbon.png test2.png Ahora verá una imagen grande con beta en la esquina superior derecha de test.png: Para obtener lo que queremos, debe cambiar las dimensiones de betaRibbon.png a 120x120. En ImageMagick esto es muy fácil. Simplemente ingrese: convert betaRibbon.png -resize 120x120 smallBetaRibbon.png Esta línea de comando cambia el tamaño de betaRibbon.png a 120x120 y lo guarda como smallRetaRibbon.png. Ahora, ejecute lo siguiente: composite smallBetaRibbon.png test.png test2.png. para abrir test2 .png, y verá lo que estamos buscando: Estas son las características de ImageMagick que necesita conocer para este tutorial, pero son solo la punta del iceberg de lo que ImageMagick puede hacer. Haga clic en la página de inicio de ImageMagick para ver más sobre sus funciones. Después de todo este trabajo de procesamiento de imágenes en Xcode, es hora de volver a la plataforma con la que estamos familiarizados. Abra Xcode, seleccione Archivo\Nuevo\Proyecto... seleccione iOS\Aplicación\Aplicación de vista única y luego haga clic en Siguiente. Nombra el proyecto Llama Trot, selecciona el idioma como Swift y luego configura el dispositivo en Universal. Luego guarda el proyecto. en el escritorio. Su objetivo es generar un ícono apropiado en cada compilación a través de Xcode e ImageMagick, según la configuración de compilación seleccionada. Xcode puede ejecutar scripts para hacer cosas cuando se construye su proyecto. Los scripts de ejecución son simplemente scripts de Unix, como los que usted ha escrito, que se ejecutan cada vez que ejecuta su proyecto Xcode. Configure un script de ejecución en su proyecto, seleccione el objetivo de Llama Trot, luego seleccione Fases de compilación, haga clic en y seleccione Nueva fase de script de ejecución en el menú emergente: Verá la fase de script de ejecución agregada a la configuración de su proyecto. Al ejecutar el script, el parámetro de shell se establece automáticamente en bin/sh, lo que significa que el script se ejecutará en el shell de bash Unix. El cuadro a continuación es para que usted escriba guiones.
Escriba en el cuadro: echo "Hola mundo". Su nueva fase de construcción debería verse así: Construir y ejecutar. Verás que no pasa nada. Esto sucede porque el script imprime "Hola mundo" en su registro de compilación. Haga clic en Report Navigator, el ícono en el extremo derecho del panel de navegación de Xcode, y haga clic en el informe creado recientemente, como se muestra en la siguiente figura. Cuando creas un proyecto, esto describe todo lo que Xcode hace por ti, verás "Hola mundo": el ícono de la aplicación está bien, ahora has escrito un script para generar "Hola mundo", al igual que tú. He hecho esta impresión. "Hola mundo" un millón de veces en mi carrera como desarrollador. Ahora es el momento de modificar el ícono de la aplicación. Busque los íconos de las aplicaciones en su secuencia de comandos. Agregue todos los íconos de las aplicaciones a Images.xcassets y arrastre cada ícono al tamaño de AppIcon apropiado: al mismo tiempo, también colocará debugRibbon.png y betaRibbon.png en un archivo de directorio. al mismo nivel que xcodeproj. Para poder utilizar íconos, su secuencia de comandos necesita saber dónde están los íconos de reconocimiento. Reemplace el script que escribió antes con el siguiente código: echo "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}" echo "${SRCROOT}" 1. La primera línea imprime la ruta a Jiajia después de ejecutar su proyecto, incluido el último ícono . 2. La segunda línea imprime la ruta de la carpeta donde se encuentra el archivo del proyecto. Esta es una variable establecida por alguna compilación usando Xcode. Ejecute su proyecto y vea el informe de compilación. Verá la ruta al archivo que describe el producto final de su proyecto. Debajo, verá la ruta del archivo de su proyecto: navegue hasta la primera carpeta y vea dónde está ubicado, verá todo en su aplicación, incluidos todos los íconos de la aplicación; Aquí es donde se almacena el icono modificado de ImageMagick. Verá estos íconos al hacer clic derecho en el ícono de la aplicación y seleccionar Mostrar contenido del paquete. ¡Ahora todos lucen perfectamente normales! Ahora navegue hasta la segunda ruta del archivo para imprimir. Esta es solo la carpeta para su proyecto normal. Entonces, ¿dónde está el ícono de la aplicación? Vaya al archivo Llama Trot con el mismo nombre. Dentro verás Images.xcassets. Abra Images.xcassets y verá otro archivo llamado AppIcon.appiconset. Los íconos de las aplicaciones están en esta carpeta y los modificará a través de ImageMagick. Supongamos que guarda su proyecto en el escritorio y lo llama Llama Trot, entonces la ruta del ícono es ~/Desktop/Llama\ Trot/Llama\ Trot/Images.xcassets/AppIcon.appiconset. siguiente código, obtendrá la ruta completa del icono original: IFS=$'\n'echo $(find ${SRCROOT} -name "AppIcon60x60@2x.png") 1. La primera línea establece el campo interno de IFS carácter de nueva línea separador. Si no hace esto, la segunda línea fallará porque el nombre del archivo, Llama Trot, contiene un espacio. Si tienes curiosidad por saber qué sucede sin la primera línea, puedes probar eliminándola. 2. En la segunda línea, este comando busca recursivamente en la carpeta ${SRCROOT} el archivo AppIcon60x60@2x.png. Ejecute el proyecto y verá impresa la ruta completa a AppIcon60x60@2x: la parte difícil de armarlo todo ha terminado.
Ahora es el momento de juntarlo todo y modificar el ícono de la aplicación a través de tu script. Comenzará modificando AppIcon60x60@2x.png y luego trabajará en todos los íconos de las aplicaciones. Esto significa que debes realizar la prueba en el emulador Retina@2x o 6Plus. Al combinar las técnicas de ImageMagick con el script anterior, obtendrás el siguiente script. Asegúrese de actualizar los scripts apropiados: IFS=$'\n'#1PATH=${PATH}:/usr/local/bin#2TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AppIcon60x60@2x.png"BASE_IMAGE_PATH =$ (buscar ${SRCROOT} -name "AppIcon60x60@2x.png")#3convert betaRibbon.png -resize 120x120 resizedBetaRibbon.png#4convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravedad sur - annotate 0 "Hello World" - composite resizedBetaRibbon.png - ${TARGET_PATH} Ahora analicemos lo que sucede: 1. Si omites la primera línea, la compilación fallará. Su terminal tiene una variable llamada PATH para almacenar algunos scripts locales predeterminados. La terminal considera que este es el primero de todos los comandos y no forma parte de Unix por defecto. Esto permite ejecutar cualquier comando ubicado en una ruta de directorio sin especificar la ubicación completa del comando. Xcode necesita compartir la misma variable PATH con su terminal. Esta línea agrega /user/local/bin a la variable PATH, donde está instalado Homebrew. 2. En las siguientes dos líneas, obtenga el ícono de la aplicación local y luego guarde la ruta a las variables TARGET_PATH y BASE_IMAGE_PATH respectivamente. 3. Esta línea cambia el tamaño del ícono betaRibbon.png a un tamaño adecuado. hace dos cosas. Primero, agrega el texto "Hola mundo" al ícono de la aplicación original. Luego, el script realiza la función de composición: coloca la imagen con el logotipo beta encima. Luego guarde la imagen sintetizada como ícono de la aplicación. Consejo: Los nombres de los iconos de las aplicaciones no son arbitrarios. En el producto final, el nombre del ícono de la aplicación debe ser como AppIcon60x60@2x.png. Xcode usa esta convención de nomenclatura para determinar qué ícono usar según el dispositivo. Ejecute el proyecto y mire el ícono de su aplicación en la pantalla de inicio de su dispositivo, ya que lo está simulando, puede presionar Cmd Shift H para cambiar a la pantalla de inicio; Verá un ícono modificado: Los íconos restantes Ahora que ha procesado un ícono, es hora de aplicar este script a todos los íconos para que puedan mostrarse en iPad, iPhone 6, etc. Para hacer esto, modificaría el código a una función que tome el nombre del ícono como parámetro. Luego ejecute la función para cada icono.
Modifique el script de la siguiente manera: PATH=${PATH}:/usr/local/binIFS=$'\n'function generateIcon () {BASE_IMAGE_NAME=$1TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME} "BASE_IMAGE_PATH=$(buscar ${SRCROOT} -nombre ${BASE_IMAGE_NAME})WIDTH=$(identificar -formato w ${BASE_IMAGE_PATH})convertir betaRibbon.png -resize $WIDTHx$WIDTH resizedRibbon.pngconvert ${BASE_IMAGE_PATH} -rellenar blanco -font Times-Bold -pointsize 18 -gravedad sur -anotar 0 "Hello World" - composite resizedRibbon.png - ${TARGET_PATH}}generateIcon "AppIcon60x60@2x.png"generateIcon "AppIcon60x60@3x.png"generateIcon "AppIcon76x76~ipad .png"generateIcon "AppIcon76x76@2x~ipad.png" Esto convierte todo el código de procesamiento de imágenes en una función llamada generateIcon(), y usted pasa el nombre del icono al procedimiento como parámetro. El script accede a este argumento usando $1 y establece la variable BASE_IMAGE_PATH.$ { BASE_IMAGE_PATH } y luego coloca AppIcon60x60@2x donde se colocó anteriormente. Descubrirás una nueva función de ImageMagick, Identity, que obtiene información de la imagen. En este caso, desea utilizar el ancho obtenido al formatear -format w en identificar para cambiar el tamaño de betaRibbon.png. Ahora, seleccione un simulador de iPad o iPhone 6 y ejecute el proyecto. Esto se debe a que el tamaño de fuente se expresa en píxeles y las diferentes pantallas de dispositivos tienen diferentes densidades de píxeles. Es muy fácil. Lo que realmente desea es establecer la altura del texto en una cierta proporción basada en todo el ícono. Agregue el siguiente script justo donde configuró la variable WIDTH anteriormente: FONT_SIZE=$(echo "$WIDTH * .15" bc -l) Esta línea es muy sutil, pero establece una variable FONT_SIZE en un ancho variable de cinco una parte . Debido a que la aritmética de Unix no admite operaciones de punto flotante, debe utilizar el programa bc. Abreviatura de calculadora básica, bc puede manejar cálculos de tipos de punto flotante.
Ahora, cambie la última línea de generateIcon() usando la variable FONT_SIZE en lugar de 18. El script final debería verse así: PATH=${PATH}:/usr/local/binIFS=$'\n'function generateIcon () {BASE_IMAGE_NAME= $1TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"BASE_IMAGE_PATH=$(buscar ${SRCROOT} -nombre ${BASE_IMAGE_NAME})WIDTH=$(identificar -formato w ${BASE_IMAGE_PATH} )FONT_SIZE= $(echo "$WIDTH * .15" bc -l)convertir betaRibbon.png -resize $WIDTHx$WIDTH resizedRibbon.pngconvert ${BASE_IMAGE_PATH} -relleno blanco -fuente Times-Bold -pointsize ${FONT_SIZE} -gravity sur -anotar 0 "Hola mundo" - composite resizedRibbon.png - ${TARGET_PATH}}generateIcon "AppIcon60x60@2x.png"generateIcon "AppIcon60x60@3x.png"generateIcon "AppIcon76x76~ipad.png"generateIcon "AppIcon76x76@2x~ipad .png" Ejecute su proyecto en diferentes dispositivos y lo encontrará mucho mejor.