Wenn du Benutzeroberfläche mit benutzerdefinierten Grenzen und Ecken erstellst, musst du oft Elemente bei verschiedenen Aspektverhältnissen rendern und visuell um lokalisierten Text oder andere Inhalte von unbekannten Dimensionen herum gruppieren.Dadurch können Sie Benutzeroberflächenelemente unterschiedlicher Größe erstellen, ohne die Grenzen oder Ecken zu verzerren.
Im Rahmen des 9-Slice-Ansatzes wird eine Bild (ein einzelnes Objekt) intern in neun Unterbilder aufgeteilt, jedes mit unterschiedlichen Skalierungsregeln.
| Unterbild | Skalierung |
|---|---|
| 1379 (ecken) | keine |
| 28 (oben-/unterkanten) | vertikal |
| 46 (links/rechte ecken) | vertikal |
| 5 (mitte) | vertikal + horizontal |
Studio-Bearbeiter
Die Slicer-Konfiguration ist möglich, indem Sie die Enum.ScaleType und Slicer-Eigenschaften direkt auf einem Bild-Label oder -Button festlegen, aber der integrierte 9-Slicer-Editor von Studio ist intuitiver.
Editor öffnen
Um den visuellen 9-Slice-Editor in Studio zu öffnen:
- Wählen Sie ein ImageLabel oder ImageButton mit einer gültigen Asset-ID, die in sein Bild Feld eingegeben wurde.
- Setze die Skalentyp -Eigenschaft auf Scheibe .
- Klicken Sie auf die SliceCenter -Eigenschaft, die erscheint, dann klicken Sie auf die … innerhalb der Zeile.
- Im sich öffnenden Fenster überlagern 4 rote Linien das Bild, das die Ränder der Schnitte darstellt. Die Quellbildgröße wird auch angezeigt.
Versätze festlegen
In Studio ziehe die roten Linien, um die Versätze von den linken, rechten, oberen und unteren Rändern des Bildes einzustellen.
Wenn Sie eine bessere Präzision benötigen, geben Sie Versatzwerte in die Felder auf der rechten Seite des Editorfensters ein.
Wenn du die Ziehpunkte-Linien neu positionierst, wird das UI-Element automatisch aktualisiert, um das Ergebnis anzuzeigen.
Die Versatzwerte unterscheiden sich von den Eigenschaftswerten des UI-Objekts SliceCenter und repräsentieren die Anzahl der Pixel zwischen einem Rand des Quellbildes und dem Ziehpunkt, der mit dieser Seite verbunden ist.