Ενότητα

Χρήση του αναπτυσσόμενου μενού Unity UI

Σελίδα ενημέρωση :
Ημερομηνία δημιουργίας σελίδας :

Περιβάλλον επαλήθευσης

παράθυρα
  • Παράθυρα 11
Επεξεργαστής ενότητας
  • 2020.3.25στ1

Προϋποθέσεις για αυτήν τη συμβουλή

Οι ακόλουθες ρυθμίσεις έχουν γίνει εκ των προτέρων ως προϋπόθεση για την εξήγηση αυτών των συμβουλών.

Αρχικά

Τα αναπτυσσόμενα μενού μπορούν να χρησιμοποιηθούν για να επιτρέψουν στον χρήστη να επιλέξει μία από τις πολλές επιλογές. Ακόμα κι αν υπάρχουν πολλά στοιχεία για να διαλέξετε, μόνο τα επιλεγμένα στοιχεία εμφανίζονται στην οθόνη, κάτι που είναι χρήσιμο για την εξοικονόμηση χώρου και διευκολύνει τον χρήστη να καταλάβει τι επιλέγει.

Τοποθέτηση αναπτυσσόμενου μενού

Επιλέξτε ένα "αναπτυσσόμενο μενού" από την ιεραρχία για να το προσθέσετε στην προβολή.

Προσαρμόστε τη θέση του αναπτυσσόμενου μενού κατά την κρίση σας. Εάν το μέγεθος φαίνεται μικρό, σύρετε το πλαίσιο για να το μεγεθύνετε.

Για να Dropdown ορίσετε το μέγεθος του κειμένου μέσα, επιλέξτε Είναι μέσα Label αντί για .

Όταν το εκτελείτε, μπορείτε να δείτε το αναπτυσσόμενο μενού σε δράση. Στην αρχική κατάσταση, υπάρχουν τρία στοιχεία για να διαλέξετε, ώστε να μπορείτε να αλλάξετε την επιλογή. Ωστόσο, εάν αλλάξετε το μέγεθος του αναπτυσσόμενου μενού ή Label το μέγεθος γραμματοσειράς του , δεν θα ταιριάζει με το μέγεθος του κειμένου που εμφανίζεται στο αναπτυσσόμενο μενού.

Προσαρμογή του μεγέθους των αναπτυσσόμενων στοιχείων

Εάν δεν έχετε αλλάξει το μέγεθος του αντικειμένου ή το μέγεθος γραμματοσειράς όταν τοποθετείτε το αναπτυσσόμενο μενού, δεν χρειάζεται να το κάνετε αυτό, αλλά εάν το κάνετε, θα πρέπει να ορίσετε και το αναπτυσσόμενο στοιχείο.

Το αναπτυσσόμενο αντικείμενο περιέχει έναν ορισμό του τρόπου εμφάνισης του επιλεγμένου στοιχείου όταν εμφανίζεται. Dropdown Template είναι η περίπτωση. Εάν δεν ορίσετε μερικές ρυθμίσεις, δεν θα φαίνεται όμορφο.

Πρώτα απ 'όλα, θεωρείται ότι κάθε παράμετρος του τοποθετημένου αναπτυσσόμενου μενού έχει οριστεί ως εξής. Εάν ρυθμίζετε με διαφορετικές παραμέτρους, αντικαταστήστε τους αριθμούς και διαβάστε τους. Σε αυτό το παράδειγμα, ορίζονται και άλλες παράμετροι, αλλά παραλείπονται επειδή δεν σχετίζονται με τα αναπτυσσόμενα στοιχεία.

Τιμή ονόματος παραμέτρου αντικειμένου
Αναπτυσσόμενο μενού ύψος 72
Αναπτυσσόμενη ετικέτα > Μέγεθος γραμματοσειράς 40

Μέγεθος γραμματοσειράς στοιχείου

