Struktur UI dengan UX
Beban UXML dari C# skrip

Tulis Template UXML

UXML template adalah file teks yang ditulis menggunakan XML markup yang mendefinisikan struktur logis antarmuka pengguna. Contoh kode berikut menunjukkan cara menentukan panel sederhana yang meminta pengguna untuk membuat pilihan:

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../UIElementsSchema/UnityEngine.UIElements.xsd">

    <Label text="Select something to remove from your suitcase:"/>
    <Box>
        <Toggle name="boots" label="Boots" value="false" />
        <Toggle name="helmet" label="Helmet" value="false" />
        <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </Box>
    <Box>
        <Button name="cancel" text="Cancel" />
        <Button name="ok" text="OK" />
    </Box>
</UXML>

Garis pertama dari file adalah deklarasi XML. deklarasi adalah opsional. Jika deklarasi disertakan, itu harus berada di baris pertama dan tidak ada konten atau ruang putih lainnya mungkin muncul sebelum itu. Atribut version diperlukan. Atribut encoding adalah opsional. Jika encoding disertakan, itu harus menyatakan pengkodean karakter dari file.

Garis berikutnya mendefinisikan akar dokumen, <UXML>. Elemen <UXML> termasuk atribut untuk definisi prefiks namespace dan lokasi file definisi schema. Anda dapat menentukan atribut ini dalam urutan tidak ada bagian.

Pada UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit, setiap elemen didefinisikan dalam namespace UnityEngine.UIElements atau UnityEditor.UIElements:

  • The UnityEngine.UIElements namespace mengandung unsur-unsur yang didefinisikan sebagai bagian dari Unity Runtime.
  • Area nama UnityEditor.UIElements mengandung unsur-unsur yang tersedia di Editor Unity. Untuk menentukan elemen sepenuhnya, Anda harus memperbaikinya dengan ruang namanya.

Misalnya, jika Anda ingin menggunakan elemen Button di template UXML Anda, Anda harus menentukan <UnityEngine.UIElements:Button />.

Untuk menentukan namespaces lebih mudah, Anda dapat menentukan prefiks namespace. Sebagai contoh, xmlns:engine="UnityEngine.UIElements" mendefinisikan prefiks engine sebagai UnityEngine.UIElements. Setelah prefix namespace didefinisikan, Anda dapat menggunakannya untuk menentukan namespaces. Sebagai contoh, <engine:Button /> setara dengan <UnityEngine.UIElements:Button />

Anda juga dapat mendefinisikan namespace default dengan tidak termasuk awal. Sebagai contoh, garis xmlns="UnityEngine.UIElements" mendefinisikan UnityEngine.UIElements sebagai default namespace. Ini berarti bahwa menentukan, misalnya, <Button /> setara dengan <UnityEngine.UIElements:Button />

Jika Anda mendefinisikan unsur-unsur Anda sendiri, elemen-elemen ini mungkin didefinisikan dalam ruang nama mereka sendiri. Jika Anda ingin menggunakan elemen-elemen ini dalam template UXML Anda, Anda harus menyertakan definisi namespace dan lokasi file schema dalam tag <UXML>, bersama dengan ruang nama Unity.

Ketika Anda membuat aset template UXML baru dengan memilih Asset > Create > UI Toolkit > Editor Window, Editor secara otomatis mendefinisikan namespaces untuk Anda.

Definisi UI dalam akar <UXML>. Defintition UI adalah serangkaian elemen XML bersarang, masing-masing mewakili VisualElement.

Nama elemen sesuai dengan nama kelas C# elemen untuk instaniate. Sebagian besar elemen memiliki atribut dan nilai-nilai mereka dipetakan untuk properti kelas yang sesuai di C #. Setiap elemen mengherankan atribut dari jenis kelas induknya, yang dapat menambahkan set atributnya sendiri. VisualElement menjadi kelas dasar untuk semua elemen, memberikan atribut berikut untuk semua elemen:

  • name: identifier untuk elemen. Nama harus unik.
  • picking-mode: set ke Position untuk menanggapi peristiwa mouse atau Ignore untuk mengabaikan acara mouse.
  • focus-index: (OBSOLETE) Gunakan tabIndex dan focusable.
  • tabindex: integer yang menentukan posisi tabbing dari elemen saat ini.
  • focusable: sebuah boolean yang menunjukkan apakah elemennya terfokus.
  • class: daftar pengidentifikasi ruang yang mencirikan elemen. Gunakan kelas untuk menetapkan gaya visual untuk elemen. Anda juga dapat menggunakan kelas untuk memilih set elemen di UQuery.
  • tooltip: string yang ditampilkan sebagai tooltip ketika hovers mouse atas elemen.
  • view-data-key: string yang menentukan kunci yang digunakan untuk serialisasi elemen.

