NinePatch-Bilder sind spezielle PNG-Bilder, mit denen Sie die Mitte dehnen können, während die Kanten intakt bleiben, ähnlich wie bei dem Bild selbst. Diese eignen sich hervorragend für skalierbare Schaltflächen, Hintergründe und andere UI-Elemente. In diesem Artikel wird erläutert, wie Sie die NinePatchKit-Bibliothek verwenden, um NinePatch-Bilder in iOS- und macOS-Anwendungen zu implementieren.
Verwendung eines NinePatch-Bildes in iOS und macOS
1. Erstellen des NinePatch-Bildes
Jetzt müssen Sie ein NinePatch-Bild erstellen. Ich empfehle, das Tool 9 Patch Editor zu verwenden, um Ihr Bild zu generieren. Der Vorgang ist wie folgt:
- Gehen Sie zur Website des 9 Patch Editors.
- Laden Sie das PNG-Bild hoch, das Sie in ein NinePatch konvertieren möchten.
- Definieren Sie die Begrenzungen (Sie können dies tun, indem Sie die Kanten ziehen) und sehen Sie sich eine Vorschau des Ergebnisses an.
- Laden Sie das resultierende NinePatch-Bild herunter. Stellen Sie in den Download-Optionen sicher, dass Sie die Option "Als kompiliertes Bild speichern" aktivieren, da dies sicherstellt, dass Ihr Bild alle erforderlichen Metadaten enthält, damit es von NinePatchKit korrekt analysiert werden kann.
2. Einbinden der NinePatch-Bilder in das Projekt
Sie können NinePatch-Bilder in Ihr Bundle, Data Set oder an einem beliebigen anderen Ort einbinden, aber fügen Sie sie niemals zu einem Image Set hinzu. Während der Erstellung werden alle PNGs, die im Image Set enthalten sind, durch die Einbettung von CgBI-Chunks optimiert. Ohne die zusätzlichen Chunks funktionieren die im Image Set enthaltenen NinePatch-Bilder aufgrund der Änderungen, die sie durchlaufen, bei der Analyse des Formats nicht mehr korrekt.
3. Importieren von NinePatchKit
Als Nächstes benötigen Sie die NinePatchKit-Bibliothek, um NinePatch-Bilder zu erstellen und zu rendern. Diese Open-Source-Bibliothek bietet eine sehr einfache API für NinePatch-Bilder und vereinfacht deren Verwendung in Anwendungen unter iOS und macOS. Sie können sie über CocoaPods in Ihr Projekt einbinden oder den Code manuell zu Ihrem Projekt hinzufügen.
-
Verwendung von CocoaPods: Fügen Sie diese Zeile zu Ihrer
Podfilehinzu:pod 'NinePatchKit'Führen Sie dann
pod installaus. -
Manuelle Integration: Laden Sie die NinePatchKit-Bibliothek herunter und fügen Sie den Ordner
NinePatchUtilszu Ihrem Projekt hinzu.
4. Verwendung eines NinePatch-Bildes im Code
Jetzt können Sie NinePatchKit verwenden, um Ihre NinePatch-Bilder zu laden und zu rendern. Dies ist ein einfaches Beispiel, das zeigt, wie Sie sie in NinePatchImageView verwenden können:
#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"YourNinePatchImageName" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];
[imageView.contentView addSubview:CustomView]; // Hinzufügen einer Subview zur ContentView
Ersetzen Sie "YourNinePatchImageName" durch den Namen Ihres NinePatch-Bildes (ohne Erweiterung). Dieser Code-Schnipsel erstellt eine NinePatchImageView und lädt mit NinePatchUtils Ihr NinePatch-Bild. Die NinePatchImageView ähnelt UITableViewCell - sie können zusätzliche Subviews auf ihrer contentView für ein komplexeres Layout haben.
5. Zusammenfassung
So können Sie es jetzt ganz einfach mit iOS- und macOS-Anwendungen mithilfe der NinePatch-Grafik verwenden. Mit der NinePatchKit-Bibliothek können Sie ganz einfach hochwertige, dehnbare Bilder rendern, um die Benutzererfahrung Ihrer Benutzeroberfläche zu verbessern.
Hinweis
- Bildformat: Stellen Sie sicher, dass Ihr Bild das korrekte PNG-Format hat und alle erforderlichen NinePatch-Metadaten enthält.
- Bildspeicherort: Fügen Sie das NinePatch in das Ressourcenpaket Ihres Projekts ein und laden Sie es mit dem korrekten Pfad. Platzieren Sie das NinePatch nicht in einem
Image Set, da dies das Bildformat beschädigen kann.