iOS
Fuentes personalizadas

Incrustar fuentes personalizadas

Soporte de fuente personalizado
Las aplicaciones que desean usar fuentes personalizadas ahora pueden incluir esas fuentes en su paquete de aplicaciones y registrarlas con el sistema al incluir la clave UIAppFonts en su archivo Info.plist. El valor de esta clave es una serie de cadenas que identifican los archivos de fuentes en el paquete de la aplicación. Cuando el sistema ve la clave, carga las fuentes especificadas y las pone a disposición de la aplicación.

Una vez que las fuentes se hayan configurado en la Info.plist , puede usar sus fuentes personalizadas como cualquier otra fuente en IB o programáticamente.

1. Arrastre y suelte su fuente en la carpeta de archivos de soporte de Xcode. No olvides marcar tu aplicación en la sección "Agregar a objetivos". A partir de este momento, puede utilizar esta fuente en IB y elegirla de la paleta de fuentes.

2. Para que esta fuente esté disponible en el dispositivo, abra Info.plist y agregue las Fonts provided by application key (UIAppFonts). Agregue el nombre de la fuente como valor a la clave del elemento 0. Nota: El nombre de la fuente puede variar de su nombre de archivo de fuente.

3. Obtenga el nombre de fuente agregado personalizado usando el siguiente fragmento de código

[ Swift 3 ]

for family in UIFont.familyNames {
            print("\(family)")

            for name in UIFont.fontNames(forFamilyName: family) {
                print("   \(name)")
            }
        }

[ Objetivo - C ]

for (NSString *familyName in [UIFont familyNames]){
        NSLog(@"Family name: %@", familyName);
        for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]) {
            NSLog(@"--Font name: %@", fontName);
        }
    }

Fuentes personalizadas con guión gráfico

Las fuentes personalizadas para los componentes de la interfaz de usuario desde el guión gráfico se pueden lograr fácilmente con los atributos de tiempo de ejecución definidos por el usuario en el guión gráfico y las categorías .

Las ventajas son como,

• No es necesario definir salidas para el elemento ui
• No hay necesidad de configurar la fuente para elementos programáticamente.

Pasos a seguir

1. Archivo de fuente: agregue el archivo de fuente (.ttf) al paquete de la aplicación y agregue la entrada para la fuente en Info.plist bajo Fuente provista por la aplicación como en esta documentación de fuentes personalizadas.

2. Definir categorías: agregue un archivo como UIKit + IBExtensions y agregue las categorías para los elementos de la interfaz de usuario como UILabel, UIButton, etc. para los que desea establecer una fuente personalizada. Todas las categorías tendrán una propiedad personalizada, por ejemplo, FontName . Esto se usará más adelante en el guión gráfico para configurar la fuente personalizada (como en el paso 4).

UIKit + IBExtensions.h

#import <UIKit/UIKit.h>

//Category extension for UILabel
@interface UILabel (IBExtensions)

@property (nonatomic, copy) NSString *fontName;
@end

// Category extension for UITextField
@interface UITextField (IBExtensions)

@property (nonatomic, copy) NSString *fontName;
@end

// Category extension for UIButton
@interface UIButton (IBExtensions)

@property (nonatomic, copy) NSString *fontName;
@end

3. Getters and Setters: defina getters y setters para la propiedad fontName en cada categoría agregada.

UIKit + IBExtensions.m

#import "UIKit+IBExtensions.h"

@implementation UILabel (IBExtensions)

- (NSString *)fontName {
    return self.font.fontName;
}

- (void)setFontName:(NSString *)fontName {
    self.font = [UIFont fontWithName:fontName size:self.font.pointSize];
}
@end

@implementation UITextField (IBExtensions)

- (NSString *)fontName {
    return self.font.fontName;
}

- (void)setFontName:(NSString *)fontName {
    self.font = [UIFont fontWithName:fontName size:self.font.pointSize];
}
@end

@implementation UIButton (IBExtensions)

- (NSString *)fontName {
    return self.titleLabel.font.fontName;
}

- (void)setFontName:(NSString *)fontName{
    self.titleLabel.font = [UIFont fontWithName:fontName size:self.titleLabel.font.pointSize];
}
@end

4. Configuración de la fuente en el guión gráfico: agregue una entrada en Atributos de tiempo de ejecución definidos por el usuario con fontName como keyPath y el nombre de su fuente personalizada como valor con el tipo como String como se muestra.

Esto establecerá su fuente personalizada mientras se ejecuta la aplicación.

Notas:

• Lato-Regular es la fuente personalizada que he usado.
• El mismo nombre en el archivo .ttf agregado en el paquete debe usarse sin extensión en el guión gráfico.
• El tamaño de fuente será el mismo que se define en el inspector de atributos del elemento UI.

