wake-up-neo.com

Erstellen und Verwenden von 9-Patch-Bildern in Android

Ich habe kürzlich von 9-Patch-Bildern gehört. Ich weiß, dass seine 9 gekachelt und dehnbar ist. Ich würde gerne mehr darüber erfahren.

  • Wie kann ich ein 9-Patch-Bild erstellen?

    Gibt es ein Werkzeug? Kann ich es aus AndroidSDK oder Code erstellen?

  • Hauptvorteile von 9-Patch gegenüber normalen Png?

    (Ist es dynamisch/automatisch nach Bildschirm dehnbar?)

45
Nizam

Heute habe ich neun Patch-Bilder entdeckt. Die offizielle Dokumentation (verlinkt mit den anderen Antworten) ist in Ordnung, aber es fehlt wirklich an Beispielen.

Dieses kleine Tutorial hat am Ende einige großartige Beispiele, die den zweiten Teil Ihrer Frage beantworten und erklären, wie die Skalierung funktioniert - nicht nur für Schaltflächen -, sondern auch für Frames. Außerdem gibt es ein vollständiges Beispielprojekt, das Sie herunterladen und herunterladen können Spiel mit. Der wichtigste Vorteil gegenüber PNG besteht darin, dass nine Patch-Bilder nicht zusammenhängende Bereiche zum Skalieren angeben können.

Um den ersten Teil Ihrer Frage zu beantworten, wird das SDK (und jetzt Android Studio) mit "Draw 9-patch" ("draw9patch" im SDK-Toolsordner) ausgeliefert, einem einfachen Editor. Hier ist eine schönere die auch Open Source ist. Es hat ein einfaches, aber cleveres Standardbild.

39
Nick Westgate

Die meisten Beispiele sprechen von der Erstellung eines 9-Patch-Images, die Implementierungsdetails bleiben jedoch auf einem hohen Niveau. 

Nicks Post oben - mit dem guten 9-Patch-Tutorial das eine funktionierende Projekt-Download-Datei liefert, rettete der Tag.

Hier sind die wichtigsten Implementierungsdetails, die für mich funktionierten (sobald Sie ein Bild mit 9 Patches bereit haben):

  1. Verweise auf das Zeichen mit dem Namen, aber nicht .9.png (Auto-Vervollständigung in Eclipse sorgt dafür)

  2. Vergewissern Sie sich, dass sich unter dem Haupt-/Zeichenordner nur ein Bild befindet (keine Version für jeden dpi-Ordner).

  3. Das Bild muss angegeben werden mit: background, nicht: src (das hat mich eine Weile festgefahren)

    Android:background="@drawable/splash_logo"

  4. Stellen Sie sicher, dass das Bild und das Layout, das es enthält, verwendet werden: 

    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"

20
Gene Bo

Wie kann ich ein 9-Patch-Bild erstellen? Gibt es ein Werkzeug? Kann ich es aus AndroidSDK oder Code erstellen?

Wenn Sie eine große Suchmaschine nach Android 9-patch tool suchen, ist der allererste Treffer für die Android-Entwickler-Dokumentationsseite im draw9patch - Tool .

Hauptvorteile von 9-Patch gegenüber normalen Png? (Ist es dynamisch/automatisch nach Bildschirm dehnbar?)

Die Android-Entwicklerdokumentation enthält andere Seiten, die Neun-Patch-PNG-Dateien beschreiben . Diese Dokumentation enthält Passagen wie:

Eine NinePatchDrawable-Grafik ist ein dehnbares Bitmap-Bild, dessen Größe von Android automatisch angepasst wird, um den Inhalt der Ansicht, in der Sie sie als Hintergrund platziert haben, aufzunehmen. Ein Beispiel für die Verwendung eines NinePatch sind die Hintergründe, die von Standard-Android-Schaltflächen verwendet werden. Die Schaltflächen müssen sich ausdehnen, um Strings unterschiedlicher Länge aufnehmen zu können.

9
CommonsWare

Mit dem 9-Patch-Bild können Sie auswählen, welcher Teil Ihres Bildes gestreckt sein kann . Es muss ein png-Bild sein und der Name muss mit .9.png (etwas 9.png) enden. 

http://developer.Android.com/tools/help/draw9patch.html

Einfaches Werkzeug für alle Dichten:

http://Android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

6
Petr Krejčí

1.Was sind NinePatch-Bilder?

