Unity'de VerticalLayoutGroup ile Öğeleri Dikey Hizalama

Unity oyun motorunda arayüz tasarımı (UI) oluştururken, öğeleri düzenli ve okunaklı bir şekilde yerleştirmek oldukça önemlidir. Bu düzenleme işlemi için Unity'nin sunduğu Layout Group bileşenlerinden biri de VerticalLayoutGroup'tur. Bu bileşen, altındaki tüm çocuk öğelerini dikey bir çizgi boyunca otomatik olarak düzenlemenizi sağlar. Bu makalede, VerticalLayoutGroup'un özelliklerini detaylı bir şekilde inceleyecek ve kullanımını adım adım açıklayacağız.

VerticalLayoutGroup Nedir?

VerticalLayoutGroup, Unity'nin Canvas sisteminde bulunan bir Layout Group türüdür. Bu bileşen, kendisine eklenen tüm çocuk UI öğelerini dikey olarak, üst üste veya belirli bir aralıkla sıralar. Bu, arayüz tasarımında özellikle menüler, listeler ve dikey olarak hizalanması gereken öğeleri düzenlemek için oldukça kullanışlıdır. HorizontalLayoutGroup'un yatay düzenlemeye karşılık gelen dikey bir düzenleme sağlar.

VerticalLayoutGroup Özellikleri

Spacing:

Bu özellik, dikey olarak sıralanan öğeler arasındaki boşluğu (pixel cinsinden) belirler. Örneğin, 10 değerini girerseniz, her bir öğe arasında 10 pixel boşluk bırakılır.

Child Alignment:

Bu özellik, her bir çocuk öğenin VerticalLayoutGroup içinde nasıl hizalanacağını kontrol eder. Seçenekler şunlardır:

Stretch: Çocuk öğeler, VerticalLayoutGroup'un genişliğine uyacak şekilde genişletilir.

Middle Center: Çocuk öğeler dikey ve yatay olarak ortalanır.

Upper Center: Çocuk öğeler dikey olarak üstte, yatay olarak ortalanır.

Lower Center: Çocuk öğeler dikey olarak altta, yatay olarak ortalanır.

Child Force Expand:

Bu özellik, çocuk öğelerin VerticalLayoutGroup'un yüksekliğine uyacak şekilde genişletilmesini sağlar. Eğer bu özellik işaretliyse, çocuk öğelerin kendi yükseklikleri dikkate alınmaz ve VerticalLayoutGroup'un yüksekliği ile aynı yüksekliğe sahip olurlar. Aktif değilse, çocuk öğeler kendi doğal boyutlarında kalırlar.

Reverse Child Order:

Bu özellik, çocuk öğelerin sıralamasını tersine çevirir. Varsayılan olarak, çocuk öğeler eklenme sırasına göre düzenlenir. Bu özellik aktifleştirildiğinde, en son eklenen öğe en üstte, en önce eklenen öğe en altta yer alır.

VerticalLayoutGroup Kullanımı: Adım Adım Örnek

Şimdi, bir örnek üzerinde VerticalLayoutGroup'un nasıl kullanıldığını adım adım inceleyelim. Örneğimizde, üç adet Button'ı dikey olarak sıralayacağız.

Yeni bir Canvas oluşturun: Hiyerarşi penceresinde sağ tıklayıp UI > Canvas seçeneğini kullanarak yeni bir Canvas oluşturun.

VerticalLayoutGroup ekleyin: Canvas'a bir Panel ekleyin. Panelin üstüne sağ tıklayarak Layout > Vertical Layout Group ekleyin.

Button'lar ekleyin: Panel'e üç adet Button ekleyin. Button'ları Panel'in altına, hiyerarşik olarak eklediğinizden emin olun.

Özellikleri ayarlayın: VerticalLayoutGroup bileşeninin Inspector penceresinden Spacing değerini (örneğin, 20) ve Child Alignment değerini (örneğin, Middle Center) ayarlayın.

Bu adımları takip ederek, üç Button'ınız dikey olarak, aralarında 20 pixel boşluk olacak şekilde ve ortalanmış olarak düzenlenecektir. Child Force Expand özelliğini etkinleştirerek Button'ların VerticalLayoutGroup'un yüksekliğine uymasını sağlayabilirsiniz. Reverse Child Order özelliğini etkinleştirerek Button'ların sıralamasını tersine çevirebilirsiniz.

Kod Örneği (C#):

VerticalLayoutGroup'u kod yoluyla da kontrol edebilirsiniz. Aşağıdaki örnekte, bir Button'ı dinamik olarak VerticalLayoutGroup'a ekliyoruz:



using UnityEngine;

using UnityEngine.UI;
public class AddButton : MonoBehaviour

{

    public VerticalLayoutGroup layoutGroup;public void AddNewButton()

    {

        Button newButton = Instantiate(Resources.Load("Button")) as Button;

        newButton.transform.SetParent(layoutGroup.transform);

        newButton.GetComponentInChildren<Text>().text = "Yeni Buton";

    }

}

Bu kod, Resources klasöründe "Button" adlı bir prefab olduğunu varsayar. Bu prefab, Button bileşenine sahip olmalıdır. Fonksiyon çağrıldığında, yeni bir Button oluşturulur, layoutGroup'a eklenir ve metni değiştirilir.

Bu makalede, Unity'de VerticalLayoutGroup bileşeninin nasıl kullanılacağını adım adım açıkladık. Bu bileşen, arayüz tasarımında öğeleri dikey olarak düzenlemek için oldukça kullanışlı bir araçtır. Örnekler ve kod açıklamaları ile birlikte, VerticalLayoutGroup'u projenizde kolayca kullanabilirsiniz.