Layout Editor: nedir, Android Studio ve düzen oluşturma

Layout Editor Nedir?

Layout Editor — Android Studio'ya entegre edilmiş, Android uygulamalarının kullanıcı arayüzlerini görsel olarak tasarlamak için bir araçtır. res/layout/ klasöründeki bir XML düzen dosyasına çift tıkladığınızda açılır ve Code, Design ve Split sekmeleri arasında geçiş yapmak için alt panelden erişilebilir. Geliştirici, bileşenleri paletteki alandan tuval üzerine sürükleyebilir, özelliklerini yapılandırabilir ve değişiklikleri gerçek zamanlı olarak gözlemleyebilir.

Araç iki modu destekler: Design (widget'ların gerçek görünümüyle görsel tuval) ve Blueprint (constraint'ler ve sınırlarla şematik gösterim). Split modu, XML kodunu ve görsel tuvale aynı anda gösterir. Aralarında geçiş, düzenleyicinin sol üst köşesindeki düğmelerle yapılır.

Layout Editor, her kullanıcı eylemi için otomatik olarak XML kodu üretir: öğe ekleme, kenar boşluklarını ayarlama, constraint oluşturma. Bu, geliştiricinin onlarca XML niteliğini hatırlamasını gerektirmez ve görsel sonuca odaklanmasını sağlar. Üretilen kod, Code sekmesinde her zaman manuel olarak düzenlenebilir.

Layout Editor'ün Ana Bölgeleri

Layout Editor arayüzü dört bölgeye ayrılmıştır: Palette (bileşen paleti), Component Tree (bileşen ağacı), Design Surface (tasarım tuvali) ve Properties Panel (özellik paneli). Palette, Android SDK'daki tüm widget'ları kategorilere göre gruplandırılmış şekilde içerir: Widgets, Text, Buttons, Containers ve diğerleri. Component Tree, düzen hiyerarşisini ağaç şeklinde göstererek öğelerin kapsayıcılar arasında sürüklenmesine olanak tanır.

Design Surface — düzenin görüntülendiği düzenleyicinin merkezi kısmıdır. Tuval üzerinde öğeleri seçebilir, taşıyabilir, boyutlarını değiştirebilir ve constraint'ler oluşturabilirsiniz. Tuvale alt kısmında, düzenin farklı ekranlarda önizlemesi için cihaz ve yönlendirme değiştirici bulunur. Layout Editor, Nexus, Pixel ve Samsung gibi birden çok sanal cihazda önizlemeyi destekler.

Properties Panel, seçilen öğenin niteliklerini gösterir: layout_width, layout_height, kenar boşlukları (margin), iç boşluklar (padding), gravity ve TextView için textSize gibi tüm özel nitelikler. Properties Panel'deki her değişiklik anında tuvale yansır ve ilgili XML kodunu oluşturur.

Düzenleyicinin sol üst köşesinde kontrol düğmeleri bulunur: görüntüleme modu seçimi, constraint'lerin otomatik bağlanmasını etkinleştirme (Autoconnect), constraint'leri çizgi olarak gösterme ve sanal cihazlar arasında geçiş. «Device for Preview» düğmesi, uyarlanabilirliği kontrol etmek için bir akıllı telefon, tablet veya Android TV modeli seçmenize olanak tanır.

ConstraintLayout: Esnek Konumlandırma

ConstraintLayout — Google tarafından tüm yeni Android projeleri için önerilen ana düzendir. İç içe LinearLayout'ların aksine ConstraintLayout, her öğenin üst öğeye, diğer öğelere veya kılavuz çizgilerine (guidelines) bağlı olduğu düz bir hiyerarşi oluşturur. Bu, iç içe geçme derinliğini azaltır ve işleme performansını artırır.

ConstraintLayout'taki her öğenin yan constraint'leri vardır: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf. Constraint'ler üst öğeye (parent) veya başka bir öğenin kimliğine bağlanabilir. Temel XML şablonu şöyle görünür:

Bu örnekte TextView, üst öğenin dört tarafına da ortalanmıştır. 0dp (match_constraint) boyutu, genişliğin sol constraint'ten sağ constraint'e kadar uzandığı anlamına gelir. Bu yaklaşım, sabit boyutlar olmadan uyarlanabilir düzenler oluşturmayı sağlar.

ConstraintLayout ayrıca Bias'ı da destekler — öğenin merkezinin kaydırılması. layout_constraintHorizontal_bias ve layout_constraintVertical_bias nitelikleri 0 ile 1 arasında değer alır; 0.5 merkez, 0 başlangıca yaslama, 1 ise sona yaslama anlamına gelir. Bias, bir öğeyi iki constraint arasında tam olarak konumlandırmayı sağlar.

