iOS
Polices personnalisées

Incorporation de polices personnalisées

Prise en charge des polices personnalisées
Les applications qui souhaitent utiliser des polices personnalisées peuvent désormais inclure ces polices dans leur regroupement d'applications et les enregistrer avec le système en incluant la clé UIAppFonts dans leur fichier Info.plist. La valeur de cette clé est un tableau de chaînes identifiant les fichiers de polices dans le bundle de l'application. Lorsque le système détecte la clé, il charge les polices spécifiées et les met à la disposition de l'application.

Une fois les polices définies dans Info.plist , vous pouvez utiliser vos polices personnalisées comme toute autre police dans IB ou par programme.

1. Faites glisser et déposez votre police dans le dossier Xcode Supporting Files. N'oubliez pas de marquer votre application dans la section "Ajouter aux cibles". A partir de ce moment, vous pouvez utiliser cette police dans IB et la choisir dans la palette de polices.

2. Pour rendre cette police disponible sur le périphérique, ouvrez Info.plist et ajoutez des Fonts provided by application key (UIAppFonts). Ajoutez le nom de la police en tant que valeur à la clé Item 0. Remarque: le nom de la police peut varier de votre nom de fichier de police.

3. Obtenez le nom de police ajouté personnalisé en utilisant l'extrait ci-dessous

[ Swift 3 ]

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

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

[ Objectif - C ]

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

Polices personnalisées avec storyboard

Les polices personnalisées pour les composants d'interface utilisateur du storyboard peuvent être facilement obtenues avec les attributs d'exécution définis par l' utilisateur dans le storyboard et les catégories .

Les avantages sont comme,

• Pas besoin de définir des sorties pour l'élément d'interface utilisateur
• Pas besoin de définir la police pour les éléments par programmation.

Étapes à suivre

1. Fichier de polices: ajoutez le fichier de polices (.ttf) au groupe d'applications et ajoutez l'entrée pour la police dans Info.plist sous Police fournie par l'application, comme dans cette documentation de polices personnalisées.

2. Définir des catégories: Ajoutez un fichier comme UIKit + IBExtensions et ajoutez les catégories pour les éléments d'interface utilisateur tels que UILabel, UIButton, etc. pour lesquels vous souhaitez définir une police personnalisée. Toutes les catégories auront une propriété personnalisée, par exemple fontName . Cela sera utilisé depuis le storyboard plus tard pour définir la police personnalisée (comme à l'étape 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 et Setters: Définissez les getters et les setters pour la propriété fontName vers chaque catégorie ajoutée.

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. Définition de la police dans le storyboard: Ajoutez une entrée dans Attributs d'exécution définis par l'utilisateur avec fontName en tant que KeyPath et le nom de votre police personnalisée en tant que valeur avec le type String comme indiqué.

Cela va définir votre police personnalisée lors de l'exécution de l'application.

Remarques:

• Lato-Regular est la police personnalisée que j'ai utilisée.
• Le même nom dans le fichier .ttf ajouté dans le bundle doit être utilisé sans extension dans le storyboard.
• La taille de la police sera la même que celle définie dans l'inspecteur d'attribut de l'élément de l'interface utilisateur.

Application de polices personnalisées aux contrôles dans un Storyboard

L'exemple suivant montre comment appliquer des polices personnalisées à une barre de navigation et inclut des correctifs pour certains comportements inhabituels trouvés dans Xcode. Il est également possible d'appliquer les polices personnalisées à tout autre contrôle UIC tel que UILabels , UIButtons , etc. en utilisant l'inspecteur d'attributs après l'ajout de la police personnalisée au projet. Veuillez noter les liens externes vers des échantillons de travail et des vidéos en bas.

1. Sélectionnez votre barre de navigation dans votre contrôleur de navigation

2. Modifier la police de titre dans l'inspecteur d'attributs

(Vous devrez probablement basculer la barre de teinte pour la barre de navigation avant que Xcode ne décroche la nouvelle police)

