Utilizarea listei verticale Unity UI

Mediul de verificare

Windows

• Ferestre 11

Unity Editor

• 2020.3.25F1

Cerințe preliminare pentru acest sfat

Următoarele setări au fost făcute în avans ca o condiție prealabilă pentru explicarea acestor sfaturi.

• Vă prezentăm pachetul sistemului de intrare
• Alinierea camerei (2D) cu pânza

La început

Meniurile derulante pot fi utilizate pentru a permite utilizatorului să selecteze una dintre mai multe opțiuni. Chiar dacă există multe elemente din care să alegeți, numai elementele selectate sunt afișate pe ecran, ceea ce este util pentru economisirea spațiului și face mai ușor pentru utilizator să înțeleagă ce selectează.

Poziționarea unui meniu vertical

Selectați un "meniu vertical" din ierarhie pentru a-l adăuga la vizualizare.

Ajustați poziția meniului derulant la discreția dvs. Dacă dimensiunea pare mică, trageți cadrul pentru a-l mări.

Pentru a seta Dropdown dimensiunea textului din interior, selectați Este înăuntru Label în loc de .

Când îl rulați, puteți vedea meniul derulant în acțiune. În starea inițială, există trei elemente din care puteți alege, astfel încât să puteți comuta selecția. Cu toate acestea, dacă modificați dimensiunea meniului vertical sau Label dimensiunea fontului , acesta nu se va potrivi cu dimensiunea textului afișat în lista verticală.

Ajustarea dimensiunii elementelor verticale

Dacă nu ați modificat dimensiunea obiectului sau dimensiunea fontului atunci când plasați lista verticală, nu trebuie să faceți acest lucru, dar dacă faceți acest lucru, va trebui să setați și elementul vertical.

Obiectul vertical conține o definiție a modului în care elementul selectat este afișat atunci când este afișat. Dropdown Template este cazul. Dacă nu setați câteva setări, nu va arăta frumos.

În primul rând, se presupune că fiecare parametru al meniului derulant plasat este setat după cum urmează. Dacă setați cu parametri diferiți, înlocuiți numerele și citiți-le. În acest exemplu, sunt setați și alți parametri, dar sunt omiși deoarece nu sunt legați de elementele verticale.

Dimensiune font element

Mai întâi, modificați dimensiunea fontului elementului. Selectați > > >Dropdown Template Content > > Viewport Item Item Labelpentru obiect. Specificați o dimensiune a fontului de 40, care este aceeași cu Etichetă. Dacă doriți să afișați mai multe opțiuni, le puteți face puțin mai mici.

Chiar dacă măriți dimensiunea fontului, dimensiunea de afișare a unui element nu se modifică, deci este posibil să nu puteți vedea nimic, chiar dacă îl rulați.

Dimensiune articol

Apoi, setați dimensiunea unui element. Obiectele de selectat sunt > >Dropdown Template Viewport > > . Content Item Setați înălțimea la 72. Dacă doriți să afișați mai multe opțiuni, le puteți face puțin mai mici.

Acest lucru face ca elementele elementului să fie vizibile, dar, din anumite motive, partea superioară și inferioară a elementului selectat sunt tăiate puțin, indiferent de derulare.

Pentru a remedia acest lucru, setați înălțimea de > > >Dropdown Viewport ContentTemplate la Item 72, care este aceeași cu . Acest lucru vă va permite să vedeți corect elementele de sus și de jos.

Apropo, în setările Item derulante implicite , înălțimea lui este setată puțin mai mare decât Content . Ca urmare, o ușoară margine este afișată deasupra și dedesubtul elementului selectat, reducând senzația de presiune.

Dimensiunea marcajului de verificare

Dimensiunea marcajului de selectare este, de asemenea, mică, așa că o voi remedia. Obiectul țintă este "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Dacă modificați lățimea și înălțimea, marcajul de selectare va crește și el, deci setați-l la 72 aici.

Când îl rulez, bifa este mai mare, dar poziția este greșită, așa că voi remedia și acest lucru.

Item Checkmark Mai întâi, setați pivotul X la 0, apoi setați și poziția X la 0. Acest lucru vă permite să îl plasați într-un loc bun, indiferent de dimensiunea cecului sau a etichetei.

De asemenea, deoarece se suprapune peste etichetă, Item Lebel selectați pentru a face poziția din stânga aceeași cu dimensiunea marcajului de selectare.

Dimensiunea barei de defilare

Bara de derulare este, de asemenea, mică și dificil de făcut clic, deci faceți-o mai mare. Toată lumea este particulară în ceea ce privește dimensiunea, deci nu este ceva care poate fi determinat. În acest caz, am setat 48, care reprezintă 2/3 din înălțimea dropdown-ului.