ConstraintLayout'un ek özellikleri: Guidelines (yüzde veya dp cinsinden kılavuz çizgileri), Barriers (birden çok öğeyi birleştiren bariyerler) ve Chains (alan dağılımı olan öğe zincirleri). Tüm bu öğeler, tuval üzerindeki bağlam menüsü aracılığıyla doğrudan Layout Editor'da oluşturulur.

LinearLayout: Doğrusal Yerleşim

LinearLayout — alt öğeleri art arda yatay (android:orientation="horizontal") veya dikey (android:orientation="vertical") olarak yerleştiren kapsayıcıdır. Anlaşılması en kolay düzendir ancak karmaşık düzenlerde iç içe geçmiş hiyerarşi oluşturarak performansı düşürebilir.

LinearLayout'un temel niteliği weight'tir (android:layout_weight). Boş alanı öğeler arasında belirtilen değerlere orantılı olarak dağıtmayı sağlar. İki düğmeye weight="1" verirseniz eşit genişlik kaplarlar. weight="2" olan bir öğe, weight="1" olana göre iki kat daha fazla yer alır. LinearLayout ile XML örneği:

Bu örnekte EditText, layout_weight="1" alır ve labelName ile btnSubmit arasındaki tüm boş alanı kaplar. layout_width="0dp", EditText genişliğinin tamamen weight tarafından belirlendiğini belirtir. Weight olmadan, farklı ekranlara uyum sağlamayan sabit bir genişlik ayarlamanız gerekirdi.

LinearLayout'un önemli özellikleri: android:gravity, kapsayıcı içindeki içeriğin hizalamasını kontrol ederken android:layout_gravity, kapsayıcının kendisinin üst öğeye göre hizalamasını kontrol eder. İç içe LinearLayout'lar, derin iç içe geçmenin yaygın bir nedenidir, bu nedenle Google bu tür yapıların ConstraintLayout ile değiştirilmesini önerir.

XML Kodu: Düzenin İç Yapısı

Her Android düzeni, res/layout/ klasöründe bir XML dosyasıdır. Layout Editor bu dosyayı otomatik olarak oluşturur, ancak yapısını anlamak manuel optimizasyon için gereklidir. Kök öğe, içinde alt widget'ların bulunduğu kapsayıcı türünü (ConstraintLayout, LinearLayout, FrameLayout) belirler.

ConstraintLayout ile temel XML şablonu, xmlns:android ve xmlns:app ad alanı bildirimlerini içerir. App ad alanı, layout_constraintStart_toStartOf gibi ConstraintLayout kitaplığı nitelikleri için kullanılır. Her öğeye, diğer öğelerden ve Activity veya Fragment kodundan başvurmak için android:id verilmesi önerilir.

Birden çok öğe ve constraint içeren düzen parçası örneği:

Bu düzende ImageView, üst öğenin üst kısmına bağlanmış ve yatay olarak ortalanmıştır. TextView, ImageView'in alt kenarına (Top_toBottomOf) bağlanmıştır. Button, TextView'in altına yerleştirilmiştir. Bu constraint zinciri, iç içe LinearLayout'lar olmadan sıralı bir yapı oluşturur.

Layout Editor, Design / Code / Split sekmeleri aracılığıyla görsel ve metinsel gösterim arasında geçiş yapmayı sağlar. Split modunda XML'deki değişiklikler anında tuvale yansır ve bunun tersi de geçerlidir. Bu, tuval üzerinde görsel kontrolü olmayan niteliklerin ince ayarı için özellikle kullanışlıdır.

Bileşen Paleti ve Properties Panel

Palette (palet) — Layout Editor'ün sol paneli olup tüm kullanılabilir UI bileşenlerini içerir: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView ve diğerleri. Bileşenler kategorilere ayrılmıştır: Widgets, Text, Buttons, Containers, Transitions, Advanced. Bir bileşeni tuvale eklemek için onu paletteki alandan Design Surface'a sürüklemeniz yeterlidir.

Properties Panel (sağ panel), seçilen öğenin tüm niteliklerini gösterir. Panel bölümlere ayrılmıştır: Id (tanımlayıcı), Layout (boyutlar ve kenar boşlukları), Transform (döndürme ve ölçek), Text (TextView içeriği), Padding and Margin. Her nitelik için wrap_content, match_parent, match_constraint (0dp) seçeneklerini içeren bir açılır menü bulunur.

Properties Panel'in özelliği, grafik gösterimli görsel kenar boşluğu düzenleyicisidir (padding ve margin). İlgili okun yanındaki sayıya tıklayarak bir kaydırıcı yardımıyla kenar boşluğunu değiştirebilirsiniz. Layout Editor, kenar boşluklarını otomatik olarak normalleştirir: dört kenar boşluğu da eşitse android:layout_margin niteliği kullanılır, aksi halde ayrı ayrı android:layout_marginStart, android:layout_marginTop vb. kullanılır.

