Was ist ein NinePatch-Bild

Ein NinePatch-Bild ist ein spezielles PNG-Bild, das es dem Android-System ermöglicht, Bilder automatisch an den Inhalt anzupassen, ohne dass es zu Verzerrungen oder Streckungen kommt. Dies ermöglicht es Entwicklern, skalierbare UI-Elemente wie Buttons, Fortschrittsbalken und Hintergrundbilder zu erstellen, die nicht über mehrere Ressourcensätze für unterschiedliche Bildschirmgrößen verfügen.

Erstellen eines NinePatch-Bildes

Draw 9-patch ist ein Tool innerhalb von Android Studio zum Erstellen und Bearbeiten von NinePatch-Bildern. Es ermöglicht Entwicklern, intuitiv schwarze Pixellinien entlang der Ränder zu zeichnen und eine Vorschau anzuzeigen, wie das Bild in verschiedenen Größen aussieht. Es gibt viele Online-Ressourcen und Anwendungen für die Erstellung von NinePatch-Bildern, abgesehen von den Tools, die mit Android Studio geliefert werden, wie z. B. 9 Patch Editor.

Verwendung von NinePatch-Bildern

Die Verwendung von NinePatch-Bildern in Android-Apps ist unkompliziert: Sie fügen sie dem Ordner res/drawable des Projekts hinzu und referenzieren sie dann mit android:background in Ihrer XML-Layoutdatei. Zum Beispiel:

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

Seien Sie vorsichtig, layout_width und layout_height sollten wrap_content verwenden, um Buttons mit Text ordentlich anzuzeigen.

Das Folgende zeigt zwei Buttons, die über XML und NinePatch-Bilder gerendert werden. Wie in der obigen Abbildung zu sehen ist, beobachten Sie, wie sich die Breite und Höhe der Buttons mit dem Text ändern, während das Hintergrundbild so gestreckt wird, dass es auf den Bildschirm passt.

Bild von kleinen und normalgroßen Buttons

Anwendungsfälle von NinePatch

Button-Hintergründe: Dies ist der häufigste Anwendungsfall für Drawables. Da die Textlänge bei verschiedenen Buttons variieren kann, stellt NinePatch sicher, dass das Hintergrundbild vollständig abgedeckt werden kann und nicht außerhalb der Begrenzung liegt oder sich durch die Textposition innerhalb des Buttons verformt. Wenn wir zum Beispiel einen Button-Hintergrund mit runden Ecken haben, verwenden wir NinePatch, und egal wie lang der Button-Text ist, die runden Ecken bleiben unverändert.
Fortschrittsbalken-Hintergründe: Er dehnt das Hintergrundbild über die feste Einheitsdistanz mit dem Fortschrittsbalken, wobei die Einheitsdistanzen unterschiedlich sind und sich mit dem Laden von einem System zum anderen ändern. NinePatch stellt sicher, dass das Styling für das Hintergrundbild beim Dehnen nicht verzerrt wird.
Hintergrund für das Listenelement: In der Listenansicht müssen die Hintergründe dieser Listenelemente je nach Länge des Inhalts, der in die Ansicht eingefügt wird, tatsächlich unterschiedlich sein. NinePatch stellt sicher, dass sich die Hintergrundbilder schön dehnen, ohne sich zu verzerren.
Dialogkäfig-Hintergründe: In solchen Fällen ändert sich die Größe des Dialogs durch den Inhalt. NinePatch stellt sicher, dass sich die Hintergrundbilder konsistent mit dem gleichen Stil dehnen.
Skalierbarer Teiler: Mit NinePatch kann ein Benutzer einen horizontalen oder vertikalen, dehnbaren Teiler entwerfen, der sich für verschiedene Bildschirmgrößen und Layoutanpassungen eignet.
Benutzerdefinierte Formhintergründe: NinePatch erstellt eine Vielzahl von benutzerdefinierten Formhintergründen wie abgerundete Ecken, Schatten usw. mit verschiedenen Spezialeffekten, ohne dass sich diese Effekte beim Dehnen ändern.

Vorteile von NinePatch