Πρώτα, αλλάξτε το μέγεθος γραμματοσειράς του στοιχείου. Επιλέξτε > > >Dropdown Template Content > > Viewport Item Item Labelγια το αντικείμενο. Καθορίστε ένα μέγεθος γραμματοσειράς 40, το οποίο είναι το ίδιο με το Label. Εάν θέλετε να εμφανίσετε περισσότερες επιλογές, μπορείτε να τις κάνετε λίγο μικρότερες.

Ακόμα κι αν αυξήσετε το μέγεθος της γραμματοσειράς, το μέγεθος εμφάνισης ενός στοιχείου δεν αλλάζει, επομένως ενδέχεται να μην μπορείτε να δείτε τίποτα ακόμα και αν το εκτελέσετε.

Μέγεθος στοιχείου

Στη συνέχεια, ορίστε το μέγεθος ενός στοιχείου. Τα αντικείμενα που πρέπει να επιλέξετε είναι > > > >Dropdown . Content Item Template Viewport Ρυθμίστε το ύψος σε 72. Εάν θέλετε να εμφανίσετε περισσότερες επιλογές, μπορείτε να τις κάνετε λίγο μικρότερες.

Αυτό καθιστά ορατά τα στοιχεία του στοιχείου, αλλά για κάποιο λόγο, το επάνω και το κάτω μέρος του επιλεγμένου στοιχείου κόβονται λίγο ανεξάρτητα από την κύλιση.

Για να διορθώσετε αυτό το πρόβλημα, ορίστε το ύψος του > > >Dropdown Viewport ContentTemplate σε Item 72, το οποίο είναι το ίδιο με το . Αυτό θα σας επιτρέψει να δείτε σωστά τα επάνω και κάτω στοιχεία.

Παρεμπιπτόντως, στις προεπιλεγμένες αναπτυσσόμενες ρυθμίσεις Item , το ύψος του έχει οριστεί ελαφρώς μεγαλύτερο από Content . Ως αποτέλεσμα, εμφανίζεται ένα μικρό περιθώριο πάνω και κάτω από το επιλεγμένο στοιχείο, μειώνοντας την αίσθηση πίεσης.

Μέγεθος σημαδιού επιλογής

Το μέγεθος του σημείου επιλογής είναι επίσης μικρό, οπότε θα το διορθώσω. Το αντικείμενο προορισμού είναι "> >DropdownViewport > > > Template Item Content Item Checkmark".

Εάν αλλάξετε το πλάτος και το ύψος, το σημάδι επιλογής θα αυξηθεί επίσης, οπότε ορίστε το σε 72 εδώ.

Όταν το εκτελώ, το σημάδι επιλογής είναι μεγαλύτερο, αλλά η θέση είναι λάθος, οπότε θα το διορθώσω επίσης.

Item Checkmark Πρώτα, ορίστε το pivot X σε 0 και, στη συνέχεια, ορίστε τη θέση X σε 0 επίσης. Αυτό σας επιτρέπει να το τοποθετήσετε σε καλό μέρος ανεξάρτητα από το μέγεθος της επιταγής ή της ετικέτας.

Επίσης, εφόσον επικαλύπτει την ετικέτα, Item Lebel επιλέξτε να κάνετε την αριστερή θέση ίδια με το μέγεθος του σημαδιού ελέγχου.

Μέγεθος γραμμής κύλισης

Η γραμμή κύλισης είναι επίσης μικρή και δύσκολο να κάνετε κλικ, οπότε κάντε την μεγαλύτερη. Ο καθένας είναι συγκεκριμένος για το μέγεθος, οπότε δεν είναι κάτι που μπορεί να προσδιοριστεί. Σε αυτήν την περίπτωση, ορίζουμε 48, που είναι τα 2/3 του ύψους του αναπτυσσόμενου μενού.

Το αντικείμενο που θα επιλεγεί ορίζεται σε μια τιμή πλάτους σε > >Dropdown Template Scrollbar.

