thxou

Ama la sabiduría. Desea el conocimiento.

iOS: Textos Con Fuente Personalizada Usando UIFont

| Comments

Es muy probable que ya te hayas encontrado con algunas aplicaciones que no utilizan el tipo de fuente por defecto del sistema, y que esto, junto con una buena interfaz gráfica, lucen mucho mejor. No tengo ni idea como estos desarrolladores lo han hecho, pero aquí te muestro una forma sencilla de hacerlo usando un método llamado fontWithName:size: de la clase UIFont. Este método de clase nos devuelve un objeto de fuente para un nombre y tamaño personalizado y lo aplicamos a la propiedad font de algunos objetos como: UILabel, UITextField, UITextView, UIButton, etc. Las fuentes personalizadas están disponibles desde iOS 3.2 en adelante, incluido iOS 5, así que asumo que cumples los requisitos para seguir el tutorial sin problemas.

Vamos a crear un proyecto desde cero para mostrar paso a paso el sencillo procedimiento que hay que seguir para configurar las fuentes y luego utilizarlas. Lo primero es crear un nuevo proyecto, yo he usado un Single View Application y le he puesto de nombre ChangeFont.

Paso 1. Añadiendo las fuentes

Una vez tengamos nuestro proyecto ya creado, vamos a buscar las fuentes que queremos utilizar dentro de nuestra aplicación. Para esto pueden ir a páginas web como fontreactor, que es el lugar de donde yo saqué las mías para hacer este tutorial. Las fuentes deben tener extensión .ttf u .otf.

Una vez ya las tengamos descargadas, arrastramos los archivos con extensión .ttf u .otf al árbol de directorios de nuestra aplicación en XCode (El Bundle). Nos saldrá una ventana como esta:

Si no está seleccionado desde antes, pues selecciona la opción: ”Copy items into destination group’s folder (id needed)”, esto hará que las fuentes (en general cualquier fichero) se copien también en el Bundle de la aplicación y no solo se guarde una referencia a la ubicación original. Aquí también hay algo que notar, y es que en el apartado ”add to targets”, los targets aparecen sin seleccionar. No seleccionar uno causará que no se muestren las fuentes cambiadas y esto es un problema que más tarde puede ser difícil de descubrir, por lo tanto nosotros lo seleccionaremos y luego daremos click en ”Finish”.

En caso de que se te pasara por alto marcar el target en alguna otra aplicación, la solución es seleccionar en la lista de directorios de la izquierda, la raíz del proyecto. Luego seleccionar el target (ChangeFont en nuestro caso) y después ir al apartado ”Build Phases” (Fases de construcción). Aquí encontraremos la fase ”Copy Bundle Resourses”. Cuando la aplicación es compilada para mostrarse en el simulador (o el dispositivo), esta fase se encarga de copiar todo lo que tenemos en la lista al Bundle del ejecutable de la aplicación. Así, al no seleccionar el target anteriormente, no añadimos las fuentes a esta lista y por lo tanto le dijimos a XCode que no incluya las fuentes cuando se compile el proyecto.

Así que si no lo hicimos ya, hacemos clic en el botón ”+” y añadimos las fuentes al Copy Bundle Resourses.

Paso 2. Configurar el archivo info.plist

Lo siguiente será añadir una nueva key al archivo info.plist de la aplicación. Lo abrimos y añadimos una nueva entrada llamada UIAppFonts (Al presionar enter, cambiará automáticamente de nombre a ”Fonts provided by application”). Esta key es en realidad un array, y en cada campo de este array escribiremos el nombre exacto de cada una de las fuentes que hayamos añadido a nuestro Bundle, con la extensión del fichero incluida como se puede ser en la siguiente imagen.


Esto sería todo lo que a configurar las fuentes se refiere. Ahora pasemos a tocar un poco de código.

Paso 3. Coding!

Para mostrar los resultados de esto, he creado 5 Outlets UILabel y los he conectado con sus respectivos UILabel en el Interface Builder, así que lo único que nos queda es asignar a la propiedad font de estos labels, la fuente que queremos utilizar, y como expliqué en el primer párrafo de este artículo, esto lo hacemos a través del método fontWithName:size: de la clase UIFont:

1
2
3
4
5
6
// asignando las fuentes
[self.fuente1 setFont:[UIFont fontWithName:@"appleberry" size:FONT_SIZE]];
[self.fuente2 setFont:[UIFont fontWithName:@"BilloDream" size:FONT_SIZE]];
[self.fuente3 setFont:[UIFont fontWithName:@"SweetHomeOklahoma" size:FONT_SIZE]];
[self.fuente4 setFont:[UIFont fontWithName:@"asongforjennifer" size:FONT_SIZE]];
[self.fuente5 setFont:[UIFont fontWithName:@"thebeautifulones" size:FONT_SIZE]];

Aquí viene lo interesante. Como podéis ver, en la etiqueta fontWithName: se muestra un nombre relacionado, pero no idéntico, al nombre de las fuentes que están en el Bundle. Bien, esto es porque el string con nombre de la fuente que se le tiene que pasar como argumento a este método no es el del nombre del fichero sino el ”PostScript name”. Para saber cual es el PostScript name de una fuente solo tenemos que abrir la aplicación ”Font Book” que viene con el sistema operativo (Usar spotlight para encontrarlo):

Al abrirla tenemos que seleccionar la fuente de la que queremos saber el PostScript name y listo, en la sección de más a la derecha veremos una descripción detallada de la fuente y en la primera línea el PostScript name. Si no vez el tipo de fuente que buscas es porque no la tienes instalada, así que haz doble click en el fichero de la fuente e instala, aparecerá inmediatamente.

Ahhh, me olvidaba, FONT_SIZE es una constante que he definido más arriba en el código para facilitarme las cosas por si posteriormente deseo cambiar ese valor, así me ahorro no tener que cambiarlos todos uno por uno. Pruébalo, te ahorrarás tiempo.

Esto es todo. Me iba a dormir pero al final he decidido terminar el tutorial :). La aplicación terminada luce así:


Espero que os haya servido. En el siguiente botón pueden descargar los archivos del tutorial. No olviden compartir estos tutoriales con la mayor cantidad de gente posible a través de las redes sociales.

Comments