NinePatch-Bilder sind PNG-Bilder, die die Bereiche eines Bildes markieren, die gedehnt werden können. Sie haben eine Erweiterung wie image_name.9.png.

2.Wo werden sie in Android-Projekten gespeichert?

res/drawable/image_name.9.png

3.Wie kann ich ein NinePatch-Image für Ihre Android-App erstellen?

Android SDK enthält ein WYSIWIG draw9patch.jar-Tool in Ihrem Android SDK /tools-Ordner.

enter image description here

2
Prateek Joshi

Hauptvorteile von 9-Patch gegenüber normalen Png

Tatsächlich sind 9 Patch Bilder dehnbar, wiederholbare Bilder werden auf ihre kleinste Größe reduziert. Das Bild wird nicht gedehnt und verliert die Proportionen in verschiedenen Bildschirmgrößen. Ein weiterer und größter Vorteil ist das Gedächtnis. 

Der gleiche kleine Speicher kann für Geräte mit unterschiedlicher Bildschirmgröße wiederverwendet werden. Gut entworfene 9-Patch-Bilder sind weniger fehleranfällig und bieten eine hohe Wiederverwendbarkeit.

https://developer.Android.com/studio/write/draw9patch.html

1
IntelliJ Amiya

Schritt 1, Da Sie noch nicht vertraut sind, bereiten Sie zunächst ein großes xxxhdpi png-Bild für die Wiedergabe vor.

Schritt 2, Das Bild, das ein expandierbares Feld haben soll, muss möglichst kürzer sein (durch Entfernen eines redundanten/wiederholten Farbteils), da 9-Patch keine solchen Sachen "verkleinern", aber das Bild "expandieren".

Ich persönlich verwende das ImageMagick-Befehlszeilenprogramm, um es zu konvertieren, z. B .:

convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi

Bei der Konvertierung gibt es eine Falle: Ich muss mit png32 einen Präfix einfügen, sonst bekommt man ein schwarzes 9-Patch-Bild, siehe diesen Thread .

Schritt 3, Bild nach Android Studio zeichnen, dann mit der rechten Maustaste klicken und Menüpunkt "9-Patch-Datei erstellen ..." auswählen. Ein .9.png neues Bild wird mit demselben Bildnamen erstellt. Jetzt kann das Originalbild einfach gelöscht werden. Vorsicht beim Umspielen mit Refactor zum Umbenennen für Backup, da die XML-Image-ID ebenfalls umbenannt wird und Sie sich fragen, warum das 9-Patch-Image nicht funktioniert, da XML immer noch ein Non-9-Patch-Image referenziert.

Schritt 4, die linken und oberen 2 schwarzen Linien bilden einen erweiterbaren rechteckigen Bereich, während die rechten und unteren 2 schwarzen Linien einen rechteckigen Textbereich bilden.

Ihre Bildgröße wird in Ihrem deklarierbaren erweiterbaren Bereich größer, wenn der Text wächst. Während der Textbereich bedeutet, dass nur Text in diesem Bereich zulässig ist. 

Sie müssen den schwarzen Punkt/die schwarzen Linien nicht für eine einfache Verwendung von Grund auf neu zeichnen. 4 schwarze Linien waren bereits hinter dem oberen, linken, unteren und rechten Rand des Bildes vorhanden, wenn Ihr mit Android Studio erstelltes 9-Patch-Bild erstellt wurde. Vergrößern Sie die Ansicht, wenn Sie diese Linien nicht ziehen können. 

Die ursprüngliche Position von 2 schwarzen Linien (vertikal und horizontal) deklariert einen erweiterbaren Bereich:

  • Die ursprüngliche Position der linken vertikalen Linie liegt zwischen links oben und links unten 
  • Die ursprüngliche Position der oberen horizontalen Linie liegt zwischen links oben und rechts oben. 

Die ursprüngliche Position von 2 schwarzen Linien (vertikal und horizontal) deklariert einen Textbereich:

  • Die ursprüngliche Position der rechten vertikalen Linie befindet sich zwischen rechts oben und rechts unten. 
  • Die ursprüngliche Position der unteren horizontalen Linie befindet sich zwischen links unten und rechts unten.

Oben ist die ursprüngliche Position der schwarzen Linien, bevor Sie mit dem Ziehen beginnen, um die Länge einzuengen, um die Anfangs- und Endposition dieser Linien anzupassen. 