Constraint niteliklerini düzenlemek için Properties Panel'de Constraints adlı özel bir bölüm bulunur. Burada öğenin tüm bağlantıları gösterilir: her bir kenarın üst öğenin veya başka bir öğenin hangi tarafına bağlı olduğu. Bağlantı türünü değiştirebilir, constraint ekleyebilir veya silebilirsiniz. Bir constraint'i, Blueprint modunda tuval üzerindeki ilgili çizgiye tıklayarak da silebilirsiniz.

Uyarlanabilir Düzenler Oluşturma

Uyarlanabilir düzen, farklı ekran boyutlarında doğru şekilde görüntülenen düzendir: kompakt telefonlardan (320dp) büyük tabletlere (600dp+) ve katlanabilir cihazlara kadar. Layout Editor, uyarlanabilir arayüzleri kontrol etmek ve oluşturmak için çeşitli araçlar sağlar.

İlk araç, araç çubuğundaki Device for Preview'dur. Açılır liste popüler cihazları içerir: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C ve diğerleri. İstediğiniz ekran boyutları ve piksel yoğunluğu (dpi) ile özel bir cihaz ekleyebilirsiniz. Cihazlar arasında geçiş bir saniye sürer ve düzenin her ekranda nasıl göründüğünü gösterir.

İkinci araç, alternatif düzenler oluşturmak için boyut niteleyicileridir (qualifiers). Layout Editor'da farklı ekran boyutları, yönlendirme veya yoğunluk için aynı XML dosyasının birden çok sürümünü oluşturabilirsiniz. Örneğin telefon için activity_main.xml ve tablet için activity_main-sw600dp.xml dosyası. Layout Editor, etkin niteleyici için otomatik olarak önizleme gösterir.

Üçüncü yaklaşım, yüzde olarak Guidelines ile ConstraintLayout'tur. app:layout_constraintGuide_percent niteliğine sahip kılavuz çizgileri, öğeleri yüzde konumlarına bağlamayı sağlar. Örneğin, %50'deki bir guideline, cihaz boyutundan bağımsız olarak ekranı ikiye böler. Bu, XML dosyalarını çoğaltmadan uyarlanabilir düzenler oluşturmanın en esnek yoludur.

Layout Editor ayrıca uyarlanabilirlik sorunlarıyla ilgili uyarılar gösterir: sabit genişlikli öğelerde, çok büyük resimlerde veya optimal olmayan iç içe geçmelerde sarı üçgenler. Geliştirici, uyarıya tıklayarak düzeltme önerisi alabilir.

XML Düzenlerini Optimize Etme

Düzen optimizasyonu, uygulamanın işleme hızını ve akıcılığını doğrudan etkiler. Layout Editor, yerleşik Layout Inspector ve Problems panelindeki uyarılar aracılığıyla sorunları tespit etmeye yardımcı olur. Temel optimizasyon kuralları: iç içe geçmeyi en aza indirmek, iç içe LinearLayout'lar yerine ConstraintLayout kullanmak, doğru boyut niteliklerini seçmek.

İç içe geçme derinliği — performansın baş düşmanıdır. Her iç içe kapsayıcı, ölçüm ve çizim süresini artırır. Android Studio'daki Hierarchy View aracı, düzen ağacını gösterir. Derinlik 5–6 seviyeyi aşarsa, düzen yeniden yapılandırılmalıdır. ConstraintLayout, 3–4 iç içe geçme seviyesini tek bir düz kapsayıcıyla değiştirerek bu sorunu çözer.

Layout Editor'da XML düzenlerini optimize etme önerileri:

• ConstraintLayout kullanın iç içe LinearLayout'lar yerine kök kapsayıcı olarak — hiyerarşi derinliğini azaltır ve işlemeyi hızlandırır
• Büyük listelerde LinearLayout'ta layout_weight'ten kaçının — weight çift geçişli ölçüm (two-pass layout) gerektirir
• Kullanılmayan constraint'leri kaldırın Layout Editor'da Clear Constraints of Selection bağlam menüsüyle
• ViewStub kullanın seyrek gösterilen bloklar için — ViewStub, şişirmeyi görünürlük anına kadar erteler
• Yeniden kullanılabilir bileşenler için Merge — merge etiketi, include ile ekleme sırasında gereksiz kapsayıcıyı ortadan kaldırır
• Resim boyutlarını küçültün ve simgeler için PNG yerine VectorDrawable kullanın

Layout Inspector — uygulama çalışma zamanında düzenleri profillemek için Android Studio aracıdır. Gerçek hiyerarşiyi, her bileşenin ölçüm ve işleme süresini gösterir. Layout Editor, Layout Inspector ile entegredir: bir uyarıya çift tıklamak, ayrıntılı raporda ilgili sorunu açar.