UI 9-Slice-Design

Wenn Sie UI mit benutzerdefinierten Grenzen und Ecken erstellen, müssen Sie Elemente in verschiedenen Aspekt-Ansichten rendern und visuell umgeben, um lokalisierten Text oder andere Inhalte unbekannter Dimensionen zu rendern. Dies ermöglicht es Ihnen, UI-Elemente verschiedener Größen zu erstellen, ohne die Grenzen oder Ecken zu verzögern.

Unter dem 9-Slice -Ansatz wird ein Bild (ein einzelnes Objekt) intern in neun Unter-Bilder aufgeteilt, jedes mit verschiedenen Skalierungsvorschriften.

Studio-Editor

Die Konfiguration von Slice ist möglich, indem Sie die Enum.ScaleType und die Slice-Eigenschaften auf einem Bild-Label oder -Button direkt einstellen, aber Studio's integrierter 9-Slice-Editor ist intuitiver.

Öffnen des Editors

Um den visuellen 9-Slice-Editor in Studio zu öffnen:

1. Wählen Sie ein ImageLabel oder ImageButton mit einer gültigen Asset-ID, die in sein Bild -Feld eingegeben ist.

1. Setzen Sie die ScaleType Eigenschaft auf Slice .

1. Klicken Sie auf die SliceCenter -Eigenschaft, die angezeigt wird, dann klicken Sie auf die … innerhalb der Zeile.

1. Das sich öffnende Fenster überlässt 4 rote Linien, die das Bild repräsentieren, die Kanten der Slices. Die Quellbildgröße wird auch angezeigt.

Versatz einstellen

In Studio, ziehen Sie die roten Linien, um die Offsets von der linken, rechten, oberen und unteren Kante des Bildes zu setzen.

Wenn Sie die Draggerzeilen neu positionieren, wird das UI-Element automatisch aktualisiert, um das Ergebnis anzuzeigen.