Contoh template UXML tidak mendefinisikan aspek visual antarmuka pengguna. Disarankan bahwa Anda mendefinisikan informasi gaya, seperti dimensi, font, dan warna untuk menggambar UI, dalam file ASS terpisah (lihat Gaya dan lembar gaya Unity).

Tambahkan gaya ke UX

Untuk merujuk file stylesheet, file UXML dapat menggunakan elemen <Style> di bawah deklarasi elemen.

Misalnya, jika Anda memiliki file UXML dan file USS bernama "gaya.uss" di folder yang sama:

<engine:UXML ...>
    <engine:VisualElement class="root">
        <Style src="styles.uss" />
    </engine:VisualElement>
</engine:UXML>

#root {
    width: 200px;
    height: 200px;
    background-color: red;
}

Sitemap Unity tidak mendukung elemen Note: di bawah elemen akar <Style>.<UXML> element.

Anda juga dapat mendeklarasikan gaya in-line secara langsung sebagai atribut elemen UXML:

<engine:UXML ...>
    <engine:VisualElement style="width: 200px; height: 200px; background-color: red;" />
</engine:UXML>

Menggunakan file UXML

Anda dapat membuat komponen dengan cukup mendefinisikannya dalam file UXML dan mengimpornya menggunakan elemen <Template> dan <Instance> dalam file UXML lain.

Ketika merancang antarmuka pengguna yang besar, Anda dapat membuat file template UXML yang menentukan bagian UI.

Anda dapat menggunakan definisi UI yang sama di banyak tempat. Misalnya, katakanlah bahwa Anda memiliki elemen UI potret yang memiliki gambar, nama, dan label. Anda dapat membuat file template UXML untuk menggunakan elment UI potrait di file UXML lainnya.

Misalnya, katakanlah bahwa Anda memiliki komponen Portrait dalam file Assets/Portrait.uxml:

<engine:UXML ...>
    <engine:VisualElement class="portrait">
        <engine:Image name="portaitImage" style="--unity-image: url(\"a.png\")"/>
        <engine:Label name="nameLabel" text="Name"/>
        <engine:Label name="levelLabel" text="42"/>
    </engine:VisualElement>
</engine:UXML>

Anda dapat mengatur komponen Portrait ke template UXML lainnya seperti ini:

<engine:UXML ...>
    <engine:Template src="/Assets/Portrait.uxml" name="Portrait"/>
    <engine:VisualElement name="players">
        <engine:Instance template="Portrait" name="player1"/>
        <engine:Instance template="Portrait" name="player2"/>
    </engine:VisualElement>
</engine:UXML>

Override UXML atribut

Ketika Anda membuat contoh UXML template, Anda dapat menimpa nilai atribut default dari unsur-unsurnya. Overrides attribute memungkinkan Anda untuk mengukur templat yang sama berkali-kali dengan nilai yang berbeda untuk setiap contoh.

Untuk menimpa atribut, Anda harus menentukan:

  • element-name attribute dari elemen yang atribut yang ingin Anda override
  • Nama atribut untuk override
  • Nilai atribut baru

Dalam contoh berikut,

  • player-name-label adalah atribut element-name elemen.
  • text adalah atribut untuk overrides.
  • Alice adalah nilai atribut baru
<AttributeOverrides element-name="player-name-label" text="Alice" />

Override attribute mempengaruhi seluruh instance, jadi jika instance memiliki dua elemen bernama player-name-label, dan keduanya memiliki atribut text, override mempengaruhi keduanya.

Atribute override contoh

Katakanlah Anda membuat permainan, dan Anda ingin menampilkan set informasi yang sama untuk setiap pemain. Anda dapat membuat template yang dapat digunakan kembali tunggal, dan menggunakan atribut overrides untuk membuat instance khusus pemain.

