Verwenden der Dropdownliste für die Unity-Benutzeroberfläche
Verifikations-Umgebung
- Fenster
-
- Windows 11
- Unity-Editor
-
- 2020.3.25f1
Voraussetzungen für diesen Tipp
Die folgenden Einstellungen wurden im Vorfeld als Voraussetzung für die Erklärung dieser Tipps vorgenommen.
Zuerst
Dropdowns können verwendet werden, damit der Benutzer eine von mehreren Optionen auswählen kann. Auch wenn viele Elemente zur Auswahl stehen, werden nur die ausgewählten Elemente auf dem Bildschirm angezeigt, was nützlich ist, um Platz zu sparen und es dem Benutzer leichter zu machen, zu verstehen, was er auswählt.
Positionieren eines Dropdown-Menüs
Wählen Sie ein "Dropdown" aus der Hierarchie aus, um es der Ansicht hinzuzufügen.
Passen Sie die Position des Dropdown-Menüs nach Belieben an. Wenn die Größe klein erscheint, ziehen Sie den Rahmen, um ihn zu vergrößern.
Wenn Sie die Größe des darin enthaltenen Texts festlegen möchten, wählen Sie Dropdown Er befindet sich innerhalb Label anstelle von aus.
Wenn Sie es ausführen, können Sie das Dropdown-Menü in Aktion sehen. Im Ausgangszustand stehen drei Elemente zur Auswahl, sodass Sie die Auswahl wechseln können.
Wenn Sie jedoch die Größe des Dropdown-Menüs oder Label die Schriftgröße von ändern, stimmt es nicht mit der Größe des in der Dropdown-Liste angezeigten Texts überein.
Anpassen der Größe von Dropdown-Elementen
Wenn Sie die Größe des Objekts oder die Schriftgröße beim Platzieren des Dropdown-Menüs nicht geändert haben, müssen Sie dies nicht tun, aber wenn Sie es tun, müssen Sie auch das Dropdown-Element festlegen.
Das Dropdown-Objekt enthält eine Definition, wie das ausgewählte Element angezeigt wird, wenn es angezeigt wird.
Dropdown Template ist der Fall. Wenn Sie nicht ein paar Einstellungen vornehmen, sieht es nicht schön aus.
Zunächst wird davon ausgegangen, dass jeder Parameter des platzierten Dropdown-Menüs wie folgt festgelegt wird. Wenn Sie mit anderen Parametern einstellen, ersetzen Sie die Zahlen und lesen Sie sie. In diesem Beispiel werden auch andere Parameter festgelegt, die jedoch weggelassen werden, da sie sich nicht auf die Dropdown-Elemente beziehen.
| Wert für den Objektparameternamen | ||
|---|---|---|
| Dropdown-Liste | Höhe | 72 |
| Dropdown->-Beschriftung | Schriftgrad | 40 |
Schriftgröße des Elements
Ändern Sie zunächst die Schriftgröße des Elements. Wählen Sie > > >Dropdown Template Content > > Viewport Item Item Labelfür das Objekt aus.
Geben Sie eine Schriftgröße von 40 an, die mit der Schriftgröße Beschriftung identisch ist. Wenn Sie mehr Auswahlmöglichkeiten anzeigen möchten, können Sie sie etwas kleiner machen.
Selbst wenn Sie die Schriftgröße erhöhen, ändert sich die Anzeigegröße eines Elements nicht, sodass Sie möglicherweise nichts sehen können, selbst wenn Sie es ausführen.
Artikelgröße
Legen Sie als Nächstes die Größe eines Elements fest.
Die auszuwählenden Objekte sind > > > >Dropdown Template . Content Item Viewport
Legen Sie die Höhe auf 72 fest. Wenn Sie mehr Auswahlmöglichkeiten anzeigen möchten, können Sie sie etwas kleiner machen.
Dadurch werden die Elemente des Elements sichtbar, aber aus irgendeinem Grund werden der obere und untere Rand des ausgewählten Elements unabhängig vom Scrollen ein wenig abgeschnitten.
Um dieses Problem zu beheben, legen Sie die Höhe von > > >Dropdown Viewport ContentTemplate auf 72 festItem, was mit identisch ist.
Auf diese Weise können Sie die oberen und unteren Elemente richtig sehen.
Übrigens, in den Standard-Dropdown-Einstellungen Item wird die Höhe von etwas größer als Content festgelegt.
Dadurch wird oberhalb und unterhalb des ausgewählten Elements ein leichter Rand angezeigt, wodurch das Druckgefühl reduziert wird.
Größe des Häkchens
Die Größe des Häkchens ist auch klein, also werde ich es korrigieren.
Das Zielobjekt ist "> > Viewport > > >Item CheckmarkContent Item Template".Dropdown
Wenn Sie die Breite und Höhe ändern, wird auch das Häkchen größer, also setzen Sie es hier auf 72.
Wenn ich es ausführe, ist das Häkchen größer, aber die Position ist falsch, also werde ich dies auch beheben.
Item Checkmark Setzen Sie zuerst den Drehpunkt X auf 0 und dann auch die Position X auf 0.
Auf diese Weise können Sie es unabhängig von der Größe des Schecks oder Etiketts an einem guten Ort platzieren.
Da es sich mit der Beschriftung überlappt, wählen Sie diese Option aus, Item Lebel um die linke Position mit der Größe des Häkchens identisch zu machen.
Größe der Bildlaufleiste
Die Bildlaufleiste ist ebenfalls klein und schwer zu klicken, also machen Sie sie größer. Jeder ist wählerisch, was die Größe angeht, daher ist es nicht etwas, das bestimmt werden kann. In diesem Fall legen wir 48 fest, was 2/3 der Höhe des Dropdown-Menüs entspricht.
Das auszuwählende Objekt wird in > >Dropdown Template Scrollbarauf einen Breitenwert gesetzt.
Größe des Dropdown-Symbols
Es ist nicht auf der Elementseite, aber das Dropdown-Symbol ist immer noch klein, also werde ich es ändern.
Das auszuwählende Objekt ist >Dropdown Arrow.
Was die Größe des Symbols betrifft, so können Sie die Größe ändern, indem Sie die Breite und Höhe festlegen. Hier legen wir sie auf 72 fest, was der Höhe des Dropdown-Menüs entspricht.
Wenn dies der Fall ist, ist die Position falsch, also setzen Sie den Pivot X auf 1 und die Position X auf 0. Auf diese Weise können Sie das Symbol unabhängig von der Größe an einer schönen Position anzeigen.
Anzahl der angezeigten Dropdown-Elemente
Wenn Sie die Größe des Elements erhöhen, gibt es weniger ausgewählte Elemente, die gleichzeitig angezeigt werden können, daher werden wir versuchen, dies zu erhöhen.
Diese Einstellung wird in >Dropdown Templatefestgelegt.
Da die Anzahl der anzuzeigenden Elemente nicht durch die Anzahl der Elemente angegeben wird, sondern die Größe durch die Höhe festgelegt wird, ist der angegebene Wert "die Höhe × Anzahl der Elemente".
Hier wollen wir ca. 10 Stück zeigen, also 72 x 10 = 720 setzen Sie .
Der Anzeigebereich ist vergrößert, aber im Moment gibt es nur 3 Elemente, so dass nur 3 Elemente angezeigt werden.
Festlegen der Auswahl
Standardmäßig sind drei Elemente von "Option A ~ Option C" festgelegt.
Diese Elemente befinden sich Dropdown in der Komponente des Objekts Dropdown .
Wenn Sie im Inspektor nach unten scrollen, finden Sie den Punkt "Optionen", in dem Sie den Namen frei ändern oder hinzufügen oder löschen können.
Festlegen der Anfangsauswahl
Die Auswahl der Artikel wird durch Zahlen bestimmt.
Dropdown Dropdown Sie können die anfängliche Auswahl im Wert der Komponente des Objekts angeben.
Die Artikelnummerierung beginnt bei 0, also legen Sie 3 fest, wenn Sie möchten, dass die vierte die erste Auswahl ist.
Ausführen der Verarbeitung bei der Auswahl eines Elements
Möglicherweise möchten Sie etwas tun, wenn Sie ein Element in der Dropdown-Liste auswählen. Dies kann auf die gleiche Weise umgesetzt werden, wie wenn ein Button angeklickt wird.
Das Objekt verfügt nacheinander über ein Dropdown-Menü und einen Text. Nachdem Sie ein Element in der Dropdown-Liste ausgewählt haben, stellen Sie sicher, dass der Inhalt in einem Textobjekt auf der rechten Seite angezeigt wird. Es spielt keine Rolle, außer der Platzierung der Objekte, so dass Sie es nach Belieben einrichten können.
Erstellen Sie zunächst ein Skript in Ihrem Projekt. DropdownItemSelector In diesem Fall heißt es .
Öffnen Sie das Skript, und fügen Sie den Code wie folgt hinzu:
using UnityEngine;
using UnityEngine.UI;
public class DropdownItemSelector : MonoBehaviour
{
<summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
[SerializeField] Text TextValueSetter;
<summary>値を取得するドロップダウンオブジェクト。</summary>
[SerializeField] Dropdown Dropdown;
<summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
public void OnSelectionChanged()
{
// ドロップダウンの選択値と選択しているアイテムのテキストを表示
TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
}
}
Nachdem Sie das Skript gespeichert haben, fügen Sie es an das EventSystem Objekt an.
Wie in den Tipps für Schaltflächen erläutert, werden mit diesem Tipp Skripts konsistent angefügt EventSystem , es sei denn, es gibt einen bestimmten Grund dafür.
Fügen Sie ein Dropdown-Objekt zum Abrufen des Werts und ein Textobjekt zum Festlegen des Werts an.
Wählen Sie als Nächstes das Dropdown-Objekt aus, mit dem Sie arbeiten möchten, und fügen Sie "On Value Change (Int32)" in der Dropdown Inspector-Komponente hinzu.
Im unteren linken Punkt müssen wir das Objekt einfügen, an das das zu bedienende Skript angehängt ist, also setzen wir es hier EventSystem .
Wählen Sie aus Keine Funktion DropdownItemSelector aus OnSelectionChanged .
Versuchen Sie, es auszuführen, um zu sehen, ob es ordnungsgemäß funktioniert.
Dynamisches Hinzufügen von Elementen
Sie können festlegen, welche Gegenstände im Editor ausgewählt werden können, aber es kann vorkommen, dass sich der Status während des Spiels ändert und Sie die ausgewählten Elemente ändern möchten. In diesem Fall ändern Sie das im Programm ausgewählte Element.
Das Objekt ordnet "Dropdown" und "Schaltfläche x2" wie unten gezeigt an. Sie können andere Parameter als die Ausrichtung frei festlegen.
Erstellen Sie ein Skript und nennen DropdownDynamic Sie es . Der Code sollte wie folgt aussehen:
using UnityEngine;
using UnityEngine.UI;
public class DropdownDynamic : MonoBehaviour
{
<summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
[SerializeField] Dropdown Dropdown;
<summary>追加ボタンをクリックしたとき。</summary>
public void OnClickAdd()
{
// アイテムを追加します
Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });
// ドロップダウンの内容を更新します
Dropdown.RefreshShownValue();
}
<summary>削除ボタンをクリックしたとき。</summary>
public void OnClickRemove()
{
// アイテムを削除します
if (Dropdown.options.Count >= 1)
{
Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
}
// ドロップダウンの内容を更新します
Dropdown.RefreshShownValue();
}
}
Dropdown.options verfügt über eine Kontrolle über die Elemente, die ausgewählt werden sollen, sodass Add Sie die Elemente dynamisch steuern können, indem Sie sie ausführen oder Remove auf ihnen anwenden.
EventSystem Anhängen von Skripts und Objekten an .
Weisen Sie dem click-Ereignis der Schaltflächen "Hinzufügen" bzw. "Löschen" eine Methode zu.
Wenn Sie fertig sind, führen Sie es aus. Wenn das Element im Editor gelöscht wird, wird es nicht angezeigt, auch wenn Sie darauf klicken.
Wenn Sie viermal auf die Schaltfläche "Hinzufügen" klicken, können Sie sehen, dass vier Elemente hinzugefügt wurden.
Wenn Sie zweimal auf die Schaltfläche "Löschen" klicken, können Sie sehen, dass zwei Elemente gelöscht wurden.