Erweiterbare Bereiche und Textbereiche können je nach Ihren Anforderungen unterschiedlich sein. Normalerweise erweiterbarer Bereich sollte OR kleiner als Textbereich sein, ein klassisches Beispiel ist das Bild der Sprechblase:

 enter image description here

Das Bild oben hat die gleiche Breite der oberen und unteren schwarzen Linie, aber die rechte schwarze Linie ist höher als die linke. Dies bedeutet auch, dass der Text entweder in der Mindestgröße oder in der erweiterten Größe konstant bis zur Hälfte der unteren Kurve bleibt. Und es erweitert sich nur im Textbereich. 

Nun kennen Sie die zwei Vorteile von 9-Patch: Die untere und die rechte Linie bilden zusammen einen Textbereich, der perfekt gewährleistet, dass Text niemals außerhalb der Bildkurve überläuft! Und auch definiert, welcher Teil des Textbereichs dafür verantwortlich ist, das Bild mit wachsendem Text zu erweitern, während die Kurve ohne Skalierung beibehalten wird.

Bewegen Sie die Maus über die Linie, um die x, y-Positionen in Pixeln zu sehen. Es hilft, zu messen, ob beide Linien gleich oder weniger in Position sind.

Sie sollten die Position der Linie beim Ziehen berücksichtigen, da die linke Linie nach rechts ziehen kann und die rechte Linie nach links gezogen werden kann. Möglicherweise gehen Sie davon verloren, welche Linie eine expandierbare Linie und welche Linie eine Textzeile ist.

Es gibt zwei wichtige Kontrollkästchen, die Sie ankreuzen sollten, d. H. Kontrollkästchen "Patches anzeigen" und "Fehlerhafte Patches anzeigen". 

Wenn Sie im Kontrollkästchen "Fehler anzeigen" den erweiterbaren Bereich zeichnen, jedoch die gekrümmte Linie Ihres Bildes anstelle einer geraden Linie abdecken, wird dieser Bereich als rot markiert, um Sie zu warnen. Sie können Ihre Linie eingrenzen, um die rote Warnung zu verwerfen, oder sie einfach ignorieren. Denken Sie daran, dass die rote Warnung möglicherweise irreführend ist, was tatsächlich durch die Gegenlinie verursacht werden kann. In diesem Fall müssen Sie die Gegenlinie einschränken, um die rote Warnung zu verwerfen.

Schritt 5, In XML können Sie dieses Bild wie folgt als TextView-Hintergrund verwenden. Verwenden Sie wrap_content, um es erweiterbar zu machen:

<LinearLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/your_9_patch_image_name_excluded_.9"
    Android:orientation="vertical">
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

Wenn Sie zum ersten Mal damit herumspielen, wird sichergestellt, dass das Textview oder das übergeordnete Layout nicht aufgefüllt wird. Andernfalls fragen Sie sich, warum Sie nicht wie erwartet arbeiten.

Beispiel für einen Schaltflächenhintergrund:

    <Button
        Android:id="@+id/btn2"
        Android:layout_width="wrap_content"
        Android:layout_height="40dp"
        Android:background="@drawable/your_9_patch_image_name_excluded_.9"
        Android:layout_gravity="center"
        />
1
林果皞

Das ist ein gutes Werkzeug: Hier klicken.

9 Patch-Bilder sind dehnbare, wiederholbare Bilder, die auf ihre kleinste Größe reduziert sind. Das einfachste Beispiel wäre, wenn Sie ein abgerundetes Div nehmen und es in 9 Felder schneiden würden, wie Sie es mit einem Tic-Tac-Toe-Board tun würden. Die vier Ecken würden die Größe nicht ändern, wären aber statisch, während die anderen 5 Teile gedehnt oder wiederholt würden, damit das gesamte Bild entsprechend skaliert werden kann.

Mit dieser Erklärung und dem Aufkommen von CSS3 denken Sie vielleicht, dass es keinen Grund gibt, 9 Patch-Bilder zu verwenden, aber der Name "9 Patch" ist eine Fehlbezeichnung. Die Bilder können in noch kleinere Stücke geschnitten werden.

9 Patch-Bilder enthalten einen Index, aus dem ein Teil besteht, indem Sie dem Bild einen 1px-Rahmen hinzufügen. Die Farben in der Umrandung bestimmen, ob ein Teil statisch ist (nicht skaliert), es streckt oder wiederholt wird.

Google Slideshow: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

Siehe auch die Android-Entwicklerinformationen zu 9-Patch-Bildern: http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch

0
Roga Men