Skalierbarkeit: Dies ist der größte Vorteil von NinePatch. Die Größe wird automatisch an den Inhalt angepasst, wodurch die Notwendigkeit entfällt, mehrere Ressourcensätze für verschiedene Bildschirmgrößen und Textlängen zu pflegen.
Verzerrung vermeiden: Die Koordinatensteuerung des dehnbaren Bereichs verhindert, dass sich die Bilder verziehen. Die Eigenschaften der Schärfe und der Schönheit bleiben meist erhalten.
Erhöhte Effizienz: Weniger Ressourcendateien und damit eine höhere Effizienz bei der Entwicklung.
Flexible Anordnung: Es kann auf einfache Weise verschiedene Formen und Größen von UI-Elementen erstellt werden, um verschiedenen Layoutanforderungen gerecht zu werden.

Funktionsweise von NinePatch

Das Markenzeichen des NinePatch-Bildes ist ein durchgehender schmaler Rand eines Pixels. Dieser Rand definiert die Skalierbarkeit und den Bereich des Bildinhalts. Das Zeichnen schwarzer Pixellinien an den Rändern gibt an, welcher Teil in der Peripherie, welcher vertikal und welcher horizontal gedehnt werden soll.

Image of stretchable area
and padding box

Insbesondere ist ein 1-Pixel-Rand in vier Teile unterteilt:

1. Linker Rand (vertikale schwarze Pixellinie):

Funktion: Steuert die vertikale Dehnung des Bildes. Die vertikale schwarze Pixellinie am linken Rand definiert, welche Bereiche des Bildes vertikal gedehnt werden können.
Zum Beispiel:
- Eine schwarze Pixellinie ohne: Die Höhe des Bildes ist festgelegt, daher ist es nicht in der Lage, sich vertikal zu dehnen. Wenn versucht wird, es in einen Container zu setzen, der höher ist als das Bild selbst, bleibt es wie es ist und kann leere Bereiche aufweisen oder abgeschnitten werden.
- Eine schwarze Pixellinie: Das Bild kann vertikal gedehnt werden, ist aber auf die Bereiche beschränkt, die durch die schwarzen Pixellinien angegeben werden. Wenn zum Beispiel eine schwarze Pixellinie in der Mitte eines linken Randes platziert wird, bedeutet dies, dass sich die obere und untere Hälfte nicht ändern, wobei die vertikale Dehnung nur im mittleren Teil erlaubt ist.
- Mehrere schwarze Pixellinien: Es können mehrere vertikale Dehnungsbereiche definiert werden. Beispielsweise befinden sich am linken Rand zwei schwarze Pixellinien, die das Bild in drei Teile teilen, wobei sich in der Mitte dehnbare Teile befinden und die oberen und unteren Teile unverändert bleiben.

2. Oberer Rand: (Horizontale schwarze Pixellinien):

Funktion: Steuert die horizontale Dehnung des Bildes. Eine horizontale schwarze Pixellinie am oberen Rand definiert die dehnbaren Teile des Bildes in der horizontalen Dimension.
Zum Beispiel:
- Eine schwarze Pixellinie ohne: Die Bildbreite ist festgelegt und wird nicht horizontal gedehnt. Ähnlich wie bei einer schwarzen Pixellinie ohne am linken Rand bleibt das Bild einfach gleich, kann aber leere Bereiche aufweisen oder abgeschnitten werden.
- Eine schwarze Pixellinie: Das Bild kann sich horizontal dehnen, aber auch hier nur in dem Bereich, der durch die schwarze Pixellinie angegeben wird. Wenn sich die schwarze Pixellinie zum Beispiel in der Mitte der oberen Begrenzung befindet, ändert sich die linke Hälfte des Bildes nicht, ebenso wenig die rechte Hälfte, sondern es ist nur eine Dehnung in der Mitte erlaubt.
- Mehrere schwarze Pixellinien: Sie definieren verschiedene laterale dehnbare Bereiche. Wie im Fall des linken Randes mit verschiedenen horizontalen schwarzen Pixellinien teilt es das Bild in viele Teile, und jeder so markierte Abschnitt kann sich horizontal dehnen.

3. Rechter Rand (Vertikale schwarze Pixellinien):