Notes (mises en garde)

Vérifié que cela fonctionne sur Xcode 7.1.1+. ( Voir les exemples ci-dessous )

1. Vous devez basculer la teinte de la barre de navigation avant que la police ne prenne effet (cela ressemble à un bogue dans Xcode; vous pouvez le rétablir par défaut et la police va coller)
2. Si vous choisissez une police système, assurez-vous que la taille n'est pas 0.0 (sinon la nouvelle police sera ignorée)

3. Cela semble fonctionner sans problème quand une seule barre de navigation est dans la hiérarchie des vues. Il semble que les NavBars secondaires dans la même pile soient ignorées. (Notez que si vous affichez la barre de navigation du contrôleur de navigation maître, tous les autres paramètres de la barre de navigation personnalisée sont ignorés).

Gotchas (deux)

Certains d'entre eux sont répétés, ce qui signifie qu'ils méritent d'être notés.

1. Parfois, le storyboard xml est corrompu. Cela nécessite que vous examiniez la structure dans Storyboard en mode Code source (cliquez avec le bouton droit sur le fichier storyboard> Ouvrir en tant que ...)
2. Dans certains cas, la balise navigationItem associée à l'attribut runtime défini par l'utilisateur a été définie comme enfant xml de la balise view au lieu de la balise du contrôleur de vue. Si oui, retirez-le entre les balises pour un fonctionnement correct.
3. Activez la teinte NavBar pour vous assurer que la police personnalisée est utilisée.
4. Vérifiez le paramètre de taille de la police à moins d'utiliser un style de police dynamique
5. La hiérarchie des vues remplace les paramètres. Il semble qu'une police par pile soit possible.

Résultat

Des échantillons

• Vidéo montrant plusieurs polices dans un projet avancé
• Téléchargement de source simple
• Advanced Project Download ~ affiche plusieurs polices NavBar et contournement personnalisé des polices
• Vidéo montrant plusieurs polices et polices personnalisées

Gestion des polices personnalisées

Remarque ~ Vous pouvez trouver une liste de contrôle agréable à partir du site Web Code With Chris et vous pouvez voir le projet de téléchargement exemple.

Si vous avez votre propre police et que vous souhaitez l'utiliser dans votre storyboard, il existe un ensemble correct de réponses à la question SO suivante. Une réponse identifie ces étapes.

1. Obtenez votre fichier de police personnalisé (.ttf, .ttc)
2. Importer les fichiers de police dans votre projet Xcode
3. Dans app-info.plist, ajoutez une clé nommée Fonts fournie par application.Il s'agit d'un type de tableau, ajoutez tous les noms de fichiers de polices au tableau, notez: y compris l'extension du fichier.
4. Dans le storyboard, dans la barre de navigation, accédez à l'inspecteur d'attributs, cliquez sur le bouton icône droit de la zone de sélection de polices. Dans le panneau contextuel, choisissez Police à personnaliser et choisissez la famille de votre nom de police incorporé.

Solution de contournement de police personnalisée

Donc, Xcode semble naturellement pouvoir gérer les polices personnalisées sur UINavigationItem, mais cette fonctionnalité ne se met pas à jour correctement (la police sélectionnée est ignorée).

Pour contourner ce problème:

L'une des méthodes consiste à utiliser le storyboard et à ajouter une ligne de code: ajoutez d'abord un UIView (UIButton, UILabel ou une autre sous-classe UIView) au View Controller (pas l'élément de navigation ... Xcode ne permet actuellement pas de le faire) cette). Après avoir ajouté le contrôle, vous pouvez modifier la police dans le storyboard et ajouter une référence en tant que prise à votre View Controller. Attribuez simplement cette vue à UINavigationItem.titleView. Vous pouvez également définir le nom du texte dans le code si nécessaire. Bug signalé (23600285).

@IBOutlet var customFontTitleView: UIButton!

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

Remarque - Cet exemple est dérivé d'une réponse que j'ai publiée sur SO ( ici ).