Mesin Tata Letak

UI Toolkit termasuk mesin tata letak yang memposisikan elemen visual berdasarkan tata letak dan sifat styling. Mesin tata letak menggunakan prinsip tata letak Yoga, yang menerapkan subset Flexbox, sistem tata letak HTML / CSS.

Resources

Untuk memulai dengan Yoga dan Flexbox, gunakan sumber daya eksternal berikut:

• Musik: UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
  Lihat di Glossary Toolkit properti sesuai dengan perilaku tata letak Yoga.
• Panduan CSS-Tricks ke Flexbox: UI Toolkit mendukung sebagian besar properti di Flexbox.

Behavior

Secara default, semua elemen visual adalah bagian dari tata letak. Tata letak memiliki perilaku default berikut:

• Wadah mendistribusikan anak-anak secara vertikal.
• Posisi persegi panjang wadah mencakup anak-anaknya persegi panjang. Perilaku ini dapat dibatasi oleh sifat tata letak lainnya.
• Elemen visual dengan teks menggunakan ukuran teks dalam perhitungan ukurannya. Perilaku ini dapat dibatasi oleh sifat tata letak lainnya.

UI Toolkit termasuk built-in controls untuk komponen UI standar, seperti tombol, toggle, atau bidang teks. Kontrol bawaan ini memiliki gaya yang mempengaruhi tata letak mereka.

Praktikum

Daftar berikut memberikan tips untuk membantu meningkatkan kinerja mesin tata letak:

• Mengatur width dan height untuk menentukan ukuran elemen.

• Gunakan properti flexGrow (USS: flex-grow: <value>;) untuk menetapkan ukuran yang fleksibel ke elemen. Nilai properti flexGrow menetapkan berat dasar pada ukuran elemen ketika ditentukan oleh saudaranya.

• Mengatur properti flexDirection ke row (USS: flex-direction: row;) untuk beralih ke tata letak horisontal.

• Gunakan posisi relatif untuk mengimbangi elemen berdasarkan posisi tata letak aslinya.

• Mengatur properti position untuk absolute untuk menempatkan elemen relatif ke posisi induk persegi panjang. Ini tidak mempengaruhi tata letak saudara atau induknya.

Example

Contoh berikut menciptakan elemen UI yang ditunda ke sudut kiri bawah layar. Ini dicapai dengan membuat elemen induk yang mengisi seluruh layar, dan kemudian memposisikan elemen anak di sudut kiri bawah.

1. Buat VisualElement baru
2. Mengatur properti flexGrow ke 1.
3. Buat VisualElement baru dan buat anak yang pertama
4. Mengatur properti position pada elemen ke absolute
5. Mengatur posisi offset untuk left dan bottom ke 0

Ini adalah kode XML yang dihasilkan:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
    </ui:VisualElement>
</ui:UXML>