Aplicar fuentes personalizadas a los controles dentro de un Storyboard

El siguiente ejemplo muestra cómo aplicar fuentes personalizadas a una barra de navegación e incluye correcciones para algunos comportamientos extraños que se encuentran en Xcode. También se pueden aplicar las fuentes personalizadas a cualquier otro UIControls como UILabels , UIButtons y más utilizando el inspector de atributos después de agregar la fuente personalizada al proyecto. Tenga en cuenta los enlaces externos a las muestras de trabajo y videos cerca de la parte inferior.

1. Seleccione su barra de navegación dentro de su controlador de navegación

2. Cambiar la fuente del título en el inspector de atributos

(Es probable que tengas que alternar el Tinte de barra para la Barra de navegación antes de que Xcode seleccione la nueva fuente)

Notas (advertencias)

Verificado que esto funciona en Xcode 7.1.1+. ( Vea las muestras abajo )

1. Es necesario que alterne el tinte de la barra de navegación antes de que la fuente surta efecto (parece un error en Xcode; puede volver a la configuración predeterminada y la fuente se mantendrá)
2. Si elige una fuente del sistema ~ Asegúrese de asegurarse de que el tamaño no sea 0.0 (de lo contrario, se ignorará la nueva fuente)

3. Parece que esto funciona sin problemas cuando solo una barra de navegación está en la jerarquía de vistas. Parece que las barras de navegación secundarias en la misma pila se ignoran. (Tenga en cuenta que si muestra la barra de navegación del controlador de navegación maestro, se ignorarán todas las demás configuraciones personalizadas de la barra de navegación).

Gotchas (deux)

Algunos de estos se repiten, lo que significa que es muy probable que sean dignos de mención.

1. A veces el storyboard xml se corrompe. Esto requiere que revise la estructura en el Guión gráfico como modo de Código fuente (haga clic con el botón derecho en el archivo del guión gráfico> Abrir como ...)
2. En algunos casos, la etiqueta de NavigationItem asociada con el atributo de tiempo de ejecución definido por el usuario se estableció como un elemento secundario XML de la etiqueta de vista en lugar de la etiqueta de controlador de vista. Si es así, quítelo de entre las etiquetas para que funcione correctamente.
3. Alterne el Tinte de la barra de navegación para asegurarse de que se utiliza la fuente personalizada.
4. Verifique el parámetro de tamaño de la fuente a menos que use un estilo de fuente dinámico
5. La jerarquía de vistas anulará la configuración. Parece que una fuente por pila es posible.

Resultado

Muestras

• Video que muestra múltiples fuentes en un proyecto avanzado
• Descarga de fuente simple
• Descarga avanzada del proyecto ~ Muestra múltiples fuentes NavBar y soluciones de fuentes personalizadas
• Video que muestra múltiples fuentes y fuentes personalizadas

Manejo de fuentes personalizadas

Nota ~ Puede encontrar una buena lista de verificación en el sitio web de Code With Chris y puede ver el proyecto de descarga de muestra.

Si tiene su propia fuente y desea usarla en su guión gráfico, entonces hay un conjunto decente de respuestas en la siguiente pregunta SO . Una respuesta identifica estos pasos.

1. Obtenga su archivo de fuente personalizado (.ttf, .ttc)
2. Importe los archivos de fuentes a su proyecto Xcode
3. En app-info.plist, agregue una clave llamada Fuentes provista por la aplicación. Es un tipo de matriz, agregue todos los nombres de los archivos de fuentes a la matriz, tenga en cuenta: incluida la extensión del archivo.
4. En el guión gráfico, en la barra de navegación, vaya al inspector de atributos, haga clic en el botón derecho del icono del área de selección de fuente. En el panel emergente, elija Fuente a personalizar y elija la Familia de su nombre de fuente incrustado.

Solución de fuente personalizada

Así que, naturalmente, parece que Xcode puede manejar fuentes personalizadas en UINavigationItem, pero esa característica simplemente no se actualiza correctamente (la fuente seleccionada se ignora).

Para solucionar esto:

Una forma es arreglar usando el guión gráfico y agregando una línea de código: primero agregue una UIView (UIButton, UILabel, o alguna otra subclase UIView) al controlador de vista (no el elemento de navegación ... Xcode actualmente no permite que lo haga ese). Después de agregar el control, puede modificar la fuente en el guión gráfico y agregar una referencia como salida a su View Controller. Simplemente asigne esa vista al UINavigationItem.titleView. También puede establecer el nombre del texto en código si es necesario. Error informado (23600285).

@IBOutlet var customFontTitleView: UIButton!

//Sometime later...    
self.navigationItem.titleView = customFontTitleView

Nota: este ejemplo se deriva de una respuesta que publiqué en SO ( aquí ).