Misalnya, jika Anda membuat template berikut:

    <UXML xmlns="UnityEngine.UIElements">
        <Label name="player-name-label" text="default name" />
        <Label name="player-score-label" text="default score" />
    </UXML>

Anda dapat menulisnya dari file UXML lain dan menimpa atributnya untuk menampilkan nama dan skor masing-masing pemain:

    <UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
        <Template src="MyTemplate.uxml" name="MyTemplate" />
        <Instance name="player1" template="MyTemplate">
            <AttributeOverrides element-name="player-name-label" text="Alice" />
            <AttributeOverrides element-name="player-score-label" text="2" />
        </Instance>
        <Instance name="player2" template="MyTemplate">
            <AttributeOverrides element-name="player-name-label" text="Bob" />
            <AttributeOverrides element-name="player-score-label" text="1" />
        </Instance>
    </UXML>

Override beberapa atribut

Anda dapat menentukan lebih dari satu atribut per override. Sebagai contoh, sintaks berikut menemukan elemen dalam contoh bernama player-name-label, dan

  • Override nilai default atribut text dengan nilai baru, Alice.
  • Override nilai default atribut tooltip dengan nilai baru, Tooltip 1.
<AttributeOverrides element-name="player-name-label" text="Alice" tooltip="Tooltip 1" />

Nest attribute overrides

Atribute overrides menyebar melalui template bersarang dalam hierarki elemen. Misalnya, jika template Contoh template B, dan template B contoh template C, baik template A dan template B dapat menimpa atribut dalam template C.

Ketika Anda menimpa atribut dalam template bersarang, override terdalam mengambil precedence. Jadi dalam contoh di atas jika template A dan template B baik menimpa atribut yang sama dari template C, override dalam template B menentukan apa yang sebenarnya muncul di UI rendered.

Limitations

  • Atribute overrides menemukan atribut yang cocok sesuai dengan nama elemen yang Anda tentukan. Mereka tidak menggunakan Amerika Serikat Pilih atau UQUery untuk mencocokkan elemen.
  • Overrides attribute tidak terikat dengan mengikat data, meskipun Anda dapat menahan atribut binding-path elemen.
  • Anda tidak dapat menimpa atribut name elemen atau style.

Referensi file lain dari UXML

File UXML dapat merujuk file UXML lain dan file USS melalui elemen.

Kedua elemen <Template> dan <Style> menerima atribut "src" atau atribut "path".

Atribut src memungkinkan jalur relatif, memberikan pesan kesalahan pada waktu impor (misalnya, ketika file hilang), dan memastikan bahwa Unity dengan benar termasuk Aset referensi file UXML Anda di build pemain.

Atribut path memungkinkan penggunaan mekanisme Sumber Daya Unity, tetapi tidak memberikan pelaporan kesalahan pada waktu impor, dan tidak memungkinkan jalur relatif.

Atribut src attribute

Atribut src mengharapkan path file menjadi relatif terhadap akar proyek atau folder yang berisi file UXML. Anda harus menyertakan ekstensi file. Dalam contoh berikut, file UXML terletak pada Aset\Editor\UXML dan file AS terletak pada Aset\Editor\USS.

  • Gunakan salah satu path contoh berikut, berdasarkan lokasi file UXML: src="../USS/styles.uss" atau src="template.uxml"
  • Gunakan salah satu contoh berikut untuk jalur absolut, berdasarkan lokasi proyek: src="/Assets/Editor/USS/styles.uss" atau src="project:/Assets/Editor/UXML/template.uxml".

Atribut path attribute

Atribut path menerima file yang terletak di folder Resources atau folder Editor Default Resources, dengan aturan berikut:

  • Jika file berada di folder Resources, tidak termasuk ekstensi file. Contohnya, tulis path="template" untuk file yang terletak pada Email: info@ids-imaging.com.
  • Jika file berada di folder Editor Default Resources, Anda harus menyertakan ekstensi file. Contohnya, tulis path="template.uxml" untuk file yang terletak pada Aset/Editor Sumber Daya default/template.uxml.
Struktur UI dengan UX
Beban UXML dari C# skrip