Μέγεθος αναπτυσσόμενου εικονιδίου

Δεν είναι από την πλευρά του στοιχείου, αλλά το αναπτυσσόμενο εικονίδιο είναι ακόμα μικρό, οπότε θα το αλλάξω. Το αντικείμενο που θα επιλεγεί είναι >Dropdown Arrow.

Όσον αφορά το μέγεθος του εικονιδίου, μπορείτε να αλλάξετε το μέγεθος ρυθμίζοντας το πλάτος και το ύψος. Εδώ, το ορίζουμε σε 72, το οποίο είναι το ίδιο με το ύψος του αναπτυσσόμενου μενού.

Εάν συμβαίνει αυτό, η θέση θα είναι απενεργοποιημένη, οπότε ορίστε τον άξονα X σε 1 και τη θέση X σε 0. Αυτό σας επιτρέπει να εμφανίσετε το εικονίδιο σε ωραία θέση ανεξάρτητα από το μέγεθος.

Αριθμός αναπτυσσόμενων στοιχείων που εμφανίζονται

Αυξάνοντας το μέγεθος του αντικειμένου, υπάρχουν λιγότερα επιλεγμένα στοιχεία που μπορούν να εμφανιστούν ταυτόχρονα, επομένως θα προσπαθήσουμε να το αυξήσουμε. Αυτή η ρύθμιση καθορίζεται στο >Dropdown Template. Δεδομένου ότι ο αριθμός των αντικειμένων που θα εμφανίζονται δεν καθορίζεται από τον αριθμό των αντικειμένων, αλλά το μέγεθος ορίζεται από το ύψος, η καθορισμένη τιμή είναι "το ύψος × ο αριθμός των αντικειμένων". Εδώ, θέλουμε να εμφανίσουμε περίπου 10 κομμάτια, έτσι 72 x 10 = 720 ώστε .

Η περιοχή προβολής είναι διευρυμένη, αλλά προς το παρόν υπάρχουν μόνο 3 στοιχεία, επομένως εμφανίζονται μόνο 3 στοιχεία.

Ορίστε την επιλογή

Από προεπιλογή, έχουν οριστεί τρία στοιχεία της "Επιλογής A ~ Επιλογή C". Αυτά τα Dropdown στοιχεία βρίσκονται στο στοιχείο του αντικειμένου Dropdown .

Εάν μετακινηθείτε προς τα κάτω στον επιθεωρητή, θα βρείτε το στοιχείο "Επιλογές", όπου μπορείτε να αλλάξετε ελεύθερα το όνομα ή να προσθέσετε ή να διαγράψετε.

Ορισμός της αρχικής επιλογής

Η επιλογή των στοιχείων καθορίζεται από αριθμούς. Dropdown Dropdown Μπορείτε να καθορίσετε την αρχική επιλογή στην τιμή του στοιχείου του αντικειμένου. Η αρίθμηση στοιχείων ξεκινά από 0, οπότε ορίστε 3 εάν θέλετε η τέταρτη να είναι η αρχική επιλογή.

Εκτέλεση επεξεργασίας κατά την επιλογή ενός στοιχείου

Μπορεί να θέλετε να κάνετε κάτι όταν επιλέγετε ένα στοιχείο στο αναπτυσσόμενο μενού. Αυτό μπορεί να εφαρμοστεί με τον ίδιο τρόπο όπως όταν κάνετε κλικ σε ένα κουμπί.

Το αντικείμενο έχει ένα αναπτυσσόμενο μενού και ένα κείμενο, ένα κάθε φορά. Αφού επιλέξετε ένα στοιχείο στο αναπτυσσόμενο μενού, βεβαιωθείτε ότι το περιεχόμενο εμφανίζεται σε ένα αντικείμενο κειμένου στα δεξιά. Δεν έχει σημασία τίποτα άλλο από την τοποθέτηση των αντικειμένων, ώστε να μπορείτε να το ρυθμίσετε όπως θέλετε.

