Comment utiliser les images NinePatch dans iOS et macOS

Les images NinePatch sont des images PNG spécialisées qui vous permettent d'étirer le centre tout en laissant les bords intacts, un peu comme l'image elle-même. Elles sont idéales pour les boutons, les arrière-plans et autres éléments d'interface utilisateur évolutifs. Cet article explique comment utiliser la bibliothèque NinePatchKit pour implémenter des images NinePatch dans les applications iOS et macOS.

Utiliser une image NinePatch dans iOS et macOS

1. Créer l'image NinePatch

Vous devez maintenant créer une image NinePatch. Je vous recommande d'utiliser l'outil 9 Patch Editor pour générer votre image. Le processus est le suivant :

Allez sur le site de 9 Patch Editor.
Téléchargez l'image PNG que vous souhaitez convertir en NinePatch.
Définissez les limites (vous pouvez le faire en faisant glisser les bords) et prévisualisez le résultat.
Téléchargez l'image NinePatch résultante. Dans les options de téléchargement, assurez-vous de cocher l'option "Enregistrer en tant qu'image compilée", car cela garantira que votre image contient toutes les métadonnées requises pour qu'elle puisse être correctement analysée par NinePatchKit.

2. Inclure les images NinePatch dans le projet

Vous pouvez incorporer les images NinePatch dans votre bundle, Data Set, ou où vous le souhaitez, mais ne les ajoutez jamais à Image Set. Pendant la compilation, tous les PNG hébergés dans Image Set seront optimisés via l'intégration de blocs CgBI et sans les blocs supplémentaires, de sorte que les images NinePatch insérées dans Image Set ne fonctionneront plus correctement lors de l'analyse du format en raison des modifications qu'elles subissent.

3. Importer NinePatchKit

Ensuite, vous devrez utiliser la bibliothèque NinePatchKit pour créer et rendre les images NinePatch. Cette bibliothèque open source fournit une API très simple pour les images NinePatch, simplifiant leur utilisation dans les applications sur iOS et macOS. Vous pouvez la lier à votre projet via CocoaPods ou ajouter manuellement le code dans votre projet.

Utilisation de CocoaPods : Ajoutez cette ligne à votre Podfile :
```
pod 'NinePatchKit'
```
Ensuite, exécutez pod install.
Intégration manuelle : Téléchargez la bibliothèque NinePatchKit et ajoutez le dossier NinePatchUtils à votre projet.

4. Utiliser une image NinePatch dans le code

Vous pouvez maintenant utiliser NinePatchKit pour charger et rendre vos images NinePatch. Voici un exemple simple pour montrer comment vous pouvez les utiliser dans NinePatchImageView :

#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"NomDeVotreImageNinePatch" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];

[imageView.contentView addSubview:CustomView]; // ajouter une sous-vue à contentView

Remplacez "NomDeVotreImageNinePatch" par le nom de votre image NinePatch (sans extension). Cet extrait de code crée une NinePatchImageView et, à l'aide de NinePatchUtils, il charge votre image NinePatch. NinePatchImageView est similaire à UITableViewCell : vous pouvez ajouter des sous-vues supplémentaires à leur contentView pour une mise en page plus complexe.

5. Résumé

Vous pourrez désormais l'utiliser facilement avec les applications iOS et macOS à l'aide du graphique NinePatch. En utilisant la bibliothèque NinePatchKit, vous pouvez facilement rendre des images étirables de haute qualité afin d'améliorer l'expérience de votre interface.

Remarque

Format de l'image : Assurez-vous que votre image est au format PNG correct et qu'elle inclut toutes les métadonnées NinePatch nécessaires.
Emplacement de l'image : Incluez le NinePatch dans le package de ressources de votre projet et chargez-le avec le bon chemin. Ne placez pas le NinePatch dans un Image Set car cela pourrait corrompre le format de l'image.