Funktion: Definiert den rechten Abstand des Inhaltsbereichs. Die vertikalen schwarzen Pixellinien am rechten Rand geben die rechte Begrenzung des Bildinhaltsbereichs an. Während des Dehnens bleibt die rechte Seite des Inhaltsbereichs auf dieser Begrenzung.
Beispiele:
- Keine schwarzen Pixellinien: Der Inhaltsbereich erstreckt sich bis zum rechten Rand des Bildes und wird nicht flexibel, wenn sich der Inhalt dehnt, sodass der Bildinhalt bis zum rechten Rand reicht.
- Eine schwarze Pixellinie: Der rechte Rand des Inhaltsbereichs wird durch die Position der schwarzen Pixellinie bestimmt. Wenn der Inhalt gedehnt wird, bleibt die rechte Seite des Inhaltsbereichs an der schwarzen Pixellinie fixiert, während der Raum nach rechts gedehnt wird.

4. Untere Begrenzung (die horizontale schwarze Pixellinie):

Funktion: Definiert den unteren Rand des Bereichs, innerhalb dessen der Inhalt eingeschlossen ist. Die horizontale schwarze Pixellinie am unteren Rand definiert, wo die untere Begrenzung des Inhaltsbereichs des Bildes endet. Die Ausdehnung des unteren Teils des Inhaltsbereichs bleibt beim Dehnen an dieser Begrenzung.
Beispiel:
- Keine schwarze Pixellinie: Der Inhaltsbereich erstreckt sich bis zum unteren Rand des Bildes. Wenn er gedehnt wird, erstreckt sich der gesamte Bildinhalt bis zum unteren Rand.
- Eine schwarze Pixellinie: Die untere Begrenzung des Inhaltsbereichs ergibt sich aus der Position der schwarzen Pixellinie. Wenn er gedehnt wird, bleibt der untere Teil des Inhaltsbereichs auf der Höhe der schwarzen Pixellinie, und der Leerraum darunter wird gedehnt.

Durch die geschickte Verwendung schwarzer Pixellinien an diesen vier Rändern kann der Programmierer genau steuern, wie das NinePatch-Bild bei unterschiedlichen Größen angezeigt wird, und gleichzeitig sicherstellen, dass dies ohne Verformung oder Verlust des Inhaltsbereichs geschieht. Beachten Sie, dass diese Pixellinien die Definitionsgrenzen des dehnbaren Bereichs vom Inhaltsbereich sind und nicht die tatsächlichen Grenzen des Bildes. Die Teile ohne schwarze Pixellinien sind Komponenten mit fester Größe.

Hinweise

Ein NinePatch-Bild sollte mit einem Dateinamen gespeichert werden, der auf .9.png endet.
Eine Mindestgröße von 2x2 Pixel im dehnbaren Bereich ist erforderlich, damit das Bild beim Skalieren nicht verschwindet.
Zusätzlicher Sicherheitsraum an den Rändern des dehnbaren Bereichs kann Farbveränderungen eliminieren, die beim Skalieren auftreten.
Stellen Sie sicher, dass Sie die dehnbaren und Inhaltsbereiche des Bildes sehr gründlich prüfen, damit das Bild bei verschiedenen Abmessungen korrekt angezeigt wird.
Verwenden Sie NinePatch-Bilder nicht übermäßig, insbesondere nicht in animierten Oberflächen oder solchen, die sich häufig ändern, da sie die Leistung verringern.

Zusammenfassung

NinePatch-Bilder sind die leistungsstärksten Werkzeuge, um die Effizienz im UI-Design zu steigern und die Benutzererfahrung in Android-Anwendungen zu verbessern. Dies bedeutet jedoch nicht, dass Entwickler nicht die Vorteile und Einschränkungen abwägen müssen, da die Wahl des Bildtyps von der Anforderung abhängt. Auch wenn NinePatch-Bilder die richtige Wahl für skalierbare Hintergründe oder UI-Elemente sind, die unterschiedliche Textlängen akzeptieren müssen, sind normale PNG-Bilder für statische Hintergrundbilder völlig ausreichend - ihre Einfachheit ist der Clou. Bei der Verwendung von NinePatch muss bei der Gestaltung und beim Testen größte Sorgfalt angewendet werden, um sicherzustellen, dass es auf einer Reihe von Geräten und Bildschirmgrößen hervorragend funktioniert.