Αρχικά, δημιουργήστε ένα σενάριο στο έργο σας. DropdownItemSelector Σε αυτή την περίπτωση, ονομάζεται .

Ανοίξτε τη δέσμη ενεργειών και προσθέστε τον κώδικα στα εξής:

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}";
  }
}

Αφού αποθηκεύσετε τη δέσμη ενεργειών, επισυνάψτε την EventSystem στο αντικείμενο. Όπως εξηγείται στην ενότητα Συμβουλές για κουμπιά, αυτή η συμβουλή επισυνάπτει σταθερά δέσμες ενεργειών, εκτός εάν υπάρχει συγκεκριμένος EventSystem λόγος για να το κάνετε.

Επισυνάψτε ένα αναπτυσσόμενο αντικείμενο για να λάβετε την τιμή από και ένα αντικείμενο κειμένου για να ορίσετε την τιμή.

Στη συνέχεια, επιλέξτε το αναπτυσσόμενο αντικείμενο με το οποίο θέλετε να εργαστείτε και προσθέστε "On Value Change (Int32)" στο Dropdown στοιχείο Inspector.

Στο κάτω αριστερό στοιχείο, πρέπει να βάλουμε το αντικείμενο στο οποίο είναι συνδεδεμένο το σενάριο που πρόκειται να λειτουργήσει, γι 'αυτό το ορίζουμε εδώ EventSystem .

Επιλέξτε από OnSelectionChanged Χωρίς λειτουργία DropdownItemSelector .

Δοκιμάστε να το εκτελέσετε για να δείτε αν λειτουργεί σωστά.

Δυναμική προσθήκη στοιχείων

Μπορείτε να καθορίσετε ποια στοιχεία μπορούν να επιλεγούν στο πρόγραμμα επεξεργασίας, αλλά μπορεί να υπάρχουν φορές που η κατάσταση αλλάζει κατά τη διάρκεια του παιχνιδιού και θέλετε να αλλάξετε τα στοιχεία που επιλέγετε. Σε αυτήν την περίπτωση, θα αλλάξετε το στοιχείο που επιλέξατε στο πρόγραμμα.

Το αντικείμενο τακτοποιεί το "drop-down" και το "button x2" όπως φαίνεται παρακάτω. Μπορείτε να ορίσετε ελεύθερα άλλες παραμέτρους εκτός από τη στοίχιση.

Δημιουργήστε ένα σενάριο και ονομάστε DropdownDynamic το . Ο κώδικας θα πρέπει να μοιάζει με αυτό:

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 Ελέγχει τα στοιχεία που θα επιλεγούν, ώστε Add να μπορείτε να ελέγχετε δυναμικά τα στοιχεία κάνοντας ή Remove πάνω τους.

EventSystem Επισύναψη δεσμών ενεργειών και αντικειμένων στο .

Αντιστοιχίστε μια μέθοδο στο συμβάν κλικ των κουμπιών προσθήκης και διαγραφής, αντίστοιχα.

Όταν τελειώσετε, εκτελέστε το. Εάν το στοιχείο διαγραφεί στο πρόγραμμα επεξεργασίας, το στοιχείο δεν θα εμφανιστεί ακόμα κι αν κάνετε κλικ σε αυτό.

Εάν κάνετε κλικ στο κουμπί προσθήκης τέσσερις φορές, μπορείτε να δείτε ότι έχουν προστεθεί τέσσερα στοιχεία.

Εάν κάνετε κλικ στο κουμπί διαγραφής δύο φορές, μπορείτε να δείτε ότι έχουν διαγραφεί δύο στοιχεία.

Χρήση κουμπιών στο περιβάλλον εργασίας χρήστη Unity
Κάντε κύλιση έτσι ώστε το επιλεγμένο στοιχείο να βρίσκεται στην κορυφή της λίστας αναπτυσσόμενων στοιχείων