Obiectul de selectat este setat la o valoare a lățimii în > >Dropdown Template Scrollbar.

Dimensiunea pictogramei drop-down

Nu este pe partea elementului, dar pictograma derulantă este încă mică, așa că o voi schimba. Obiectul care trebuie selectat este >Dropdown Arrow.

În ceea ce privește dimensiunea pictogramei, puteți modifica dimensiunea setând lățimea și înălțimea. Aici, am setat-o la 72, care este aceeași cu înălțimea dropdown-ului.

În acest caz, poziția va fi dezactivată, deci setați pivotul X la 1 și poziția X la 0. Acest lucru vă permite să afișați pictograma într-o poziție frumoasă, indiferent de dimensiune.

Numărul de elemente derulante afișate

Prin creșterea dimensiunii elementului, există mai puține elemente selectate care pot fi afișate simultan, așa că vom încerca să creștem acest lucru. Această setare este specificată în >Dropdown Template. Deoarece numărul de elemente de afișat nu este specificat de numărul de articole, dar dimensiunea este setată de înălțime, valoarea specificată este "înălțimea × numărul de articole". Aici, vrem să afișăm aproximativ 10 piese, așa că 72 x 10 = 720 setați .

Zona de afișare este mărită, dar în acest moment există doar 3 elemente, deci sunt afișate doar 3 elemente.

Setarea selecției

În mod implicit, sunt setate trei elemente din "Opțiunea A ~ Opțiunea C". Aceste elemente sunt Dropdown situate în componenta obiectului Dropdown .

Dacă derulați în jos inspectorul, veți găsi elementul "Opțiuni", unde puteți schimba liber numele sau puteți adăuga sau șterge.

Setarea selecției inițiale

Selecția articolelor este determinată de numere. Dropdown Dropdown Puteți specifica selecția inițială în valoarea componentei obiectului. Numerotarea articolelor începe de la 0, deci setați 3 dacă doriți ca a patra să fie selecția inițială.

Efectuați procesarea atunci când selectați un element

Poate doriți să faceți ceva atunci când selectați un element din meniul vertical. Acest lucru poate fi implementat în același mod ca atunci când se face clic pe un buton.

Obiectul are un meniu derulant și un text pe rând. După selectarea unui element din meniul vertical, asigurați-vă că conținutul este afișat într-un obiect text din dreapta. Nu contează nimic altceva decât plasarea obiectelor, astfel încât să le puteți configura oricum doriți.

Mai întâi, creați un script în proiectul dvs. DropdownItemSelector În acest caz, se numește .

Deschideți scriptul și adăugați codul la următoarele:

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

După ce salvați scriptul, atașați-l la EventSystem obiect. După cum se explică în butoanele Sfaturi pentru butoane, acest sfat atașează în mod constant scripturi, EventSystem cu excepția cazului în care există un motiv specific pentru a face acest lucru.

Atașați un obiect vertical pentru a obține valoarea și un obiect text pentru a seta valoarea.

Apoi, selectați obiectul derulant cu care doriți să lucrați și adăugați "La modificarea valorii (Int32)" în Dropdown componenta Inspector.

În elementul din stânga jos, trebuie să punem obiectul la care este atașat scriptul care urmează să fie operat, așa că l-am setat aici EventSystem .

Selectați din OnSelectionChanged Fără funcție DropdownItemSelector .

Încercați să-l rulați pentru a vedea dacă funcționează corect.

Adăugarea dinamică a elementelor

Puteți specifica ce elemente pot fi selectate în editor, dar pot exista momente în care starea se schimbă în timpul jocului și doriți să schimbați elementele pe care le selectați. În acest caz, veți schimba elementul selectat în program.

Obiectul aranjează "drop-down" și "buton x2" așa cum se arată mai jos. Puteți seta liber alți parametri decât alinierea.

Creați un script și denumiți-l DropdownDynamic . Codul ar trebui să arate astfel:

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 are un control asupra elementelor de selectat, astfel încât Add să puteți controla dinamic elementele efectuând sau Remove pe.

EventSystem Atașați scripturi și obiecte la .

Atribuiți o metodă evenimentului de clic al butoanelor de adăugare și, respectiv, ștergere.

Când ați terminat, rulați-l. Dacă elementul este șters în editor, elementul nu va fi afișat chiar dacă faceți clic pe el.

Dacă faceți clic pe butonul de adăugare de patru ori, puteți vedea că au fost adăugate patru elemente.

Dacă faceți clic pe butonul de ștergere de două ori, puteți vedea că două elemente au fost șterse.