Anleitung: 9.pngs verstehen und selbstständig erzeugen

Früher oder später stolpern angehende Android-UI-Designer über das tolle Thema: 9-Patch. Grafiken in einer App zu verändern ist vom Prinzip her relativ simpel, aber wie funktionieren diese ominösen 9.pngs? Ich habe mich länger mit der Problematik befasst. Doch die meisten Erklärungen im Internet sind natürlich oft auf Englisch. Deutsche Hilfestellungen finden sich eher selten. Daher dachte ich mir, machst du eine einfach gehaltene Anleitung in deutscher Sprache. 9-Patch ist eine adaptierte Technik von 9-slice bzw. scale9. Dabei verwendet man kleine Steuerpixel, um ein Bild in eine bestimmte Richtung zu füllen oder zu skalieren. Beide Methoden sorgen dafür, dass das Bild korrekt erhalten bleibt. Durch falsche Handhabung führt das schnell zu unschönen Fehlern. Daher ist ein gutes Grundverständnis unabdingbar.

Grundwissen über 9-Patch-Grafiken sowie deren Bearbeitung

Bevor es losgeht, brauchen wir erst mal das notwendige Handwerkszeug. In meinem Artikel "Huawei EMUI Themes gestalten und verändern [Teil 3]" erklärte ich im ersten Abschnitt, wie man sehr leicht System-Apps dekompilieren kann. Diese Vorgehensweise vereinfacht das Arbeiten deutlich. Die 9.pngs werden dabei richtig übersetzt. Zwingend notwendig ist dies nicht. Nachträglich könnt ihr die Bereiche auch wieder einzeichnen. Für den Anfang reicht ein Bildbearbeitungsprogramm, welches Transparenzen in PNGs versteht und ein einfacher Compiler für die 9-Patch-Bilder. Als Grafiksoftware bieten sich Adobe Photoshop, Gimp oder Paint.NET an. Stellt euch eine quadratische Fläche vor. Die linke und obere Seite ermöglicht das Strecken nach Links bzw. Oben. Folglich füllt die rechte und untere Seite entsprechend in diese Richtungen aus.

9.pngs in Adobe Photoshop bearbeiten und erzeugen
9.pngs in Adobe Photoshop bearbeiten und erzeugen

Wie setzt ihr die Theorie in die Praxis um? Recht einfach. Das Quadrat wird um schwarze Linien an den Seiten erweitert. Eine durchgehende Gerade negiert das Kacheln/Ausfüllen in die jeweilige Richtung, hingegen ein kurzer Strich führt die gewünschte Aktion des markierten Bereiches aus. Anhand der Screenshots seht ihr recht gut, wie sich das auswirkt. Das Füllen wurde hier verweigert und ein kleiner Bereich wird nach Links und Oben skaliert. Wem das zu kompliziert erscheint, dem rate ich zum Simple Nine-Patch Generator. Das Online-Tool greift euch prima unter die Arme: Grafik hochladen, Auflösung festlegen, Skalieren oder Füllen, runterladen, verwenden. Aber auch der Generator liefert kein fertiges 9.png. Dazu bedarf es eines weiteren Schrittes.

PNGs mittels Simple Nine-Patch Generator um Steuerpixel erweitern
PNGs mittels Simple Nine-Patch Generator um Steuerpixel erweitern

9-Patch-Grafiken mit xUltimate Draw9Patch finalisieren

Die Grafik muss abschließend kompiliert werden. Warum ist das so wichtig? An den Seiten sind noch schwarzen Linien sichtbar. Das sollte allerdings nicht sein. Diesen Zustand erreicht man nur mithilfe eines Compilers. Dazu kommt der xUltimate Draw9Patch Compiler zur Anwendung. Natürlich gibt es weitere Tools für diese Aufgabe, aber die Handhabung und Installation ist alles andere als leicht. Bei xUltimate müsst ihr nur die Ordnerstruktur beachten. Legt am besten folgende Hierarchie an:

xUltimate_Draw9Patch_Compiler
--|res
---|drawable-hdpi
----|picture.9.png
----|...
--|xUltimate-d9pc.exe

Zu guter Letzt das Programm ausführen — erledigt. Eure fertigen Grafiken lagern im Ordner “done”. Jetzt stehen euch alle Wege offen die finalen 9.pngs in euren Projekten zu verwenden. Beispielsweise, um diese in einem EMUI Theme unterzubringen oder mit einem Archivierungsprogramm in eine App einzufügen. Falls ihr die Grafiken direkt in eine APK einfügen möchtet und diese anschließend kompiliert, entfällt der letzte Schritt logischerweise. Benutzer des EMUI Tools können ebenfalls auf diesen Schritt verzichten. Die Anwendung wandelt sämtliche Bilder beim Exportieren um.

PNG mit Steuerpixeln (links) und kompiliert (rechts)
PNG mit Steuerpixeln (links) und kompiliert (rechts)

Ich hoffe mein Artikel hilft einigen weiter, das Mysterium der 9-Patch-PNGs besser zu verstehen.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.