Zielgruppe: Designer und Frontend, die Android-.9.png für HUD, Panels und wiederverwendbares UI-Chrome liefern. Sie brauchen einen sauberen 1-Pixel-Steuerrand, dichtetreue Exporte und einen binären QA-Vertrag, damit Assets nicht endlos zwischen Figma und Gradle pendeln.
Nutzen: klare Trennung von Stretch- und Padding-Zonen, eine Vergleichstabelle zu Rand-, Alpha- und ICC-Regeln sowie konkrete Remote-Mac-mini-M4-Parameter für Nachtläufe. Vertiefung: Mac PNG: sRGB vs. Display P3, Figma: PNG-Pixel-Ausrichtung auf M4 und OpenClaw: PNG-QA im Stapel auf Remote Mac.
Inhaltsverzeichnis
Normen & Spezifikation: Steuerrand lesen
Die meisten Produktionsfehler sind Geometrie und Metadaten, kein Geschmack: zu schmale Stretch-Spalten, die auf dem Gerät als ein lautes Pixel wirken; Padding, das nicht zu den Safe-Zones im Design passt; ein weicher Steuerrand mit Grauwerten 1–254, der Insets verschiebt; oder ICC-Drift zwischen P3-Arbeitsmonitor und sRGB-QA-Handy. Nine-Patch ist eine Layout-API im Raster.
Der äußere ein Pixel breite Rand ist Metadaten, keine Dekoration. Schwarz auf oben und links markiert dehnbare Spalten und Zeilen. Schwarz auf unten und rechts begrenzt die Padding-Box für Kind-Views. Rand-Pixel müssen entweder deckend schwarz oder vollständig transparent sein. Die Ecken bleiben transparent, damit der Decoder horizontale und vertikale Marken unabhängig lesen kann. Kantenglättetes Innenmotiv mindestens ein Pixel vom Ring entfernt halten, damit Resampler den Saum nie anfassen. Für Spiele-HUDs lohnt sich ein kurzer Abgleich mit dem Engine-Team: manche Custom-Shader erwarten symmetrische Padding-Boxen, andere erlauben bewusst asymmetrische Insets – das gehört ins Ticket, nicht nur in den Kommentar-Layer.
Vergleich: 1-px-Rand, transparente Kante, Skalierung, sRGB
Die folgende Tabelle ist der Design-zu-Build-Vertrag. Basis ist klassisches mdpi-Denken, sofern Ihr Studio keine andere Namenskonvention festgeschrieben hat.
| Thema | 1-px-Rand-Regel | Transparente Kante | Skalierung (@1x / @2x / @3x) | sRGB-Export |
|---|---|---|---|---|
| Stretch-Marken (oben + links) | Durchgehend schwarz; ≥ 2 px breit pro Achse im nativen Export | Nicht markierte Zellen voll transparent | Baseline mit 1,0 / 1,5 / 2,0 / 3,0; doppelte Rundung vermeiden | sRGB IEC61966-2.1 einbetten; P3 nur mit Freigabe |
| Padding-Marken (unten + rechts) | Getickete Insets exakt treffen; symmetrisch, sofern keine Asymmetrie spezifiziert | Ecken transparent für beide Achsen | dp im Layout-Inspektor nach Export erneut prüfen | Gleiches ICC wie Stretch; eine Toolkette pro Drop |
| Innengrafik | Lebendige Pixel ≥ 1 px innerhalb des Rings | Weiche Kanten nur innen, nicht unter dem Saum | Raster auf Ziel-Dichte; dokumentierter Downscale-Schärfen-Fall | sRGB, dann verlustfrei rekomprimieren; ICC im Manifest |
Stapel-Export-Workflow
Geordnete Schritte machen Nacht-QA deterministisch und geben Producer und Entwicklung dieselbe Definition of Done.
- Logik einfrieren: dp-Breite, Eckenradien und welche Kanten strecken; pro Dichte-Bucket einen Master, damit Padding-Mathematik nachvollziehbar bleibt.
- Markierungen zuletzt: Stretch und Padding auf einem Vektor-Overlay am Pixelraster, dann mergen – so lassen sich Audits per Diff schnell fahren.
- Ordnernamen: konsistente
drawable-*dpi- oder Flavor-Pfade, damit CI-Globs pro Bucket die richtigen Byte- und Maß-Obergrenzen anwenden. - Eine Toolkette: macOS
sipsoder ImageMagick für den ganzen Sprint verhindert ICC-Überraschungen, wenn Windows- und Mac-Exporte gemischt werden. - Skript-Gates: Alpha-Kanal erzwingen; RGB-Werte am äußeren Ring strikt außerhalb 1–254 ablehnen; ungerade Maße markieren, falls die Pipeline sie verbietet.
- Manifest:
sha256,px_w,px_h,density,iccund Preset-Version neben die PNGs legen. - Visuelle Stichprobe: mindestens ein Asset pro Dichte-Bucket im Emulator oder auf Referenzhardware mit Layout-Inspektor öffnen; so fallen Off-by-one-Padding-Fehler auf, die reine Skripte oft übersehen.
FAQ: Farbabweichungen & Zahnkanten
Warum wirken Neutraltöne nach dem Strecken leicht verfärbt?
Premultiplizierte Kanten plus falsches Gamma verzerren Graustufen. Straight Alpha bevorzugen, sRGB einbetten, auf einem mittleren sRGB-Smartphone vorabnehmen – siehe auch die Farbmanagement-Checkliste.
Haarnadel-Nähte bei Wiederholung?
Stretch-Zone zu schmal oder enthält einen Verlauf. Dehnbare Bahnen verbreitern; Verläufe in feste Zeilen/Spalten legen, nicht in die markierte Stretch-Linie. Prüfen Sie außerdem, ob die finale View-Höhe in dp auf ungerade Gerätepixel fällt: dann kann selbst korrektes Nine-Patch durch bilineare Skalierung der Eltern-View minimal „zittern“ – ggf. Container-Maße oder zusätzliche feste Pixelzeilen abstimmen.
WebP statt Nine-Patch?
Kein Drop-in für klassisches View-Nine-Patch. Vector- oder Compose-Migrationen sind eigene Epics.
Remote M4: Batch-Parameter
Ein Remote Mac mini M4 eignet sich für Nachtläufe, während Laptops frei bleiben. Apple Silicon und vereinheitlichter Arbeitsspeicher halten viele mittelgroße PNGs im Speicher, während ImageMagick Alpha-Statistiken läuft. Konservativ starten, Schwellen erst verschärfen, wenn die False-Positive-Rate nahe null ist.
- Parallelität: ImageMagick-Worker ≤ physische Kerne minus eins.
- Entprellung: 20–40 s Ruhe nach letztem Schreibzugriff, bevor QA startet.
- Alpha-Staub: Fehler, wenn Alpha 1–254 innerhalb von 2 px am Ring – außer explizit freigegeben.
- Bytes: HUD-Platten oft < 180 KB bei xhdpi; schweres Chrome ≤ 400 KB ohne eingebettete Animation.
- ICC: eingebettetes sRGB verlangen oder dokumentierte Profil-Ausnahme im Manifest.
- Zeitbudget: große
drawable-Trees in 30–90 Minuten pro Nachtlauf planen; lieber zweimal stabil als einmal mit Timeouts, damit CI-Artefakte vergleichbar bleiben.
Fazit & nächster Schritt
Nine-Patch liefert Layout-Logik als Bitmap. Wer den Ein-Pixel-Vertrag und skriptgestützte Gates einhält, vermeidet „fast richtiges“ Chrome auf Einsteiger-Geräten. Ein Remote Mac M4 gleicht Exporte mit der Referenz-Pipeline ab und entlastet Rechner für Compositing und Motion.
Begrenzte Zeit: MacPng-Tarife und Knoten ohne Anmeldung durchstöbern, anschließend Zugriff per SSH/VNC für wiederholbare Abnahme auf Apple Silicon anbinden. Wenn Produktion den gleichen Remote-Knoten für Export und QA nutzt, sinkt die Diskussion „bei mir sieht es anders aus“ – alle ziehen aus derselben Pipeline, dieselben Schwellen, dieselbe Profil-Politik.